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
