React JS

 Front-end library used for developing code to create GUI for web
application
 Created by Jordan Walke, a software engineer at Facebook
 Open sourced to the world by Facebook and Instagram.

Why React JS?

 Creating web apps that handles huge amount of data
 Creating Single page web Application
 Creating reusable GUI component

 Code to be written for manipulating DOM tree after user clicking

the like button and re-render the web page in a browser
 Above activity should be reflected in other users too.

 Considering the application size of Facebook which has more than

1.6 billion daily users and 500,000 “likes” every minutes, this was a
challenge to the engineers of Facebook.

Single Page Application

 A single-page application is an app that works inside a browser and
does not require page reloading during use.
 You are using this type of applications every day. These are, for
instance: Gmail, Google Maps, Facebook or GitHub.

Key Features

 Component-based: Components are the smallest unit in a React

application. Anything that we want to render is rendered through
components. Components help in maintainability and  reusability.
 Virtual DOM: React uses virtual DOM concept for DOM
manipulation which improves the performance of the application
 Unidirectional data flow:  React’s one-way data flow (also
called one-way binding) keeps everything modular and fast and
easy for debugging.
 JSX syntax: React used JSX syntax which is similar to XML and
HTML syntax which makes it easy for writing markup and binding
events in components 
- JSX stands for JavaScript XML. JSX allows us to write
HTML in React.
- JSX makes it easier to write and add HTML in React

Difference Between Angular JS and React JS

React Angular
React is a small view library Angular is a full framework
React covers only the
Angular provides the complete solution
rendering and event handling
for front-end development
part
Presentation code in Presentation code in HTML embedded
JavaScript powered by JSX with JavaScript expressions
React's core size is smaller Angular being a framework contains a lot
than Angular, so bit fast of code, resulting in longer load time
React is very flexible Angular has less flexibility
Great performer, since it uses Angular uses actual DOM which affects its
Virtual DOM performance
React JS Installation
 Need create-react-app tool. This is available as part of Node js
 Install Node Js using the following link

https://nodejs.org/en/download/
 After installation, go to the terminal of visual code and type the
following command
 node –v
 npx create-react-app my-app

Or
D:\>npm install -g create-react-app
D:\>create-react-app my-app

The above command creates a project my-app with the below folder structure:

The description of folder structure is

Files Purpose
All the node module dependencies are created in this
node_modules
folder (babel)
This folder contains the public static assets of the
public
application
public/index.html First page that is rendered on the browser
All application related files/folders are created in this
src
folder
src/index.js Entry point of the application
package.json Contains the dependencies of the React application

D:/>my-app>npm start

After successful compilation, application will be loaded in the browser at

the port "http://localhost:3000" as shown below

Why Components?
We have the following challenges in developing this application:

1. Entire page will get re-rendered even when a section of the page (eg.
feedback section) undergoes changes

2. We will have to re-write code for each item even though they have similar
behavior

3. We will have to take additional care to make sure that the functionality of

one part of the application do not interfere with another part

If we implement the above wireframe by dividing

them into components - encapsulating its own data
and presentation logic then we can achieve
modularity and re-usability.

What is React Component?

 Whenever any updates happens in the application, the virtual DOM
gets modified. React computes the difference between the
previous virtual tree and the current virtual tree
 Based on these differences React will figure out how to make
updates to the actual DOM efficiently
 React does all the computations in its abstracted DOM and
updates the DOM tree accordingly
 Virtual DOM enhances performance and efficiency by minimizing
expensive updates in the actual DOM

Creating a Component

App.js

import React from 'react';   

class App extends React.Component {
render() {
return <h1>Hello</h1>
}
}
export default App;

index.js

import React from 'react';

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App/>, document.getElementById('root'));
Why JSX?
Let us understand the need of JSX by taking the below example:

class App extends React.Component{

render(){
return (
React.createElement('form', {}, “MyForm”);
React.createElement("h1", {}, "Login"),
React.createElement('input', {type:
'text',placeholder:'Name', value: '',}),
React.createElement('br', {}),React.createElement('br',
{}),
React.createElement('input', {type: 'password',
placeholder: 'password',
value: '',}),
React.createElement('br', {}), React.createElement('br',
{}),
React.createElement('button', {type: 'submit'}, "Login"))
)
}
};

export default App;

Let us see how to write the same above Login component using JSX in a
easier way:
class App extends React.Component{
render(){
return (<form><h2>Login</h2>
<input type="text" placeholder="Name" /><br/><br/>
<input type="password" placeholder="password" />
<br/><br/>
<input type="submit" value="log" />
</form>);
}
};
export default App;
JSX is a special syntax introduced in ReactJS to write elements
of components. It is syntactically identical to HTML and hence it can
be easily read and written. Code written using JSX helps in visualizing
the DOM structure easily.
class App extends React.Component {
render() {
return <h1> Hello World </h1>
}
}
export default App;

As the browser does not understand JSX code, this gets converted to JavaScript using the
plugins of the babel.

Conversion of JSX to JavaScript happens as shown below:

<React.Fragment>
React Fragments allow you to wrap or group multiple elements
without adding an extra node to the DOM. This can be useful when
rendering multiple child elements/components in a single parent
component.

React.Fragment is almost always the better choice to reduce the

overall DOM size.
class App extends React.Component {
render(){
return <React.Fragment>
<h3>ReactJS:</h3>
<img src="./image/react.PNG" width="120"
height="120"/>
<p> React is a JavaScript library for creating User
Interfaces.</p>
</React.Fragment>

}
}

Javascript Expression in JSX

We discussed how to use JSX to create React elements, we may also

require to use JavaScript expressions in React elements, so let's see
how to write JavaScript expressions in JSX.

{}

 
JavaScript expressions to be evaluated should be wrapped within curly
braces as follows:

<h1> { Expression to be evaluated } </h1>

Accessing a variable:

We can access the value of any variable within curly braces as shown
below:
class App extends React.Component {
render() {
let count = 5
return(<React.Fragment>
<h1>{count}</h1>
<h2>{count*count}</h2>
</React.Fragment>)
}}
Arithmetic operators can also be used as shown above
Accessing an object: 

The properties of an object can be accessed as shown below:

class App extends React.Component {

render() {
let name = {
firstName: 'Kavya',
lastName: 'Ramakrishna'
}
return(<React.Fragment>
<h1>{name.firstName} {name.lastName}</h1>
</React.Fragment>)
}
}

Specifying attributes' expression: 

We can provide dynamic values to attributes as shown below:

class App extends React.Component {

render() {
let highlight = {
color: 'green',backgroundColor:'grey'
}
return(<React.Fragment>
<h1 style={highlight}>Welcome to React</h1>
</React.Fragment>)
}
}
export default App;
 Create a component to display an algebraic expression as follows:

import React from 'react';

class App extends React.Component {
render() {
var x=25, y=30
return (<div>
<h2> Evaluating expression </h2>
<h3> {x} {">"}{y} {":"} {x>y ? 'True' : 'False'} </h3>
  </div>)
}
}
export default App;

Conditional Rendering

class App extends React.Component {

render() {
let element = null;
let isLoggedIn = false
if(isLoggedIn) {
element = <h2>Welcome Admin</h2>
}
else {
element = <h2>Please Login</h2>
}
return (<React.Fragment>
{element}
</React.Fragment>)
}
}
export default App;

Using a Ternary operator

class App extends React.Component {
render() {
var employees = [
{ empId: 1234, name: 'John', designation:'SE' },
{ empId: 4567, name: 'Tom', designation:'SSE'},
{ empId: 8910, name: 'Kevin',designation:'TA'}
]

return (<React.Fragment>
<table style={{width:'60%'}} className='table'>
<thead className="thead-light">
<tr>
<th>EmpID</th>
<th>Name</th>
<th>Designation</th>
</tr>
</thead>
<tbody>
{employees.map(employee => {
return (<tr>
<td>{employee.empId}</td>
<td>{employee.name}</td>
<td>{employee.designation}</td>
</tr>)
})
}
</tbody>
</table>
</React.Fragment>)
}
}
export default App;
Error
<tbody>
{ employees.map(employee => {
return (<tr key={employee.empId}>
<td>{employee.empId}</td>
<td>{employee.name}</td>
<td>{employee.designation}</td>
</tr>)
})
}
</tbody>

Another Example
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
class App extends React.Component {
render() {
var employees = [
{ empId: 1234, name: 'Jack', designation:'SE', salary:23000},
{ empId: 4567, name: 'Johnson', designation:'SSE',
salary:15000},
{ empId: 8910, name: 'Sachin',designation:'TA', salary:30000}
]
return (<React.Fragment>
<table style={{width:'60%'}} className='table'>
<thead className="thead-light">
<tr>
<th>EmpID</th>
<th>Name</th>
<th>Designation</th>
</tr>
</thead>
<tbody>
{employees.map(employee => {
return employee.salary > 15000 ? (<tr
key={employee.empId}>
<td>{employee.empId}</td>
<td>{employee.name}</td>
<td>{employee.designation}</td>
</tr>) : null
})
}
</tbody>
</table>
</React.Fragment>)
}
}
export default App;

Styling the Component

Inline Style Components

In React, components will have inline styles and it should be specified

as an object as shown below

<h1 style={{color:'green'}}>Welcome to React</h1>

When we have CSS properties with multiple words like background-

color, font--family etc, in React, those properties should be camelCased
by removing hypen as shown below.

<h1 style={{color:'green',fontFamily:'verdana'}}>Welcome to React</h1>

External Style Components

1. Go to the public folder in React Project Folder

2. Edit the App.css
3. Define the CSS rules

.button {
background-color:blue;
color:white;
border-radius:10px;
width:100px;
height:30px;
}

4. Class attribute should be named as “className”

import './App.css';
<button className="button">Submit</button>

Style the component using Bootstrap

npm install bootstrap

import the bootstrap CSS file within the AppComp component and
apply the bootstrap btn btn-success class to the button as shown below

import 'bootstrap/dist/css/bootstrap.min.css';
<button className="btn btn-success">Submit</button>

If you are using the js file of Bootstrap then import the bootstrap js file
but before that install jQuery, as the bootstrap JavaScript depends on
jQuery
What is State?

The state is an initial value set for a component, which is used for
interactivity.

Let's see how to set the state of a component.

Using constructor, the state of a component is created and initialized

using this.state as follows:

Syntax:

constructor() {

super();

this.state = { counter: 1 };

In the above code, the state 'counter' is set to 1 and 'counter' would be accessed
as this.state.counter.

As the user-defined component extends React.Component, it becomes a child

component of it. Hence, whenever a child component has a constructor, it has to call
the parent class's constructor using the super() method. And super() method should
be the first statement within a constructor.

import React from 'react'

class Timer extends React.Component {

    constructor() {
        super ()
        this.state = {
            counter: 0
        }

        this.handleClick=this.handleClick.bind(this)
    }
    handleClick(e){
        this.setState({counter:this.state.counter+1})
    }
    render() {
        return(<React.Fragment>
            <h2> Seconds Elapsed: {this.state.counter} </h2>
            <button onClick = {this.handleClick}> Increment Counter </button>
            </React.Fragment>)
    }
}
export default Timer;

Calling a setState is Asynchronous

class App extends React.Component {

constructor() {
super()
this.state = {
quantity: 0,
price:0
}
}
update = () => {
this.setState({quantity:5})
if(this.state.quantity == 5) {
this.setState({price:2000-100})
}
}
render() {
return(<React.Fragment>
<h1>{this.state.quantity}</h1>
<h1>{this.state.price}</h1>
<button onClick={this.update}>Update</button>
</React.Fragment>)}

To handle Asynchronous, a Call back function is introduced

update = () => {
this.setState({quantity:5},()=>{
if(this.state.quantity == 5) {
this.setState({price:2000-100})
}
})
}

Key points to be remembered while handling data in a component:

 States are mutable and only used on top level component

 They are reserved only for interactivity and component's event
handlers may change to trigger a UI update
 The state will be set with a default value when component mounts
and will mutate in time based on user events generated
 
Props

When we want to pass any data from one component to another

component, it is passed as a prop.

 Props allow us to pass data from one component to another

component
 Props are immutable - a component cannot change its props
however it is responsible for putting together
 Props can be accessed as this.props

How to use props?

Let's now learn how to pass data to a component:

    <App initial = {10} />

Here, we are passing a property 'initial' with a value '10', to a

component App.

In the component App, this property would be accessed

as this.props.initial

Passing a values to Class Component

import React from 'react'

class Pass extends React.Component
{
    render()
    {
            return(
                <div>

                    <h1> Accessing Props</h1>

                    <h2> {this.props.name}</h2>
                    {
                        console.log(this.props.name)
                    }

                </div>

            )

    }

export default Pass;

<Pass name="Sona College fo technology"/>

Passing Props to functional component

<Pass2 name="V.Mohanraj"/>

function Pass2(props)
{

    return(

            <h1> {props.name}</h1>
    )
}
export default Pass2;

Parent component to child component

import React from 'react';

import ReactDOM from 'react-dom';

// Parent Component
class Parent extends React.Component{
render(){
return(
<div>
<h2>You are inside Parent
Component</h2>
<Child name="User" userId =
"5555"/>
</div>
);
}
}

// Child Component
class Child extends React.Component{
render(){
console.log(this.props);
return(
<div>
<h2>Hello,
{this.props.name}</h2>
<h3>You are inside Child
Component</h3>
<h3>Your user id is:
{this.props.userId}</h3>
</div>
);
}
}

ReactDOM.render(
// passing props
<Parent />,
document.getElementById("root")
);
import React from 'react';

class Incdec extends React.Component

{

      constructor()
      {
          super();
          this.state={counter:0};

          this.Incr=this.Incr.bind(this);
          this.Decr=this.Decr.bind(this);
      }

      Incr(e) {

        console.log("Inside incr ")

        this.setState({counter:this.state.counter+1})
         
      }

      Decr(e){
        console.log("Inside decr ")

        this.setState({counter:this.state.counter-1})
      }

      render()
      {

        return(
            <div className='container-fluid'>
                <h1 className='text-primary'> Counter Value:
{this.state.counter}</h1>

                <input type="button" className="btn btn-success"

value="Increment" onClick={this.Incr}/>

                <input type="button" className="btn btn-danger"

value="Decrement" onClick={this.Decr}/>

            </div>
        )
      }
}

export default Incdec;

import React from 'react';

class Incdec extends React.Component

{

      constructor()
      {
          super();
          this.state={counter:0,mobile:9786123706};

          this.Incr=this.Incr.bind(this);
          this.Decr=this.Decr.bind(this);
          this.setMobile=this.setMobile.bind(this);
      }

      Incr(e) {

        console.log("Inside incr ")

        this.setState({counter:this.state.counter+1})
         
      }

      Decr(e){
        console.log("Inside decr ")

        this.setState({counter:this.state.counter-1})
      }

      setMobile(e)
      {
         
            let m=this.props.mobile;
            this.setState({mobile:m},()=>{
                    console.log(this.state.mobile);

            })
      }
      render()
      {

        return(
            <div className='container-fluid'>
                <h1 className='text-primary'> Counter Value:
{this.state.counter}</h1>

                <input type="button" className="btn btn-success"

value="Increment" onClick={this.Incr}/>

                <input type="button" className="btn btn-danger"

value="Decrement" onClick={this.Decr}/>

               
                <input type="button" className="btn btn-info" value="Set
Mobilenumber" onClick={this.setMobile}/>

            </div>
        )
      }

export default Incdec;

CDN for Bootstrap 5

    <link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
  <script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min
.js"></script>
Commenting a react component

{/* <componentname/>*/}

Passing the data between components

import React from 'react'
import ChildComponent from './Childcomp';

class ParentComponent extends React.Component {

render(){
    return(
    <div>
        <ChildComponent message="Data from first component"/>
    </div>
      );
   }
}

export default ParentComponent;

import React from 'react';

const ChildComponent = (props) => {
    return(
          <h2> {props.message} </h2>
    );
}
export default ChildComponent;