Overview of React.JS - Internship Presentation - Week 5
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
2. 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
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
3. 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
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
4. 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.
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
5. What is React? (Continue...)
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
(source : airbnb.co.in)
6. Advantages & Disadvantages of React
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
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
7. What is DOM, Virtual DOM and How React use it
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
DOM (Document Object Model)
8. What is DOM, Virtual DOM and How React use it
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
Virtual DOM Example
Something changes in components
9. 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)
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
const myelement = <h1>JSX is too easy!</h1>;
ReactDOM.render(myelement, document.getElementById('root'));
10. 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...
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
11. Installation of React and creation of application, first app.
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
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.
12. Installation of React and creation of application, first app.
(Continue...)
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
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
13. Installation of React and creation of application, first app.
(Continue...)
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
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
15. Installation of React and creation of application, first app.
(Continue...)
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
<= File Structure after created react application
16. Get start with First-Project
After we go inside of our project directory
> npm start
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
22. 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.
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
27. Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
App.js File
Importing Function Component
and Class Component, both into
App.js
<CommonFunctionalComponent/>
<CommonClassComponent/>
28. 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.
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
29. ReactJS Lifecycle and Methods (Continue...)
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
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()
30. ReactJS Lifecycle and Methods (Continue...)
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
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()
31. 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.
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
32. 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'));
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION
33. 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'));
Information Technology
DURING TRAINING PROGRAM - WEEKLY PRESENTATION