4. History
Jordan Walke, a software engineer at
Facebook
It was open-sourced at JSConf US in
May 2013
On Facebook's newsfeed in 2011
On Instagram since 2012
4
6. React Basics
6
JSX − JSX is JavaScript syntax extension.
Components − React is all about components.
Unidirectional data flow − React implements
one-way data flow which makes it easy to
reason about your app.
7. React Basics
7
Covers only the view layer of the app
Complex React applications usually
require the use of additional libraries.
➔State management
➔Routing
➔Interaction with an API
8. Why React?
8
Uses virtual DOM which is a JavaScript object.
Can be used on client and server side as well as with
other frameworks.
Component and data patterns improve readability,
which helps to maintain larger apps.
10. Things needs to be installed
10
yarn or npm
a text editor
a web browser
11. Setting up the env
11
yarn init
Give main as src/index.js
yarn add react
yarn add react-dom
yarn add react-scriptsx
https://github.com/facebook/create-react-app
12. Setting up the environment
12
Folder Structure
public
--index.html
src
--index.js
package.json
13. Setting up the environment
13
index.html
<html lang="en">
<head>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
14. Create our first React component
14
import React from 'react'
import ReactDOM from 'react-dom'
15. Create our first React component
15
import React from 'react'
import ReactDOM from 'react-dom'
class HelloWorld extends React.Component {
render() {
return (
<div>
<div>Hello World!</div>
<div>Hello World!</div>
</div>
)
}
}
16. Create our first React component
16
import React from 'react'
import ReactDOM from 'react-dom'
class HelloWorld extends React.Component {
render() {
return (
<div>Hello World!</div>
)
}
}
ReactDOM.render(<HelloWorld />,
document.getElementById('root'));
20. Adding State to your Component
20
class WelcomeComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'John'
}
}
render() {
return (
<div>
Welcome {this.state.name}
</div>
)
}
}
21. Adding State to your Component
this.state inside of the constructor
will be part of that component’s state
component has the ability to modify
its own internal state. This can be
achieved by a method called
setState
21
22. Adding State to your Component
22
this.handleChange = this.handleChange.bind(this)
handleChange (e) {
this.setState({
name: e.target.value
})
}
23. Adding State to your Component
23
// Wrong
this.state.name = 'Hello';
Instead, use setState():
// Correct
this.setState({name: 'Hello'});
24. setState process
Last
Only update real
DOM with
necessary changes
First
Re-render virtual
DOM
Second
Run Diff algorithm
with previous virtual
DOM and new
virtual DOM
24
setState sends signal to notify our app some data has
changed,
25. Receiving State from Parent
Component
25
class Car extends React.Component {
render() {
return (
<div>This car is {this.props.color}.</div>
)
}
}
ReactDOM.render(<Car color="Red"/>,
document.getElementById('root'));
26. Receiving State from Parent
Component
26
yarn add prop-types
or
npm install prop-types
27. Receiving State from Parent
Component
27
Car.propTypes: {
color: PropTypes.string.isRequired
}
Car.defaultProps = {
color: 'Red'
}
28. Component LifeCycle
28
componentDidMount
Fired after the component mounted (after the initial render)
componentWillUnmount
Fired before the component will unmount
getDerivedStateFromProps
Fired when the component mounts and whenever the props change. Used
to update the state of a component when its props change
It isn't necessary to use JSX in React development, but it is recommended. Allows us to write HTML like syntax which gets transformed to lightweight JavaScript objects.
This will help you maintain the code when working on larger scale projects.
This will improve apps performance, since JavaScript virtual DOM is faster than the regular DOM.
A JavaScript representation of the actual DOM
This will improve apps performance, since JavaScript virtual DOM is faster than the regular DOM.
A JavaScript representation of the actual DOM
This package serves as the entry point to the DOM and server renderers for React.