Scribd
Upload
26 views16 pages

ReactJs 21022020

The document discusses React JS including what it is, why it is used, concepts like JSX and components, its lifecycle methods, and how to install and create a sample project with React.

Uploaded by

Tan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views16 pages

ReactJs 21022020

The document discusses React JS including what it is, why it is used, concepts like JSX and components, its lifecycle methods, and how to install and create a sample project with React.

Uploaded by

Tan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

REACT JS

INTRODUCTION
Agenda

1. What is ReactJs?
2. Why using ReactJs?
3. Who are using ReactJs?
4. ReactJs Concepts
5. ReactJs Lifecycle
6. ReacJs Installation
7. Sample Project
What is ReactJs?

• ReactJs is a front-end library, was created by Jordan Walke, a software


engineer of Facebook.
• Open source.
• Currently, one of the most popular javascript libraries and has strong
foundation and large community behind it.
• Initial public release (0.3.0) on 29 May 2013.
• Latest version 16.12.0.
Why using ReactJs?
• Simplicity
• Reusable Components
• Virtual DOM
• Learn once write anywhere
• Big Community
Trending chart

Npm Download Counting

Stack Overflow Trending


Who are using ReactJs?
function Car() { return <h2>Hi, I am also a Car!</h2>; }

ReactJs Concepts
• JSX:
Javascript XML syntax transform.
Allows us to write HTML in React.
Makes it easier to write and add HTML
in React.

• Component:
Like functions that return HTML
elements.
Independent.
Reusable.
Two types: Class and Functional
ReactJs Concepts
• Props:
Like function arguments
Send into components as attributes

• States: Demo here


Store property values that belongs to
the component.
When the state changes, the
component re-renders.
ReactJs Lifecycle
ReactJs Lifecycle
• constructor()
Initialize state
Bind methods

• render()
Is required method in class component
Outputs HTML to the DOM
ReactJs Lifecycle
• static getDerivedStateFromProps(props, state)
Is called right before the render method
Return object to update state, null to update nothing
ReactJs Lifecycle
• shouldComponentUpdate(nextProps, nextState)
Whether continue with render() or not
Default true

• getSnapshotBeforeUpdate(prevProps, prevState)
Is invoked right before the most recently rendered output is committed to the
DOM
access to the props and state before the update
check what the values were before the update
ReactJs Lifecycle
• componentDidMount()
Is called after the component is rendered.

• componentDidUpdate(prevProps, prevState, snapshot)


Is called after the component is updated in the DOM.

• componentWillUnmount()
Is called when the component is about to be removed from the DOM.
ReactJs Installation

npm install –g create-react-app

create-react-app <project-name>

cd <project-name>

npm start
Sample Project
Thank You

You might also like