React

React is a product of Facebook. It is a very flexible and efficient Javascript library for building interactive user interfaces. React forms the view layer of the web application which is technically the frontend. This makes it easier to make web applications with essential features such as reusable components, state management, DOM rendering and many more which are explained later. React is mainly used in making single-page web applications. In this article we'll see the fundamentals of react library and why is it so popular.

Features

• Components

ReactJS makes use of components which are independent and reusable bits of code. In other words, components are functions that work in isolation and each component manage their own state. It makes building web applications very much easier when individual blocks of elements are broken down while building large scale applications.

• Virtual DOM

Every time there is any changes in the original DOM. The whole application is re-rendered onto the virtual DOM. The difference between the original and virtual DOM is checked and only this difference is updated in the original DOM. This boosts the speed of react application as the page need not be refereshed to see the changes.

• Declarative

Designing any view on React is very easy and they manage their own state. React will make sure to render just the right components onto the DOM which enables the user to easily maintain and debug the code.

• JSX

JSX stands for Javascript XML. It is a mixture of both Javascript and XML. As talked about earlier, the react is made up of components. These components have both javascript logic as well HTML/XML to render onto the screen. These component files have an extension .jsx.

• Performance

React is ridiculously fast. Its virtual DOM minimizes the re-rendering of entire DOM unnecessarily. Also, React uses one-way binding (unidirectional data flow) using a pattern called Flux. This makes the components immutable hence, giving more felexibility and efficiency.

Why React?

• Easy to learn

Compared to other libraries or frameworks out there like Angular or VueJS, React is comparably easier to learn and handle. With the basics of HTML, CSS and Javascript in place, you are ready to get started with React.

• Simplicity

React is very simple to use. It has some very powerful packages to run its engine like webpack. With some simple JSX you will have components rendering independently on your screen. React becomes such a powerful tool when used with other JS libraries such as Redux, Material-UI, Materialize, GraphQL, etc.

• Used by Developers

React is the most loved library compared to other libraries out there. React is open-source and has active contributors on its GitHub. The repository itself has over 150,000 stars and it's used by 3.8 million developers.

• React Native

React can also be used to create mobile apps. And this version of react is called React Native. This shows the power of react's flexibility to adapt. With the perfect plan and execution a developer can make an app for android, iOS and the web.

Setup

React is incredibly easy to set up in the beginning and doesn't require frequent set ups if the package has been installed globally on your system.

Make sure to install NodeJS and NPM( Node Package Manager) on your system before installing react.

To install react, run the following command:

npx create-react-app <your-app-name>

After the installation is completed, go into your app directory:

cd <your-app-name>

Run to see your default app:

npm start

Result

You see a beautiful React App running on your browser. Feel free to play around with the files in the src folder of react to make your own web or mobile app.

I hope this serves as good beginning into your journey as a React developer. For any queries feel free to contact me on my LinkedIn.

Thank You!