React Js Tutorial for beginner

What is React Js?

React JS is a JavaScript library to build attractive user friendly Ui.

Prerequisite for ReactJS?

-        Basic knowledge on ES6

-        Basic knowledge on html, css, js

-        Basic knowledge on npm

Tools required

-        Vs code (And its free extensions like Babel JavaScript)

React Installation

-        Install Node.js and npm

-        Install Visual code editor

-        Install React from Terminal, for this open cmd as an administrative role

And then hit the following commands one by one.

a)      Npm install -g create-react-app   (This command will install react at global level and will be accessible to any project at any location in the installed machine.)

b)      Create-react-app –version (this command will be useful to check and verify React Js version.)

c)      Create-react-app <projectname> (This command will create a new project in the current pointed directory.)

Now open the project folder using Visual code, you will see the following folder structure under the root/Project folder.

1) Node Modules:-  It will contain all required modules.

2) Package.json: - It will contain project information in JSON format.

3) Public folder:-  It will contain an index.html file. (Note:- please delete all other files from this folder.)

4) Src folder:-  It will contain index.js and index.css file (Note:- please delete all other files from this folder. And delete code from index.js and index.css files, those files should be blank.)

Note:- Please delete all other files and folder which are not mentioned in the doc. Because we are going to learn React from scratch.

Practical’s:-

1)     Hello world Program:-

Now once you have done above all steps, we are going to learn about index.js.

Please delete pre-written code from index.js and replace with it the following code,

// Ths is ES6 Javascript syntax used by babel to compile

import React from "react";

import ReactDOM from "react-dom";

ReactDOM.render(<h1> Hellow world!! </h1> , document.getElementById("root"));

And now from the command prompt execute the “npm start” command.

It will open the browser with port 3000 and will display “Hello world!!”.

In the above code, users are using ES6 syntax.

Import is the keyword that will command to import dependency module from Node_Module folder. For confirmation, you can check to react and react-dom is present under the Node_Module folder.

ReactDOM.render(<h1> Hellow world!! </h1> , document.getElementById("root"));

This line will help to render and parse code to the browser. Render is a method that basically takes three parameters as follows,

i)                 What to show=> This will be a JSX Extension/Expression/XML which looks like Html tag element but Babel which is works as a compiler for ES6 considers JSX.

ii)                Where to show => Here we have to bind the JSX with the root element.

iii)              Callback function which is optional by default.

To check how React and ReactDOM work please copy-paste the above working code in the online Babel compile and run it you will get compiled and parsed simple JavaScript code as below. For reference, I am providing you Babel online compiler try it link, https://babeljs.io/

// This part is converted by Babel from ES6

var _react = _interopRequireDefault(require("react"));

var _reactDom = _interopRequireDefault(require("react-dom"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

_reactDom.default.render( react.default.createElement("h1", null, " Hellow world!! "), document.getElementById("root"));

If you don’t wish to use above code and want to do in simple JavaScript then it will be as follow,

// This simple Javascript code which will work same.

var h1=document.createElement("h1");

h1.innerHTML="Hello World!!!";

document.getElementById("root").appendChild(h1);

And now referesh page it will work as earlier.

2)     How to display multiple elements (JSX allow only a single element):-

Hint: we need to wrap multiple elements into a single tag or array or we can use React.Fragment concept.

There are 3 approaches,

i)Using div Tag :-

import React from "react";

import ReactDOM from "react-dom";

ReactDOM.render(<div><h1> Hellow world!! </h1><h2> Using Div container to disply elemnts</h2></div>  , document.getElementById("root"));

ii)Using Array of elements:-

import React from "react";

import ReactDOM from "react-dom";

//ReactDOM.render([<h1> Hellow world!! </h1> ,<h2> Using array to disply elemnts</h2>]  , document.getElementById("root"));

In the above 2 approaches, we have one extra tag which div and might cause unnecessary problems for implementing CSS. So to resolve this issue we move towards 3rd and best-recommended approach.

iii)React.Fragment :-

import React from "react";

import ReactDOM from "react-dom";

ReactDOM.render(<React.Fragment><h1> Hellow world!!</h1><h2>UsingReact.Fragment container to disply elemnts</h2></React.Fragment>, document.getElementById("root"));

To simplify the above example, React provides a sugar coat for React.Fragment , the example is as follows,

ReactDOM.render(<><h1> Hellow world!! </h1><h2> Using Sugar coat of React.Fragment  container to disply elemnts</h2></> , document.getElementById("root"));

3)JSX Challenge :-

Assignment :-

// JSX Challenge to create React app with following condition.

// 1) Create a react app from scratch

// 2) Add one h1 tag

// 3) Add one p tag

// 4) Add list of your fav movies at least five 

Solution:-

import React from "react";

import ReactDOM from "react-dom";

ReactDOM.render(<>

<h1> This is JSX Chanllange. </h1><p> Following is the list of my fav movies.</p>

<li>Trancendence</li>

<li>Chappi</li>

<li>Ironman</li>

<li>Interstellar</li>

<li>The man who knows Infinity</li>

</> , document.getElementById("root"));