What is React?
React (sometimes called also ReactJs) is a library to create reusable components and build with that your web applications. Its development was leaded by Facebook development teams. Nowadays is pretty widely used around the world and there is a high demand of professionals with knowdledge and experience with the technology.
How React works?
To explain it in terms of the newly introduced
classes sugar a React component isn't anything that a
class extending the React component class with a
render method where it returns the JSX content of your component.
There are also two main rules you need to know to understand how it works.
- React will render your component each time its internal state changes. And should be only like this even you can force it.
React state is immutable. So you cannot modify it directly. You will be using the
setStatemethod each time you need to change it.
So you can define the initial state in the
class constructor method and "change it" using the
setState in any other method.
You can also pass information to a component via its properties. They will be available in your component in its props property.
React component lifecycle
Probably you want to do things but you need to figure out when you can do that.
When will be the component ready to be manipulated? How you can add functionality when the component is destroyed ? How to trick it when the component is already mounted ?This is the lifecycle of a React component and the methods you can override in your component. Each one of the methods is descriptive enough to know when it is executed, even that they are also listed in execution order.
A component is created and inserted into the DOM
The state of the component was changed
The component is removed from the DOM
An error occurred during rendering
Passing data between components
At the end, when you are building complex applications you'll need to nest components inside others and you should will use the component properties to pass information from parent elements to child components and the other way round.
How to pass data from a parent component to child component ?
That's the easy case so you'll write directly the property of the child element with the value from the parent. It could be a parent state attribute, an own property from the parent or simple literal value there.
How to pass data from a child component to the parent component ?
What if you want to pass data from child to parent? You should pass a parent method to the child in order to be called when the child component needs to update the parent.
How to pass data from a component to another?
In this case you will need to use the parent component as a bridge to pass the data from a component to another using the previous examples. As you can see, as the applications grows and the complexity is increased you can start thinking of using some system or additional library to manage the store and get it in a more structured way.