How to Learn React: A Five-Step Plan
Step One - React Documentation + Code Sandbox
Key Takeaways
- Introducing JSX
- Rendering Elements
- Components and Props
- State and Lifecycle (super important!)
- Handling Events
- Composition vs Inheritance
- Thinking In React
Step Two - React Fundamentals Course
Key Takeaways
- Re-enforcement of principles from React docs
- Intro to the build tools for React projects, particularly webpack
- Stateless functional components
- Routing (how you navigate from one “page” to the next)
- Fetching async data
Step Three - Read ReactBits
Key Takeaways
-
Design Patterns and Techniques (most important tip is probably this)
-
Anti-Patterns
-
Perf Tips
Facebook came up with an answer to these questions—the Flux architecture. Some time later, Dan Abramov created an implementation of Flux he called Redux.
MobX is recommend
Step Four - Redux Documentation + Redux Video Series
Key Takeaways
-
Three principles of Redux
-
Actions
-
Reducers
-
Data flow
-
Usage with React
-
Async actions
-
Async Flow
-
Middleware
Step Five - The Complete Redux Book + Redux Video Series Part 2
Key Takeaways
-
Re-enforcement of principles from Redux docs and/or first video series
-
Understanding of basic functional programming principles
-
Understanding of creating and writing Redux middleware
-
Understanding of how to architect a React + Redux application
Other things
Redux Saga middlemare for Redux