Overview of React.JS - Internship Presentation - Week 5

WEEKLY PRESENTATION
DURING TRAINING PROGRAM
- Devang Garach
devanggarach.rao@gmail.com
WEEK-5
Information Technology

AGENDA
What is React?
Advantages & Disadvantages of React
What is DOM, Virtual DOM and How React use it?
React JSX and ES6
Installation of React and creation of application, first app.
Get start with First-Project
React Components
ReactJS Lifecycle and Methods
State and Props in React
DURING TRAINING PROGRAM - WEEKLY PRESENTATION

What is React?
React is an open-source, front end, JavaScript library for building user
interfaces or UI components.
It is maintained by Facebook and a community of individual developers and
companies.
React can be used as a base in the development of single-page or mobile
applications.
Efficiently updates and renders the right components when your data
changes

What is React? (Continue...)
Why was React developed?
● Complexity of two-way data binding
● Bad UX from using “Cascading Updates” of DOM tree
● A lot of data on page changing over time
● Shift from MVC mentality.

What is React? (Continue...)
(source : airbnb.co.in)

Advantages & Disadvantages of React
Advantages Disadvantages
Easy to learn, easy to use Higher pace of development
Reusable components Poor documentation
The Virtual DOM React JS is only a view layer
Great Developer Tools We have to learn JSX
Scope of testing the codes, easy to test & debug.
Faster display of great numbers of components

What is DOM, Virtual DOM and How React use it
DOM (Document Object Model)

What is DOM, Virtual DOM and How React use it
Virtual DOM Example
Something changes in components

React JSX and ES6
What is JSX?
JSX stands for JavaScript XML.
JSX allows us to write HTML in React.
JSX makes it easier to write and add HTML in React.
(It is not necessary to use JSX, but JSX makes it easier to write React
applications)
const myelement = <h1>JSX is too easy!</h1>;
ReactDOM.render(myelement, document.getElementById('root'));

React JSX and ES6
What is ES6?
ES6 stands for ECMAScript was the second major version of JavaScript
ECMAScript 6 is also known as ES6 and ECMAScript 2015,
New Features introduced in ES6
● The let and const keyword
● JavaScript Arrow Functions
● JavaScript For/of
● JavaScript Classes
● JavaScript Promises
● Many more...

Before we get started, react installation or to create application, we require
to learn npm and its commands.
What is NPM?
NPM stands for Node Package Manager
npm is the package manager for the Node JavaScript platform. It puts
modules in place so that node can find them, and manages dependency
conflicts intelligently. Most commonly, it is used to publish, discover, install,
and develop node programs.

(Continue...)
Before using NPM commands we have to install, node.
To get Download, nodejs from official website: https://nodejs.org/en/download/
Nodejs is supported all major OS, like Windows, Mac or Linux.
Once nodejs is installed in you OS. Verify the version of node js and npm.
> node -v
> npm -v

(Continue...)
To create an React Application we use npm command
> npm install -g create-react-app
> cd <my-directory>
> npx create-react-app <project-name>
Once it has been created, we can start our application.
> npm start

(Continue...)
<= File Structure after created react application

Get start with First-Project
After we go inside of our project directory
> npm start

<= File Structure of React JS Project first-app

ReactJS Components
Before we start with Lifecycle and methods we have to learn more about React
Components.
Components are independent and reusable bits of code. They serve the same
purpose as JavaScript functions, but work in isolation and return HTML via a
render() function. Components come in two types, Class components and Function
components.

Function Component
CommonFunctionalComponent.js

App.js File
Importing Function Component
into App.js
<CommonFunctionalComponent/>

Class Component
CommonClassComponent.js

App.js File
Importing Function Component
and Class Component, both into
App.js
<CommonFunctionalComponent/>
<CommonClassComponent/>

ReactJS Lifecycle and Methods
Each component in React has a lifecycle which we can monitor and manipulate
during its Four phases.
The Four phases are: Mounting, Updating, Unmounting and Error Handling.

ReactJS Lifecycle and Methods (Continue...)
Phases Description
Mounting When an instance of a component is being created or inserted into the DOM
Constructor()
static getDerivedStateFromProps()
render()
componentDidMount()
Updating When a component is being re-rendered as a result of changes to either its props or state
static getDerivedStateFromProps()
shouldComponentUpdate()
Render()
getSnapshotBeforeUpdate()
componentDidUpdate()

ReactJS Lifecycle and Methods (Continue...)
Phases Description
UnMounting When a component is being removed from the DOM
componentWillUnmount()
Error Handling When there is an error during rendering. In a lifecycle method, or in the constructor of any child
component.
static getDerivedStateFromError() and ComponentDidCatch()

State and Props in React
React props:
Props are arguments passed into React components.
Props are passed to components via HTML attributes.
React state:
React components has a built-in state object.
The state object is where you store property values that belongs to the
component.
When the state object changes, the component re-renders.

State and Props in React (Continue...)
Props example: (source: w3school.com)
import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component
{
render(){
return <h2>I am a {this.props.brand}!</h2>
}
}
const myelement = <Car brand="Ford" />;
ReactDOM.render(myelement, document.getElementById('root'));

State and Props in React (Continue...)
State example: (source: w3school.com)
import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component{
constructor(props){
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964 };
}
render(){
return(<div><h1>My {this.state.brand}</h1>
<p>It is a {this.state.color} {this.state.model} from {this.state.year}. </p>
</div>);
} }
ReactDOM.render(<Car />, document.getElementById('root'));

Thank You.
- Devang Garach
devanggarach.rao@gmail.com

Overview of React.JS - Internship Presentation - Week 5

More Related Content

What's hot

Similar to Overview of React.JS - Internship Presentation - Week 5

More from Devang Garach

Recently uploaded

Overview of React.JS - Internship Presentation - Week 5