Getting Started with React…📖
What is React?
React is a library
Frameworks have certain rules and regulations comparing to libraries. When you are working with a framework you have to follow some predefined rules given by that framework. And frameworks are not much flexible as well. Libraries are much more flexible. You can use it in your way, you can use it even with other libraries as well. React is also a library that is often mistaken as a framework.
It uses JSX
React is declarative
We have to declare what we want to do with User Interface and react will do that for us, we don’t have to tell it how to do it.
In the given example, we have mapped an array and told react to make a list for each element but React will determine how to do it.
Virtual DOM and Diffing algorithm
DOM means document object mode which is the tree-like structure of the webpage elements. When any part of that webpage is changed, the whole DOM is re-rendered and re-painted. It’s a time-consuming process. React introduced us with virtual DOM, it is exactly what it sounds like, a virtually rendered DOM. React keeps a copy of the DOM, and when a change happens, it compares the previous dom with the new DOM. It finds out where the change has been made and only changes that part of the DOM. It’s called Diffing algorithm.
Separate components for separate concerns
Downward Data flow
In React Data flows from parent to child. It is passed using props. And the child component catches these passed data from the props object.
Upward event flow
One way to send data from a child component to its parent component is through events. Events can also be passed through props, when an event is triggered in the child component, it also triggers up in the parent component. The parent component then saves the data in its state and passes it down to a different component.
We are not always going to work with static components, Most of the time we are going to encounter stateful components. It means the components which have changed state. We will then need built-in useState function to keep track of the state of that component.
In the example above, this example component has a state called count. It has an initial state of 0. When the button is clicked the function setCount is triggered and the state of the component is changed.
Each React component has a lifecycle. Component lifecycle has three phases:
Mounting: It means rendering the elements in the DOM.When mounting a component some built-in functions can be called ie. componentDidMount() , render(), constructor().
Updating: A component can be updated after its mounting . When a component’s dtate or prop is changed it is updated.It has some built-in functions like shouldComponentUpdate(), componentDidUpdate() etc.
Unmounting: It means when a component is removed from the DOM. It has only one built-in function, which is componentWillUnmount().
A component lifecycle can be monitored and manipulated through these phases.