If someone asks me to study the React offical tutorial when I have no experience with this library, then I think I will close the tab immediately…
The good way to learn a new technique is **Just Do It** So, let’s start with a small example, a form validation (not todolist)
The first pic is what we want to do today. When user click the submit and all blanks are empty, the bottom will show a warning message “Please fill all blank”; and if you fill one of the blanks and the value does not meet the required format, the respective warning message will show under the input field.
Like the official doc said, each UI unit is a component. In FormApp component, the very first we see is a render function. The render function is used to render UI on the page. It’s like when you write HTML. In the next few section, you may feel not really familiar with the syntax you write, but don’t worry.
So, now we have a basic layout of our form. We can start to do the REAL React part and I highly recommend you having a concept of object oriented programming before we jump in.
As mentioned, every part on the page is a component which is reusable, like Bootstrap, we can use botton component, navbar component, form componenet…and so on. Let’s convert our HTML to JSX, the syntax for React.
JSX
We consider each input field is a component and each radio button is also a component. So, let’s rewrite our HTML to JSX format.
Did you notice the difference between HTML and JSX? As I mentioned in the article, understanding React from official document, JSX is a syntax extension for JavaScript, it looks like that we write html in a JavaScript function. In the bracket after return, It is our HTML to descript what component looks like. Then, it is a JavaScript function, so it can pass props into it. In the input-field component, we have name, value, onChange, onBlur, label, id, htmlFor props.
Then, let’s back to the App component which is the parent of TextFormGroup.
In the App, we can render the TextFormGroup like the above code. We dont have children, so we can only write <Component name props={...} />. If a component has children, then the children should be writed in component tag, like <Component name props={...}>Children</Component>
Core concept of React
In React, The most important concept that all React beginner should keep in mind is that we always consider what State(data) looks like, instead of how control the UI because UI can be chnaged once the data is changed. In other words, the UI is made from State (data). Let me show you.
In the constructor, we have this.state and the state value can be a string, number, object, array, or even boolean. In this.state, there are given default value of these states. If your component only need to render something not have its own state, the constructor part can be omitted. Or you can choose another type called functional component, like our TextFormGroup. Remember, functional component can not have its own state, it only can receive props from another components. You may ask how I use functional component and have its state. We will discuss it in other articles.
After defining the state, we can set our state.
Type something in the input field (onChange)
What layout looks like is about your state. When we enter some value into a input field, like we type “ABC” and it shows “ABC” in the input field on the page. Is it counted as a state change? Yes. Why? Because originally, the value is empty, but after typing in, the state change to What you typed, “ABC”.
How does React know you change a state?
In the input, we use onChange event to listen for input events. So, you can see onChange={a callback function that you want to do if the input's state is changed} It's kind like when we write inline style.
Normally, if we use onChange, onClick, these event listener, we used to naming the callback function handleXXXChange.
The code before this.setState() is for data validation. this.setState() is used to set the state's value. we use destructuring assignment at the top of the block of code. const { name, value } = e.target; So, actually, it can be
Take nickname for example, we pass ‘nickname’ to e.target.name. it will become
We set the nickname state to e.target.value, and the input value is assigned to this.state.nickname. So, what you type enter into the input field.
Very important
When you define a callback function in class component, you have to bind this to your component to make this works, otherwise the Dev Tools will show Your function is undefined
Form validation
We can use state to other thing. In this example, we want to validate the data user inputs. My validation is triggered when user is typing. If the format is invalid, an error message will show up.
Conditional Rendering
Since the last question “How do you know this event” is a optional question, so we used conditional rendering to render two results by only one component.
So, you can see on the page. The first four questions have star sign, but last one doesn’t.
Conclusion
Why I use form as an example is that form is a basic unit for every thing, even making a todolist, you still need to know how to use a form. I hope this article can help you understand React and start changing your mindset of programming to “State”. State to layout, state to layout, state to layout. Then, you won’t consider how you change the UI, instead how you change the state.
Thank you for your time. See you in next post.
Happy coding!
