Scribd
Upload
69 views

React JS

ReactJS is a JavaScript library for building user interfaces that is declarative, component-based, and can be used to write code once and render across platforms. It uses JSX syntax to define UI elements and components that accept inputs and return UI elements. Components have lifecycles for mounting, updating, and unmounting. State is maintained in components and updated asynchronously using setState. Forms can have controlled or uncontrolled inputs by keeping values in component state or not. Shared state can be lifted up to common ancestors.

Uploaded by

vai
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
69 views

React JS

ReactJS is a JavaScript library for building user interfaces that is declarative, component-based, and can be used to write code once and render across platforms. It uses JSX syntax to define UI elements and components that accept inputs and return UI elements. Components have lifecycles for mounting, updating, and unmounting. State is maintained in components and updated asynchronously using setState. Forms can have controlled or uncontrolled inputs by keeping values in component state or not. Shared state can be lifted up to common ancestors.

Uploaded by

vai
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

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!

You might also like