Hello World 👋
This is the 6th article of the series My Review of Kent C. Dodds's EpicReact.Dev. Please note that this blog post series is just my review of the EpicReact.Dev workshop material. I am just trying to explain what I learned and understood in my own way. This is not in any way officially associated with Kent C. Dodds or EpicReact.Dev. You would learn a lot more when you actually go through the EpicReact.Dev video explanations and workshop material yourself. The workshop material is also self-paced and open source. So, if you want to do the workshop yourself, you can go to React Fundamentals Workshop Repo and follow the instructions there.
In this article, you will learn about how to do styling in React. You will also learn how to handle forms in React.
Styling
In React, there are primarily two ways to style the elements. One is through inline CSS and the other is to just add a className and style it in an external CSS file.
Inline CSS
In HTML, you can add inline styles to elements by adding your styles as a string to the style attribute.
<div style="color: red; font-style: italic;">Red Italic Text</div>
In React, you would add your styles to the style prop, but instead of a string, the style prop accepts a Style Object.
Note:
- The properties in the style object are camel-cased.
- For example,
background-color in CSS is backgroundColor in the style object.
- Know More
const elementStyle = {
color: 'red',
fontStyle: 'italic'
}
<div style={elementStyle}>Red Italic Text</div>
You can even inline elementStyle if you like
<div style={{ color: 'red', fontStyle: 'italic' }}>
Red Italic Text
</div>
Regular CSS
You can add styles to the elements by adding the className attribute and then styling it in an external CSS file.
<div className="container">Hello World</div>
.container {
margin: 0 auto;
background-color: red;
}
The example used in this section is directly taken from React Fundamentals Workshop by Kent C. Dodds's
Using event.target
Consider the following form
<form>
<div>
<label htmlFor="usernameId">Username:</label>
<input id="usernameId" type="text" name="username" />
</div>
<button type="submit">Submit</button>
</form>
Now handling forms in React is very similar to how we do in normal javascript. You just define a submit handler and then assign it to the onSubmit event of the form.
<form onSubmit={handleSubmit}>
...
...
...
</form>
function handleSubmit(event) {
event.preventDefault()
}
Notes:
Using Refs
There is another way to get the reference to an element in React - using Refs.
Refs are special objects in react that stay consistent between rerenders of the component and also changing it will not cause the component to rerender.
You can create a Ref using React.useRef()
const myRef = React.useRef()
Refs will have a current property which contains the value of ref. If you assign a ref to a React element, ref.current will automatically have the reference to the object.
For example
<input ref={myRef} />
Now myRef.current will have reference to that input element.
Let's make use of ref to get the username in our form.
function UsernameForm() {
const usernameInputRef = React.useRef()
function handleSubmit(event) {
event.preventDefault()
}
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="usernameInput">Username:</label>
<input id="usernameInput" type="text" ref={usernameInputRef} />
</div>
<button type="submit">Submit</button>
</form>
)
}
Go through useRef - official docs to learn more about refs.
Using useState
This is the most common way that is used to handle forms in React.
We store the value of the input in a state variable and then add an onChange handler to the input which updates the state variable.
In React, there is a special function called useState which you can use to handle state. It returns an array of two values.
- The value of the state
- A function to update the value of the state
Note:
useState also takes the initial value of the state as its single argument.
Example:
const [count, setCount] = useState(0)
- Here
count hold the value of the state.
setCount is a function that can update the value of count.0 is the initial value of count.
Let's use this to handle forms.
function UsernameForm() {
const [username, setUsername] = useState('')
function handleSubmit(event) {
event.preventDefault()
}
function handleChange(event) {
setUsername(event.target.value)
}
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="usernameInput">Username:</label>
<input
id="usernameInput"
value={username}
type="text"
onChange={handleChange}
/>
</div>
<button type="submit">Submit</button>
</form>
)
}
Note:
- The reason why we are using
useState to handle the state of the application and not normal variables is that if we have a normal variable that holds state, changing it will not cause the component to rerender. So, even though the value changes, we can't see the change. But if we use the function that we got from useState to update the state, then React knows that the state of the application is changed, and it automatically rerenders the component.
- We will learn about
useState hook in more detail in later articles.
- This type of input where the value of input is set through
value attribute and then updating of that value is handled with onChange event handler is called controlled input.
Go through official docs to learn more about handling forms in React.
What's Next
This is the last article where we learn about React Fundamentals. The next article in this series is about different hooks in React.
Until Next Time 👋
If this was helpful to you, Please Like and Share so that it reaches others as well. To get email notifications on my latest articles, please subscribe to my blog by hitting the Subscribe button at the top of the page. You can also follow me on Twitter @pbteja1998.
