Learning ReactJS From Scratch

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 refreshed 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 you
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 will 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.

Previously published at https://dev.to/kgprajwal/getting-started-with-reactjs-33m3