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.

But this syntax is rather complex than writing plain HTML, CSS, and Javascript. Then why we use React?? Because we can write this code using JSX, which is much more organized and less complex. It looks like HTML but it’s not HTML.

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.

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

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.

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.

Component lifecycle

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.