Learning React? Here is a syllabus

Recently a friend asked me to outline what things he should try to learn while learning React. I thought this was a neat (and probably inflammatory) discussion piece. Here’s the off-the-cuff list of important learnings that I would put in my “Learn React” syllabus…

I’m going to sort this out like I would a curriculum from when I was a teacher. There will be the categories which will stand for a kind of “unit,” and then individual questions that act like “essential questions.”

The idea is that you’ll never be able to memorize every instance, case, and pattern in code. But if you are able to articulate these things and give examples in your own words and code, you have a good understanding. And keep in mind, a good understanding is not the same as a complete understanding. The latter is impossible.

React.js Essential Questions

• Why is React called React?
• How are Class components and Functional Stateless Components related?
• What are the differences between declarative code vs imperative code?
• Why does JSX exist and what does it do? OR What is React.createElement and why do we not explicitly use it while coding?
• When do you use React Component lifecycles?
• What are the pros and cons for using Higher Order Components and Render Props?
• What is the purpose for React.Context?
• Why do React refs exist?
• What do hooks allow you to do that class components don’t?
• Why does React exist? (This I stole from a React person on Twitter. Unfortunately I do not remember who said this! If you know, please let me know!)

Redux Essential Questions

• Why does redux exist? OR When do you know you might want to use Redux?
• Why is the flux pattern adopted for React state patterns?
• How does Redux compare to other state storage frameworks like Backbone, mobX, Vuex, etc.
• Where would you place asynchronous services inside of a React application with Redux?

React Router Essential Questions

• What roles and functionality does Router give React and why does React need it?
• What is the difference between static and dynamic routes?
• When do you know you need to nest routers?

General Reactish questions

• What are the downsides to a Single Page App and why does Server Side Rendering exist?
• What problems does Next.js solve for React?
• What is a static site generator? OR What does Gatsby.js do that’s different from a Server Side Rendered application?

Conclusion

Obviously this is not exhaustive, but I think it’s a good way to explore and learn React- at least the high points of React application development. I would use this as a syllabus if I were to design a course.