React JS
React JS
Using React
Intro Using script tags
Using NPM
Online playgrounds
New App
create-react-app project
react-mobx-boilerplate
Hello World
https://reactjs.org/docs/hello-world.html
A syntax extension to JavaScript
This funny tag syntax is neither a string nor HTML
JSX Produces React “elements”
Rendering
Elements
Components let you split the UI into independent, reusable pieces
Components are like JavaScript functions.
Components They accept arbitrary inputs (called “props”)
And return elements describing what should appear on the screen.
and Props
Try It
Mounting
constructor()
render()
componentDidMount()
Updating
Lifecycle shouldComponentUpdate()
render()
componentDidUpdate()
Unmounting
componentWillUnmount()
State and
Lifecycle
Do Not Modify State Directly
this.state.key = value
this.setState({ key: value })
Forms We can combine the two by making the React state be the “single
source of truth”
An input form element whose value is controlled by React in this
way is called a “controlled component”.
Controlled
Input
Uncontrolled
Input
Lifting State Often several components need to reflect the same changing data