React Installation

The breakthrough in technology has brought a whole new range of tool suite for developers to make the software development process more efficient. React App is among one of them! A prominent tool recommended by the React community to create single-page applications (SPAs) and also get familiar with React.

React App ensures that the development process is refined enough to let developers leverage the latest JavaScript functionalities for better experiences and optimization of the apps for production.

It is a prominent toolchain for building apps quickly and efficiently.

This blog will showcase how to create a React app from scratch.

Prerequisites to learn React

• HTML
• CSS
• Knowledge of JavaScript and ES6(let and constant, classes and Arrow functions)
• Basic Knowledge of Node and npm

React features

Virtual DOM : The most important and biggest feature introduced by React is Virtual DOM. In react, as a developer we work with Virtual DOM instead of working directly with Real DOM.

Components : : In react, every application UI is broken down into Components. Component is the most basic building block of the Application UI.

JSX : JSX stands for Javascript Syntax Extension. React uses JSX for building templates instead of regular JavaScript. It is not necessary to use it when we are working with React but JSX makes React a lot more elegant. This feature makes it much better than many other frameworks out there today.

One-way data binding : React JS follows one-way data binding or unidirectional data flow that gives better control throughout the application.

Below are the steps which you have to follow to create you react project:-

1. Download Node JS:- Download the latest setup of Node and install it.
2. You can check the node version by using below command on Command Prompt:
   node -v
3. Install React App: Start creating react app by using below command.
   npm create react-app my-app
4. All setup is done. Now run `npm run start` command to see the result on the browser.

Folder Structure:-

React project folder contains some initial files and folder which is as mentioned below.

1. node_modules – This folder contains all the npm node and react libraries and dependencies which you are going to install to support project development.
2. src – this folder going to contain main project files for code writing and content of web application.
3. src/App.css – project css file.
4. src/app.js – application component where we will write down UI rendering code.
5. src/index.js – this file contains the root node for DOM rendering and DOM renderer react libraries and app.js component will be imported here and will be placed at the root node of DOM.
6. Index.js will be the starting point of application and it will call all the initial root component which is app.js in this case and default also in basic project templates.
7. React web application will be a combination of multiple components and will form a good structured UI.