What is ReactJS and How to install


Developed by Facebook, contributing to the open source world, React.js is a library for creating faceplate components with JavaScript. Shan is popular in the market.

With this article, we intend to log in to React.js library.Before telling you, I would like to point out that we should not mix React.js with React Native. React Native is for mobile application development.

React.js source files can be found in the Github  repository.

What does “React” ?

React uses the observer desing pattern. At this point, you do not need to manage your state changes. React creates the UI by detecting state changes. At this point, the question might come to mind: If every change results in the rebuilding of DOM objects, will not this cause performance loss? The answer to this question is no because React uses a virtual DOM mechanism called Virtual DOM.

What is Virtual DOM?

As its name suggests, Virtual DOM is a virtual DOM object that corresponds to the actual DOM, that is, it is a copy of the rendered DOM. React reflects the state change to the Virtual DOM instead of completely re-creating the actual DOM that is rendered in each state change. It detects the differences between the real DOM and the new virtual DOM, calculates the changes to be made in the real DOM, and re-renders the elements that change only in the real DOM in one go. In this way, whenever the state changes, the cost of rebuilding the main DOM with all elements is avoided and maximum performance improvement is ensured. When the actual DOM is rendered, it is equal to the virtual DOM. When a change occurs in the Virtual DOM, only the changes are reflected in the actual DOM, and both DOMs are equalized again. In the graphic below, this loop is tried to be explained.

Where do we start?

It is very easy to start coding with React, especially with ready-made project frames. The most popular React’s offer is the create-react-app.

To use the ready-made skeleton, you need to have NodeJS and NPM in your computer installed. You should see similar output when you run the following commands in the terminal or on the command line.(if node js is not installed you can access it from this post)

Assuming everything is ready, we can create a new project by running the following commands at the command line or in the terminal. Note that my-app is the project name.

Project started successfully 🙂

As you write on the screen,To get started, edit src/App.js and save to reload.

 

Good luck with 🙂

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *