React Mental Models

You watched Youtube videos. You read blog posts. You followed one tutorial after another. Sometimes, you think you’ve got it. After all, you’ve successfully built that todo list app step by step, like following instructions on a recipe. Some other times, what you’ve learned feels as slippery as an eel. It doesn’t stick. It doesn’t click.

"I can follow tutorials, but I can't apply it to my own projects."

"I can talk it through, but if you ask me to start from scratch, it’d be pretty rough."

"Why are there so many different ways to style a component? What's the right way to do it?"

"The syntax is a torture. What are these double curly braces? What are these square brackets?"

"Which is JS? Which is React?"

Tutorials and hands-on exercises are important. But if they stop at only teaching you the “how” — even though giving you the illusion of mastery — your mind will refuse to retain it for the long term.

What else do we need? What are the more effective ways to learn? I’ve been thinking about this and experimenting for a while.

This is the recent project that I wanted to share with you.

It's a course tentatively named React Mental Models. It focuses on helping you get into the habit of thinking in React. The journey starts with a very first impression of React, and we'll dig deeper into the whys and inner workings. Here's a list of topics that'll be covered.

It is a work in progress. I've been working on it since March and it may take a few more months for the public to see it. But if you want to take a sneak peek now, enter your email address below.

I'll send you new videos and/or updates. No Spams. Unsubscribe anytime.

What will be covered?

This course will cover React fundamentals with a strong focus on mental models. I'll try to help you get into the habit of thinking in React.

I wrote a couple of blog posts as a start (this and this). Read them to get an idea whether this course is for you.

Here's a laundry list of the topics to be covered:

• Basic concepts (components, state, props, JSX)
• JS Closures
• ES6 features (destructuring, arrow functions, import/export etc.)
• How to remember the syntax
• Project structure and how different pieces fit together
• Overcoming "blank editor syndrome"
• Styling components
• Working with input (get/set content, events)
• Controlled & uncontrolled components
• Conditional rendering
• Rendering lists
• Thinking declaratively
• The movie frame mental model
• Immutability
• Data flow
• Decide when to divide into components
• Decide where the data should live
• Rules for using hooks
• useEffect
• useRef
• Custom hooks

TBD:

• Other hooks such as useContext, useCallback and useMemo
• Performance optimization
• Framer Motion (for the game)
• Keyboard events (for the game)

What will NOT be covered:

• HTML/CSS (prerequisite)
• JavaScript basics such as data type, loop, conditional (prerequisite)
• Class component (it's 2020!)
• Setting up the development environment (we'll use CodeSandbox)
• Back-end (setting up a server, interacting with a database etc.)
• Tools (Babel, Webpack etc.)
• Ecosystem libraries (Redux, Mobx, React Router etc.)
• Suspense