Getting Started with React…📖

What is React?

React is a JavaScript library and its main focus is to build user interfaces. Many people mistake it as a framework but it’s not a framework, it’s a library and we can use other libraries with React to make a solution. That’s what makes react unique and more favorable. We just have to tell React that what we want on the UI and react will build that for us. React introduced us to the idea of virtual dom, which reconciles the actual dom.

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

JXS means Javascript XML.Its the syntactic sugar of React.createElement(component ,props,…children).React code can be written into plain Javascript like this.

It’s just Javascript

React has very small libraries to learn from then it depends on javascript skills. because react it mostly pure javascript. Whatever you can do with react is pure javascript.

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.

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

In plain JavaScript the application we are supposed to right HTML CSS and javascript in different files because they have different functionalities. But in React we can write all three of them in the same place. Because in react one component serves only one purpose. So it is wise and less complicated to keep it than in different places.

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.

State

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.

Component lifecycle

Each React component has a lifecycle. Component lifecycle has three phases: