Introduction to React
read in this article about
When using React, your pages will not reload and only the necessary parts will be re-rendered. It happens because React has a sophisticated algorithm that is sensitive to changes in the components’ state and immediately replicates that in the screen. To reduce the complex procedure of comparing each state attributes, React uses the concept of immutability.
The following topics in this article will discuss those features and other key points that makes React so efficient.
In React, each element should be a component or be part of one. It allows the developer to split the user interface into small reusable pieces and treat them in isolation. The following image is an example of how to structure an employee list in components:
There are two types of components:
- Function component:
- Class component:
Regarding class components, they require the React.Component extension and the implementation of a method called render, which returns what the component will display. Consequently, class components have more features, where they can alter their state and use Lifecycle Hooks.
The Lifecycle Hooks are very useful functions that are called in certain phases of the component ’s life cycle. The most used are the following:
- constructor: it is called when the component is initialized. In this phase, It did not render anything yet.
- componentDidMount: it is called when the component is rendered to the DOM for the first time.
- componentWillUnmount: it is called when the component is removed from the screen (destroyed).
- render: it is called everything the component's state change.
State and props (abbreviation of properties) are responsible to hold variables. The state contains the variables of the component and should be initially declared in the constructor. The following image illustrates the initialization of a state containing one variable called “date”.
You can use the “this.state.variableName” to access defined variables. In the previous example is displaying the formatted current date in the <h2> tag.
To change the value of the state, it is mandatory to use the setState method. The following example is setting a new state inside a method called tick.
It will create an entirely new state, so it is necessary to specify the variables that you want to keep and their values. To know more about how the setState method works, check this link. When React notice that the value of the variable changed, it will call the render() method and it will display the new value in the screen.
Now, to pass information to another component, we need to use the concept of parent and child relationship. When inside a component we call another component, the current component is the parent and the called component is the child. For example, if we take a look at the structure of the Employee List, the EmployeeList component is the parent and the EmployeeListItem is the child in this relationship. A component can have one parent and many child components.
Consequently, the parent component calls a component, specifying the name and value of the variables that will be available inside the child. The following example illustrates a Board component calling a Square component and defining the variable “value”.
Now, to use the variable inside the Square component (child) we need to use the props, which holds the variables passed to it by the parent component. The code below demonstrates the Square component using the “value” variable.
So, it is necessary to use “this.props.propertyName” to access the passed properties at the child component. The Square component can also have other child components and the way to pass information to them is the same.
Furthermore, JSX provides protection against injection attacks, by escaping any value before rendering it. The escaping technique replaces all characters of the given input using a specific scheme, allowing only the programs that knows the scheme to interpret the data. The following code demonstrates that is safe to use given information.
In the software web development world, DOM stands for Document Object Model and represents the structure of the elements in a web page. The HTML DOM is constructed as a tree of objects.
- Efficiency: It is faster to update the Virtual-DOM instead of the real DOM.
Immutability in software development means that a variable can not change its value or state. So, to modify an attribute in a state, it is necessary to replace the state with a new version containing the desired change. As a result, React does not need to implement a complex algorithm to know exactly what changed, it only requires a simple equality operation between the old and new object to see if they are different. This is a very optimized technique because it is not mandatory to verify each attribute of the object. Therefore, it is possible to store different states and compare them.
This approach is very useful when you want to keep track of different phases of a game and load one of them. For example, on each move in a Tic Tac Toe game, we can save the state of the game’s board and restore that state when necessary. These image illustrates a Tic Tac Toe React application with buttons to load previous moves.