Home

npm

• Intro - Import Export

• intro
• Component Chain
• Import Export

• React Components

• Step 1: write the components
• Step 2: use the components

• React Dynamic Components

• .props
• Example 1
• Example 2 - Passing in .props
• Default Values
• Functions in JSX
• Input Multiple .props

• React Events

• Intro
• State
• setState()
• Using Callbacks to Pass Information
• Accessing event Data and Event Pooling
• Updating State
• Nested State - Deep Merge
• Setting state is not synchronous and previousState

• React Forms

• Controlled Form
• Controlled Vs Uncontrolled Components
• Controlled Form do not Hold Data
• Abstract the handleChange method

• React Lifecycle

• Mounting - static getDerivedStateFromProps(props, state)
• Mounting - componentDidMount()
• Updating - static getDerivedStateFromProps(props, state)
• Updating - shouldComponentUpdate(nextProps, nextState)
• Updating - render()
• Updating - getSnapshotBeforeUpdate(prevProps, prevState)
• Updating - componentDidUpdate(prevProps, prevState, snapshot)
• Unmounting - componentWillUnmount()
• Element Ref

• Type of Components

• Functional Component
• Container and Presentation Components
• Functional Component as a Stateless Function
• Separating Concerns Using a Container Component
• Fragments
• Exercise 4 - Functional Component

• React Routing

• Client Side Routing
• Nested Routing

• Other

Examples

• Exercise 1 - React Components State Props
• Exercise 2 - Mount Unmount
• Exercise 3 - fetch()
• Exercise 4 - Functional Component