ReactJS

 A JavaScript library for building user interfaces

 Declarative
 Component-Based
 Learn Once, Write Anywhere
 …

 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 })

 State Updates May Be Asynchronous

State  this.setState({ key: value }); console.log(this.state.key)
 this.setState({ key: value }, () => console.log(this.state.key));

 State Updates are Merged

 this.setState({ key1: value1 })
 this.setState({ key2: value2 })
 console.log(this.state) will print both key1 & key2
Handling
Events
Conditional
Rendering
Lists and Keys
  In HTML <input> maintain its own state
 In React, state is typically kept in components state

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

Up  Lift the shared state up to their closest common ancestor

Try It
Pro Tips

React Developer Tools

Next Steps MobX for State Management
Reach Us!