Components are small, isolated and reusable units of work that make up a piece of a user interface. Each component is independent, with emphasis in separation of concerns, having it's own business & presentation logic.
In this post, I am going to show you how to create a single component, as well as how to mutate state within that component by either passing variables, one way in the component or by changing an input value which changes the component's state.
Source code
Code outlined in this article can be found on GitHub.
Components
In the previous post, I showed you how to create a Hello World application with React. But this was just a simple example to get you started, as you getting to know React you might be getting eager to learn more of its goodies.
Such goodies are the React components. These are reusable units of work that make up the user interface. When you are designing your UI you do this unconsciously, you define small parts in the UI, which make it up as a whole. For example, think of a UI with a header, a body, a sidebar and a footer. You have 4 components here, each of them independent of the view that is composing them, each one of them can be reused in other views. The good part is that each of them is written once! Score!
React components can be defined via a function or an ES6 class. In latter case, it should derive from React.Component. Then you can pass props to a component, which is a single object property. This will contain all the input you wish to pass to the component in a form of a JavaScript object.
Components follow a naming convention, a component must always start with a capital letter. React treats components that start with lowercase letter as DOM tags.
Application
I start where I left in the previous post, so I will continue with the same setup for my React application. I am only going to add a new app.js file and modify a bit the main.js to use the App component, rather have everything defined there.
I import the App component in main.js and I use it in render method. The message string is passed in the App component by using the message custom attribute. This is passed in the props object of the component, so the props for App component will be:
This is the full code for main.js
Next up, I work out the app.js file, in which I export the App component. This is an ES6 class, and it derives from React.Component. This exposes the render method, so you must implement it in your component definitions. This method should return a valid JSX Element.
Let's dig some more into the render method. Following is its implementation, as you might see, it only returns valid JSX. I render the message in the jumbotron, then in next row is a form definition, with only one text input. After that, is another bootstrap row which uses the functional SayHi component. Take a look at the code coming up and I will take it from there to discuss its bits and pieces.
The message that is rendered in the bootstrap jumbotron, is coming from the entry point, main.js. I directly access the message property from the props object. This object is passed in the component's constructor.
Now on the input element. I would like to change the value stored in the component when changing the input's content. Remember that each component has its own state, so it makes sense to store the input's value to the component's state and change it when user enters some text into it. For this reason, I am using the state object of the component, this is inherited from the React.Component class and it's a plain object property. I store a new entry, called value and I pass it on the value attribute of the input element.
In order to change this value property on the state, I use the onChange handler, passing as callback the private onNameChange method. So now, each time user is changing the input content, this handler will update the state.value with the appropriate text.
Finally, I use a functional component to display the state.value property. SayHi is just a private function within the App component. This function takes a props object in the same fashion as the App component receives props parameter via its constructor.
You might be wondering, where is that props property coming from? Answer is via the constructor parameters, this is common for all components. I have also initialized the state object, with an object initializer and an empty value property. Lastly, I made sure to bind the onNameChange method to this class, so the this used within that method has the scope of the App class. Make sure to call super() if you are using a constructor, as this is mandatory in such case.
At the beginning of this blog, I talked about class and functional components. An example of class component is the App and of functional is the SayHi function. This function receives as well a props object, just like App component. React treats this is as standard component. It should return a valid JSX element. I return an h4 element with the value passed or a message which prompts to enter a name if nothing passed or at least not 3 characters are entered.
Last piece in the puzzle, is the callback handler for the onChange event. It only sets the state to the current text rendered in input element.
It's probably time to talk a little bit on component state. As mentioned earlier, each component holds its own state. This is called also local state for the class and it is a simple JavaScript object (it is more than that, but try to imagine this as just an object). State management in React is very important and you should treat state correctly if you want to get the best out of your React applications.
A rule that you should never forget is that you should not modify state directly, rather you should use the setState(...) method when you'd like to update a state property. The only place that you can assign values to state directly is the constructor.
This is the full code of the App component.
This is a very good step towards learning React, as you probably got the feel of what is a component and what a component can do. Unfortunately, this solution here is not scalable. My view definition contains too much markup, this can be divided further into components, which could broadcast/listen to state changes through some sort of communication mechanism.
In the next post, I am going to refactor this very simple application by separating the concerns into components and by building a communication mechanism between them so one component's state changes would affect another, independent component.
Summary
In this post you learned what a component is and how it is defined in React.
You have also learned how to create your own components, pass props to them and also mutate the component's internal state.
If you liked this blog post and found it useful, please like, share & subscribe for more! Also, if not yet a follower, follow me on Twitter!
This post is part of the Learning React series
Comments powered by Disqus.