React JS

What is ReactJS?
In ReactJS, JS stands for JavaScript. ReactJS is a library of JavaScript.
It is helped to create UI(frontend).
It is an open source language.
It was developed and managed Facebook. Facebook is also developed on
ReactJS. And all its apps like Instagram, messenger are also developed on
ReactJS.

Features of ReactJS:
1. JSX: It is a combination of JavaScript and HTML. React don’t know
HTML. React knows the JSX.
2. Components: The containers in the web page are known as
components. A web-page is made of multiple components. If we
change any component in web page, then it will only render only that
component.
3. One-way data binding: The data is transfer from Source to
destination. It is one way data binding.
4. Virtual DOM: There are 2 types of DOM, i.e., Virtual DOM & Actual
DOM. In actual DOM, we used methods like
document.getElementById(“id”). When actual DOM is runs in browser,
it creates Virtual DOM. Virtual DOM is render the particular element
which we want to change.
5. Simplicity: The learning phase is very in ReactJS. It is simple to
understand and work.
6. Performance: As reactJS is a lightweight library.
 ReactJS Environment Setup
Steps to follow:
Step1: Download Node JS and npm.
 Search on google nodejs download
 Click on site nodejs.org/en/download/
 Then download the latest version.
 Install the nodejs as of other applications.
Step2: To check nodejs is properly or not
 Click on start and search cmd
 Simply type node –v
 Then it will show nodejs version
 And then for npm simply type npm –v
 Then it will show node package manager version

Step3: Install any text editor (visual studio code/ sublime text)

Step4: Using nodejs install the create-node-app package

 Click on start and search cmd
 Simply type npm install –g create-react-app
 To check version, type create-react-app –version

Step5: Create the app using create-react-app command

 Create a new folder & name it. E.g., react
 Open the folder and in folder name section type cmd and hit enter
 In command prompt, type create-react-app myapp (you can type any
name to app)
 After last when it is shown Happy hacking, it means that app is
created properly.

By following above steps our react app is created.

 Directory Structure of React App
Primarily we used three files in the folder which create
App.js, index.js, and index.css
Index.js file do all the rendering process which collect data and components
from different files and transfer it to html page i.e., index.html page.
App.js is a component. We can call it multiple times.
All the changes which we done in app.js
To run the app have to run program in new terminal npm start
Then it will run our app.
For example,
In app.js remove all the logo and text and just add under <header>,
<h1>I am Tushar</h1> & save it

Then in app.css file, remove all the existing classes, simply add following
class.
All the files are imported in index.js file.
The tag named as <App /> in index.js file
This is component. Multiple times will call it, it will print again & again.
 The workflow of React App
In this part will know the exact the workflow of react app
The out which is show in the browser which will write in app.js file.
This is one of the component.
Component is a piece of code which can we run/use in repeated action.
In index.js file our component is imported.
All the work is done in import and export manner.
Import & export are advanced javascript keywords.
Simply remove all the classes in app.js file. Then you will see the output as
follow:
Now give new class name to <div> section

And add some css in App.css file

Then you will see the output as follows:

The code which we write in app.js file is a JSX code which is combination of
JavaScript and HTML.
JSX render only one parent tag & we can add multiple children in it.
In JSX, one parent tag is compulsory like in above example <div> is a
parent tag.
All the code we have to write in the <div> tag.
If we try to create another <div> then it will show the error in the terminal.

Now export the app.js component in index.js file.

In react DOM, one method called render.
In rendering, we have to tell which file have to render and where it should
have to render.
In the above code, we can see that <App /> is the file which is the
component we have to render.
And document.getElementById(‘root’) is the location where we have to
render the file.
Root is in the index.html file in the public folder.
All the changes are render in the index.html file.

App.js is a component.
App.css is component which we export to App.js
App.js is export to index.js
In index.js, by using dom rendering method, we call it to index.html page.
 React Components
What are react components?
 Components are independent and reusable bits of code.
 Components are JavaScript files.
 They serve the same purpose as JavaScript functions.
 But it works in isolation and returns HTML via render function.

Header

Upper Side
Menu
Middle Article

lower Side
Menu
Footer

Types of Components?
1. Class Based: This components are ES6 class based components.
2. Functional Based: This components are based on JavaScript functions.
Class based component:
 Class based component is ES6 class.
 We managed states in it.
 State is a private object is accessible in the class in which we store
data throughout the execution.
 It can received props / arguments which returns JSX

Let’s create a class based component:

 Create a new folder in src named as Components
 Create a new component named as Person.js. It is a class based
component.
 In that component Person.js write the following code.

 In App.js write the following code:

 Following points to note down:

 o When we create class based component, we have to import react
and component.
o We give the same name of the file and component. E.g., Person
o In render, we have to return our method
o In return we have to mention all the JSX.
o Then in import, we have to import that Person from file.
o Then we have to give same from which name we import the file.

Functional Based Component:

 As we create, functions in JavaScript same we create function in this.
 This optionally receives props and returns JSX.

Let’s create a functional component

 Create file named as Man.js
 Then import react
 In this we don’t need to import Component because functional
component doesn’t inherit with anyone.
 Then write functional code as following

 Then import Man.js in Person.js

  After open file in new terminal will get the output.
 By default the file App.js is also a functional component.
 We can directly call the Man.js file in App.js file also.

In default export we can export it by any name.

If we want to export the component by same name

So we can export it directly by using arrow function.

But for this, App.js we have to import Man.js in curly bracket.
 Introduction to JSX
 Extension to JavaScript language syntax.
 JSX = JavaScript and XML
 JSX also contain all the HTML like attributes.
 JSX is easy for debugging the code.
 It is not necessary to write JSX to render HTML tags.
 React.createElement() method can be used in place.
Syntax: React.createElement(
“parent node”
optional properties,
“child node”
);
What is “Props”?
 React is a component-based library which divides the UI into little
reusable pieces.
 In some cases, those components need to communicate (send data to
each other) and the way to pass data between components is using
props.
 “Props” is a special keyword in React, which stands for properties and
is being used for passing data from one component to other.
 But the important part here is that data with props are being passes
data uni-directional flow. (one way from parent to child)

Example:
Let pass props in App.js
Person.js is a child of App.js
To pass props from parent, we have to create user defined attribute.
e.g., name=”John” in App.js

Let’s used this props in Person.js

The main motive of props to transfer data from parents to child.
The above example is for class based component.
Now let’s see how it is work in functional component.
In Man.js

In App.js
 What is State in React JS & How to use it?
 State is a built-in object of the React Components.
 The state object is used to store all the data that belongs to that
particular component only.
 The state is only accessible inside the component it belongs to.
 State is mutable, it can be changed as per need.
 Whenever the state object changes the component is re-rendered.
 To use state inside a class component “this.state” is used.
 To use state inside a functional component “useState” is used.

Example:
Let’s create state in class component Person.js

Now in App.js file,

Event handling in ReactJS
 How to add CSS in ReactJS
 Create a new folder named as Person
 In that folder, create file named as Person.js & Person.css
In Person.js File;

In Person.css File;
In App.js File
How to give inline CSS?
 Handling the Form Inputs
 Create a file named as Form.js in Components folder.
 Import this file to App.js
 Now simply create a form in Form.js

 After creating form, now we are giving one event onKeyUp

 For this event, we are creating one function
 Now, we can see whatever we type in input field will show in console
log.
 Now we create a event on submit button.
 For that we have to following code.
 Now we can see the output in console log.
 Converting HTML/BS website to React
 Open your HTML based project folder and copy everything which you
need for your website.
 Like BS pages, CSS pages, JS pages & other pages and paste it inside
the public folder.
 Create a New folder inside the public folder under the React project
folder.
 Copy all the link and paste it inside the index.html file inside public
folder.
 Create a new file named as NavBar.js in the Components folder.
 Copy all the navbar code and paste it in the div section.
 Import that NavBar.js file in the App.js file.
NavBar.js
App.js File

Index.html file

In this way we can create multiple components like About.js, Footer.js

About.js File

Footer.js File

Index.html file
App.js File
 React Router Package (Setup & use)
 Search on google react router
 Click on link www.reactrouter.com
