React

BY PRASHANT TOMER
What is React

o React is Java Script Framework

oUsed for front end web development
oCreated and used by Facebook
oReact allow you to create re-usable and reactive components
consisting of HTML and JavaScript (and CSS)
oFamous for implementing a virtual dom
oReact Native can be used to build mobile applications.
 Timeline of front-end JavaScript frameworks

jQuery* AngularJS React Vue Angular

(2006) (2010) (2013) (2014) (2014)

* jQuery is more often considered a library than a framework

Fundamentals of React

oJavaScript and HTML in the same file (JSX)

oEmbrace functional programming

oComponents everywhere
JavaScript and HTML in the same file

Old Approach React Approach

JSX: the React programming language

Consider this variable declaration:

const element=<h1> React is powerful</h1>
It is called JSX, and it is a syntax extension to JavaScript. We
recommend using it with React to describe what the UI should
look like. JSX may remind you of a template language, but it comes
with the full power of JavaScript.
Lets Start working on JSX
Requirements:
◦ Node JS

Microsoft Visual Studio/Code

Create a new React App:
1. Install Node JS
2. open cmd and check node js is installed or not using node --version
cont…
3. write command and enter:

npx create-react-app my-app

my-app is the name of our application
Note: (npm-node package manger)-> is a tool to install packages.
npx: node package execute-> is a tool to execute package
Now open Visual Studio

goto-
File-→ open-→ Folder, locate your project where
you have created in the previous steps and open
OR
Right click on app you created and open visual
studio
Anatomy of a React component
The component is just Inputs are passed through a a
function single argument called “Props”

The function
export default function MyComponent(props) { outputs HTML
return <div>Hello, world! My name is {props.name}</div>;
}

const html = <MyComponent name="aaron" />;

The function is executed as if Parameters are passed in

it was an HTML tag as HTML attributes
Run the First App
In visual Studio:

Go to view—>terminal and click on terminal

On terminal type the command npm start to start the project

Take reference in below screen:

Output
(see the port number of the app)
Go to App.js
function App() {

return (

<div className="App">

<h2 style={{ color: "red", backgroundColor: 'black’}}>Welcome to React Application

Development</h2>

</div>

}
Internal Style
Conditions
Looping
ArrayOfObject(Export and import
Component)
Create new JS file with Name “ArrayOfObject” and write the below code:
How to render the ArrayOfObject
File in App.js
Go to App.js File

Import the ArrayOfObjectFile:

import ArrayOfObject from './Component/ArrayOfObject’; // this file is

available inside Component folder

<ArrayOfObject /> // way to use the external file in App.js or inside any
other js file.
O/P:
 Import File in React-2(Create
Template.js)
const Template = () => {
return (
<div>
<form>
<label>Enter Id:</label><input type='text' name='name'></input>
<br />
<label>Enter Password:</label> <input type='password' name='password'></input>
<br />
<input type='submit' value='Login'></input>
<input type='submit' value='Reset'></input>
</form>
</div>
)}; export default Template

;
Go to App.js
Import the Template.js in App.js as given below

import Template from './Template’

Now in return body of App.js

<div style={mystyle}>

<br></br>

<h2>Login Form</h2>

<Template /> // this is the way to call the Template file functionality in App.js

</div>
JSX Fragments
When returning elements in JSX, you can only return one element at a time.
That element can have children, but you must ensure that you're only returning one element at a
time, or else you will get a syntax error.

React solves this by making you return a Fragment that wraps the elements that you want to
return.
So if you want to return the below HTML from a function:

<h1>Grocery delivered to your door</h1>

<h2>Free delivery</h2>

<p>Get started now!</p>

React.Fragment (original syntax)
The short syntax for React.Fragment (<> and </>) was recently introduced.
You might see code using the original syntax with React.Fragment:
Components and Props
Components let you split the UI into independent, reusable pieces,
and think about each piece in isolation. This page provides an
introduction to the idea of components.
components are like JavaScript functions. They accept arbitrary inputs (called
“props”) and return React elements describing what should appear on the
screen.
Function and Class Components

The simplest way to define a component is to write a JavaScript function:

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

This function is a valid React component because it accepts a single “props” (which
stands for properties) object argument with data and returns a React element. We call
such components “function components” because they are literally JavaScript
functions.
Multiple Components
The Component allows you to split your UI into independent, reusable pieces.

This lets you think about each piece of your UI in isolation, making it easier to debug.

A React Component is a template or a blueprint that lets you describe a section of the UI; for
example, <Footer></Footer> is a React Component that describes the footer.
Class Component:

Create a JS file named ” UseClassComponent” and write code as given below:

Now go to App.js and call the created page:

import UseClassComponent from './UseClassComponent’;

Write the below code in App function return statement:

return (

<div className="App">

<div className="ClassComponent"><UseClassComponent /></div>

</div>

);
EventHandling
Modify previous code to display
data on browser
 Introduction to state in React
State allows us to manage changing data in an application. It's defined as an object where we
define key-value pairs specifying various data we want to track in the application.

In React, all the code we write is defined inside a component.

There are mainly two ways of creating a component in React:

• class-based component
• functional component
React Hooks

Hooks are the new feature introduced in the React 16.8 version. It allows you to
use state and other React features without writing a class.
Hooks are the functions which "hook into" React state and lifecycle features
from function components. It does not work inside classes.
If you write a function component, and then you want to add some state to it,
previously you do this by converting it to a class. But, now you can do it by using
a Hook inside the existing function component.
Create new JS File “UseHook”:
Again do the same process, go to App.js file and

import UseHook from './UseHook’;

In app function return statement:

<div className='UseHook'> <UseHook /> </div>

React Component Life Cycle
You can think of these events as a component’s birth, growth, and death,
respectively.

1.Mounting (adding nodes to the DOM)

2.Updating (altering existing nodes in the DOM)

3.Unmounting (removing nodes from the DOM)

4.Error handling (verifying that your code works and is bug-free)

 Mounting
Mounting a component is like bringing a newborn baby into the world. This is the
component’s first glimpse of life. At this phase, the component, which consists of
your code and React’s internals, is then inserted into the DOM.
Updating
After the mounting phase, the React component “grows” during the updating phase. Without
updates,

the component would remain as it was when it was initially created in the DOM. As you might
imagine,

many of the components you write till need to be updated, whether via a change in state or props.

Consequently, they go through the updating phase as well.

Unmounting
The final phase is called the unmounting phase. At this stage, the component
“dies”. In React lingo, it is removed from the DOM.

There’s one more phase a React component can go through: the error handling
phase. This occurs when your code doesn’t run or there’s a bug somewhere. Think
of it like an annual physical.
Implementation
React Refs
When to Use Refs
here are a few good use cases for refs:
•Managing focus, text selection, or media playback.
•Triggering imperative animations.
•Integrating with third-party DOM libraries.
•Only use with class not with function
O/P:
REST API call to node JS
Integrate REST API with React and call the node JS, we need to add some install and add some
package in our application:
1. to send data from react to node js through REST Api, we need Axios package, so add this in your
application
npm install axios
Add in application
import Axios from axios;
2. to receive data at node js end (server side) we express js (Remember in Node Js Code)
npm install express
And import in code : const express = require('express');
const app = express();
Client Side Code (ReactJS )
ServerSide(Node JS ) ReceiveData.js
To run the client and server
We need two Terminal one for client (react app) and another one for server (node app), now open
two terminal as shown in given below figure:
Client Side Testing through Console
Server Side Verification and get
msg on client
1.Do Modification in server side code(ReceiveData.js file)

Add some code in app.post(/login, …) function:

2. Do modification in Client side app(react js file Template.js), just add the yellow color code

Axios.post("http://localhost:3001/login",

email: this.email.current.value,

password: this.password.current.value

})

.then(resp => {

alert(resp.data.message);

})
Integration of
React+Express+Node+Mongodb(Must Installed)
Call new API call for insert the data into mongodb Database(inside sendData() function )

Axios.post("http://localhost:3001/insert",

email: this.email.current.value,

password: this.password.current.value

})
Server Side Code(ReceiveData.js)