ReactJS Tutorial for Beginners

What is ReactJS?

React JS is one of the most popular JavaScript libraries. It is a user interface library developed and maintained by Facebook and was later used in its products like WhatsApp and Instagram. React JS is used for creating web applications. ReactJS allows us to create a reusable component.

ReactJS deals with the View component of MVC (Model-View-Controller), which is used for implementing user interfaces.

Currently, we are using the React version 16.8.

Before continue with ReactJS, you should have a strong knowledge of JavaScript, HTML5, and CSS.

Why Learn ReactJS?

The previous frameworks follow the traditional data flow, which uses the DOM (Document Object Model). DOM is an object which is created by the browser each time. It dynamically adds or removes the data at the back end and when any modifications were done, then each time a new DOM is created for the same page. This repeated creation of DOM makes unnecessary memory wastage and reduces the performance of the application.

Therefore, a new technology ReactJS library introduced which remove this drawback. ReactJS allows you to divide your entire application into various components. ReactJSuses virtual DOM instead of DOM. Virtual DOM is a more efficient way to update the view in a web application. Virtual DOM reduces unnecessary memory wastage and increases the performance of the application.

Features of ReactJS

  • React JS increases efficiency and makes maintenance easier.
  • React enhances SEO performance.
  • React ensures stable code.
  • React is used for creating a web application.
  • React uses components based approach.
  • React is easy to learn.

Advantages of ReactJS

  • ReactJS allows the developer to reuse the component.
  • Due to the reusability of the component, it is easy to develop web applications.
  • It is easy to do changes in the code.
  • ReactJS uses CSS component.
  • It requires less time for developing applications.
  • ReactJS is SEO friendly.
  • Can be used on client and server side as well as with other frameworks.
  • Uses virtual DOM, which is a JavaScript object.

Disadvantages of ReactJS

  • Manuals are difficult to understand for newcomers.
  • ReactJS has large size of libraries.
  • Convers only the view layer of the app.
  • Poor Documentation.
  • React JS uses JSX. Its syntax extension allows HTML and JavaScript mix together that’s why JSX becomes a barrier for new developers.

Difference between React, Angular JS, and Angular 2

    Technology           React       Angular JS        Angular 2
      Author Facebook Google Google
      Type Open source JS library Fully-featured MVC framework Fully-featured MVC framework
     Language  JSX JavaScript, HTML TypeScript
     Packaging Strong Weak Medium

       MVC

Yes Yes View layer only

     Binding

   Unidirectional

   2-way

      2-way

Difference between ReactJS and React Native

                        ReactJS               React Native
In ReactJS, developer can create his component as per the requirement. In ReactNative, developer can’t create the component.
ReactJS is used to create web applications. ReactNative is used to create mobile applications.
Take more time for developing the applications. Take less time for developing the applications.
ReactJS uses CSS component. React Native uses APIs. It doesn’t use CSS.
ReactJS is a JavaScript library. React Native is a JavaScript framework.

Installing ReactJS Step By Step

  • Install NodeJS and npm
  • Install React and ReactDOM
  • Install webpack
  • Install babel

How to install npm

Step1- Download npm from

https://www.nodejs.org/en/

ReactJs Installation 1

Step2: In my case, I want to download a stable version so, I go for Recommended for most users, and click on Recommended for most users.

ReactJs Installations 2

Step 3: File is started to download. It takes a few seconds to download. Now click on the next button.

ReactJs Installation 3

Step 4: click on the next button.

ReactJs Installation 4

Step 5: Click on the check button on I accept terms in the License Agreement and click on next.

ReactJs Installation 5

Step 6: Choose the path where you want to install nodejs and click on next.

ReactJs Installation 6

Step 7: Now, it will ask for features that you want. Choose the feature and click on next. In my case, I want all the features, so, I directly click the next button.

ReactJs Installation 7

Step 8: Click on the install button.

ReactJs Installation 8

Step 9: Installing the process takes a few seconds.

ReactJs Installation 9

Step 10: If installation is completed successfully, click on the finish button.

ReactJs Installtion 10

To check npm is install or not.

First, open cmd and type npm press enter.

ReactJs Installation 11

After successful installation of NodeJS, we can start installing React.

Step 1: Creating root Folder

Create a folder with name reactJS on the desktop.

After creating the folder, we need to create a package.json file. To do so open cmd and type.

“C:\Users\nikhil\Desktop\reactJS>npminit –y”

This command asks information about the module, such as the package name, description, author, etc.

ReactJs Installation 12

Step 2: install React and react dom

You can install React and react dom using command as –

“C:\Users\nikhil\Desktop\reactJS>npm install react react-dom –save”ReactJs Installation 13

Step 3: Install webpack

You can install webpack using  command as –

“C:\Users\nikhil\Desktop\reactJS>npm install webpackwebpack-dev-server webpack-cli –save”ReactJs Installation 14

Step 4: Install babel

You can install babel using command as –

“C:\Users\nikhil\Desktop\reactJS>npm install babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin –save-dev”

ReactJs Installation 15

Step:5 Create the Files

To complete the installation, we need to create some files, i.e. index.html, App.js, main.js, webpack.config.js, and, .babelrc.

Webpack.config.js

Open the package.json and delete “test” “echo \”Error: no test specified\” && exit 1″ inside “scripts” object. We are deleting this line since we will not do any testing in this tutorial. Let’s add the start and buildcommands instead.

“start”: “webpack-dev-server –mode development –open –hot”,

“build”: “webpack –mode production”ReactJs Installation 17

Index.html

This is just regular HTML. We are setting div id = “app” as a root element for our web application and adding index_bundle.js script, which is our bundled application file.

 App.jsx and main.js

This is the first React component. This component will render Hello World.

Main.js

After completing the installation process, you can start the server by running the following command-

“C:\Users\nikhil\Desktop\reactJS>npm start”

ReactJs Installation 21