React Redux Isomorphic Cookbook

ES2015

Let, Const

Arrow Function

Destructuring

Template Strings

Default Parameters

Modules

Classes

Spread

Rest

Promises

React

Create a function component

Render component with ReactDOM

Nested components

Iteration

Props

Styling

Create a class component

Set state

Update State

Fetch  data from API

Event handling

Refs

React Router

Just render <Router /> instead

URLComponents
/App -> Dashboard
/aboutApp -> About
/inboxApp -> Inbox
/inbox/messages/123App -> Inbox -> Message
/messages/123App -> Inbox -> Message

Choose Target to Render Child Component

Add some links

 Get parameters from URL

Component Lifecycle

Mounting (Home => Article A)

  • componentWillMount()
  • componentDidMount()

Updating (Article A => Article B)

  • componentWillReceiveProps(nextProps)
  • componentDidUpdate(prevProps)

Unmounting (Article B => Home)

  • componentWillUnmount()

Improve Performance

Apply shouldComponentUpdate() method

Use immutable data

Redux

Create an action creator

Create a reducer

Create the root reducer

Create the store

Wrap the root component with Provider

Create a container

Apply Middleware

Isomorphic

Use Middleware Instead

Match the URL with Routes to detect the Status

Create a function to return the complete HTML

Prefetch Data

Pass the current state to client

Load the state into the store of client

More Tools

React Helmet

Scroll Behavior

 

(Visited 2,670 times, 2 visits today)

Leave a Reply