Scribd
Upload
35 views21 pages

ReactJS: Building User Interfaces Guide

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
35 views21 pages

ReactJS: Building User Interfaces Guide

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
  • ReactJS Overview
  • Introduction
  • Hello World
  • JSX
  • Rendering Elements
  • Components and Props
  • Try It
  • Lifecycle
  • State and Lifecycle
  • State
  • Handling Events
  • Conditional Rendering
  • Lists and Keys
  • Forms
  • Controlled Input
  • Uncontrolled Input
  • Lifting State Up
  • Try It Again
  • Pro Tips
  • Next Steps
  • Reach Us

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

[Link]
 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
 [Link] = value
 [Link]({ key: value })

 State Updates May Be Asynchronous


State  [Link]({ key: value }); [Link]([Link])
 [Link]({ key: value }, () => [Link]([Link]));

 State Updates are Merged


 [Link]({ key1: value1 })
 [Link]({ key2: value2 })
 [Link]([Link]) 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!

ReactJS
Intro A JavaScript library for building user interfaces Declarative Component-Based Learn Once, Write Anywhere … Using
Hello World https://reactjs.org/docs/hello-world.html
JSX A syntax extension to JavaScript This funny tag syntax is neither a string nor HTML Produces React “elements”
Rendering Elements
Components and Props Components let you split the UI into independent, reusable pieces Components are like JavaScript func
Try It
Lifecycle Mounting constructor() render() componentDidMount() Updating shouldComponentUpdate() render() componentDidU
State and Lifecycle
State Do Not Modify State Directly this.state.key = value this.setState({ key: value }) State Updates May Be Asynchronous

You might also like