Best Practices
Developing with React
What We're Covering
- Building your first React project
- Managing Application State
- Container & Presentational Components
Creating a React App
- JSX
- ES6
- Custom Modules
- 3rd-party modules
If only there was a tool that could help us create an app for React
create-react-app
A Quick Word on ES6 Classes
- You do not need them to write React
- Most examples use them, however
-
create-react-class is an alternative
Managing State
Data Flow and Component State
The Problem
Components Need to Know What's Happening in Your Application
Update User Info
First Name:
Last Name:
Submit
The Solution
Unidirectional Data Flow with Flux
Implementing Flux
- Facebook's Flux & flux-utils
https://facebook.github.io/flux/docs/flux-utils.html - Redux
http://redux.js.org/ - Fluxible
http://fluxible.io/
Container & Presentational Components
Container
- Manage State
- Talk to APIs
- Call Action Creators
- Listen to Stores
- Don't Manage their own DOM
- See: flux-utils Container
Presentational
- Receive Props
- Manage DOM
- Don't Manage their own State*
- Can have their own children
- Can have callbacks as props
The Decisions are Yours
In Conclusion...
- Use create-react-app for predictable app structure & builds
- Use Flux (or Redux) to manage state and data flow
- Use containers to communicate & receive data changes
- Use presentational components to display things!
React - Best Practices
By Eric Adams
