Introduction
If you happened to read our previous posts about React, you know a thing or two about components. You know that these are chunks of JavaScript code that can be written once and reused as needed for the application interface development. This component-oriented programming principle’s basis demonstrates advantages in large projects: their structure is notable for its order, succinctness, and readability, and such projects are easier to develop, let alone support.
However, we’ll start this post by explaining why it is important not to confuse the components and the elements when talking about React.
React components vs elements
What is a React component? A component is a JavaScript function or class while an element is what being returned after compilation of the JSX language React works with, and calling of the React.createElement method. After rendering in React this will become the very object in the DOM tree the user will see on the screen. That is, the element is created in the Virtual DOM, and during rendering, it is transferred into a standard DOM of a web application turning into a button the user can press.
Developers say the markup and logic are closely coupled in React. This means that the data on interactive interface element appearance and its changes during the work with a web application is not kept separately in different files but is stored inside the component. This is what the developers are impressed with in the React’s component approach. The JSX markup language helps them to navigate better in UI but you can write code in React without it.
Components, in the same way as the building blocks, have boundaries. You can trace them visually by looking at the future web application layout.
You can draw them visually if you look at a page of any website (no matter whether it is built on React or not — we are just giving an example now): place the page header, buttons, data collection form, etc. in a rectangle — from the developer’s perspective, the content of such rectangle will be a component, while from the user’s perspective, this will be an element the component has returned.
Components should be based on a single responsibility basis: each component must be responsible for one task. If a component does carry several tasks, it’s better to break it down into subcomponents. A complex interactive form with multiple fields and buttons will be one large component, while each field and each button will be subcomponents. If several components can be combined into one large rectangle, this rectangle will be a parent component comprising child components.
Frequently recurring or just complex functionality should be arranged in the form of components. However, components are not necessarily interactive, because React can be used to create static sites.
A component:
- can be a function or a class that receives some data and returns elements, other components, lines, and numbers;
- operates based on a life cycle;
- includes a markup;
- can change its state (has mutability);
- works with React hooks.
An element:
- is what components always return;
- is an element presented in a DOM node;
- is created and does not change (has no mutability);
- does not work with React hooks as it does not change.
React props vs state
React development includes distribution into parent and child components, or subcomponents. When writing a code, the developer has to place parent components on a higher level than child components.
JavaScript objects are transferred between the components. The objects are divided into two data types: props and state.
What is the difference between React props and state in React?
Props (abbreviation of the properties) is data transferred from a parent component to a child one.
State is data describing the interactive element state. Unlike props, the state is stored inside the components and does not change. This data type informs the component about the changes that took place in the element between renderings, which influences the interface appearance.
Props:
- pass data from one component to another;
- do not change (are immutable);
- are used only for reading.
State:
- transfers data only inside a component;
- can change (are mutable);
- are used for reading and writing.
How the component-oriented approach of the React library can help your business
- reusage of components makes it not necessary to write different code for similar features. This saves the developers’ time and your money;
- since changes in one part of the application do not cause changes in other parts, the bug location time reduces;
- with React hooks, developers no longer need to waste time rewriting functional components into class ones.
How do React Props work?
These are the basics we got to know in order to cut to the chase. Let us show by an example that the React components can be created once and later reused in different projects and for different tasks.
Let’s create a component and name it React:
class React extends React.Component {
render() {
return <h1>React</h1>;
}
}
Inside the render() method, the component name is returned. This is what we see on the screen as the React header. But first of all, it has to be rendered:
ReactDOM.render(
<React />,
document.getElementById("root")
);
We have created a React component that is still static. Now let’s make it change as we wish by adding the props:
ReactDOM.render(
<React message="is what helps to develop web apps faster" />,
document.getElementById("root")
);
In this example, the prop is called the message with the value is what helps to develop web apps faster.
And now let’s change the React component to get access in it to the prop through the this.props.message. To let the JSX understand that we want to add a JavaScript expression, we always need to screen off this.props.message with curly brackets.
class React extends React.Component {
render() {
return <h1>React {this.props.message}</h1>;
}
}
As a result, we will see the “React is what helps to develop web apps faster” header on the screen. The component we created at the beginning of these guidelines has become reusable.
How does React State work?
Now let’s see how the state data type works. While props come to the component from the outside of other components and do not change, it’s possible to change the state of the component.
First of all, let’s set the initial value for the state. To this end, we set this.state in the constructor() method, and then we call super() in the constructor:
class React extends React.Component {
constructor(){
super();
this.state = {
message: "is what helps to develop web apps faster (from state)"
};
}
render() {
return <h1>React {this.state.message}</h1>;
}
}
State is an object with the message key. At this point, what the user sees on the screen is the header with the preset value “React is what helps to develop web apps faster (from state)”.
Now let’s change the state. To do this, we create the updateMessage method, call this.setState() in it, and send the new state as the argument. We’ll get access to the updateMessage method by tying the keyword this with it.
class React extends React.Component {
constructor(){
super();
this.state = {
message: "is what helps to develop web apps faster (from state)"
};
this.updateMessage = this.updateMessage.bind(this);
}
updateMessage() {
this.setState({
message: "is what helps to develop web apps faster (from changed state)"
});
}
render() {
return <h1>React {this.state.message}</h1>;
}
}
Now let’s make it possible for the user to change the header: we’ll create a button in the render() method. The user will click on this button to run the updateMessage method.
render() {
return (
<div>
<h1>React {this.state.message}!</h1>
<button onClick={this.updateMessage}\>Hit me!</button>
</div>
)
}
onClick seems to say: “If the user clicks on the button, we’ll show the updated header”.
On the whole, the component will look like:
class React extends React.Component {
constructor(){
super();
this.state = {
message: "is what helps to develop web apps faster (from state)"
};
this.updateMessage = this.updateMessage.bind(this);
}
updateMessage() {
this.setState({
message: "is what helps to develop web-apps faster (from changed state)"
});
}
render() {
return (
<div>
<h1>React {this.state.message}</h1>
<button onClick={this.updateMessage}/>Hit me!</button>
</div>
)
}
}
What’s going on? The updateMessage method calls this.setState() which contains an addition to the header and changes the this.state.message value after a click on the button. Now the user will see the “React is what helps to develop web apps faster (from changed state)” header on the screen.
You can write and save React components yourself to use them in future projects and save time. However, community members facilitate the work for their colleagues and publish the components for free access. Here is, for instance, the React components library Material UI used, among others, by Spotify, Netflix, Amazon, and NASA.
Conclusion
Though the component-oriented approach is not new, getting acquainted with it through the React library would be exactly in the spirit of the age. Components allow developers to write the code faster and get a concise and literally consistent result if you recall the data flow from the parent to the child components down from the top. However, the effect of React in general and components, in particular, will be most visible only in complex interactive projects.
