React Curriculum

The goal of this curriculum is to teach you how to build real-world React applications. To this end, the curriculum is divided into chapters to demonstrate one concept at time. The chapters are constructed so that concepts can be learned as a class or as an individual. As you progress, the chapters ramp up in difficulty and culminate in a final coding assignment where you'll build a real-world application in React.

NOTE: This curriculum is a work-in-progress. Don't hesitate to open a pull request to fix spelling or grammar mistakes, to fix bugs or logic errors, and to point out areas that are confusing.

Table of Contents

  1. Introduction to React
  2. React Tools
  3. Synthetic Events
  4. Stateful and Stateless components
  5. Component Life Cycle
  6. Refs
  7. Immutable Models
  8. Final Assignment
  9. Intermediate React

How does this curriculum work?

The goal of each chapter is to give you the practical knowledge and skills you'll need as a professional developer. Specifically, each chapter demonstrates the what, why, and how of a significant concept and any related concepts.

To accomplish this goal, chapters are comprised of exercises that'll prepare you for the coding assignment at the end of each chapter. After completing all chapters, you'll be ready to tackle the final assignment in the last chapter.

Completing a chapter's exercises will reinforce its concepts. Sometimes you'll be asked to explain a concept in your own words and then write it down. Other times you'll be asked to type out a code example into your text editor by hand and then run it. Working copies of the code examples from every chapter can be found in the exercises/ directory of this repository.

Additionally, completing a chapter's assignment will cement its concepts. You'll be asked to apply some or all of what you've learned to solve a coding challenge. Remember, just because you don't use a concept to complete an assignment doesn't mean it's unimportant. Collectively, the assignments will help you practice the concepts you'll need to know for the final assignment.

The final assignment is where you'll be evaluated. You'll be asked to apply all the significant concepts you've learned from previous assignments to build a real-world application.

How are the duration times determined?

At the start of every chapter, you'll see two durations—by yourself and as a class. Unsurprisingly, duration by yourself indicates how long it's likely going to take a student to read the chapter, complete all the exercises, and complete the assignment on their own. Typically, this is shorter than the duration as a class which includes the time it took to:

  • Explain the material to students.
  • Field questions from students.
  • Have the students complete the exercises and assignment independently.
  • Review the instructor's solutions for the exercises and assignments.
  • Give students a 10 minute break every hour.