React Mental Models Workshop 1

Tuesday March 31st, 2020
9:00 AM - 11:00 AM (PDT) - Other timezones
Zoom (I'll email you the link)
Secure Your Seat

How many times have you tried to learn React?

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 excercises 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. My best answer so far? It’s in the mental models. Our first priority should be constructing proper mental models in our mind. They’d serve as the North Star. They’d cut through the noise, simplify complex things and help us make sense of the knowledge.

We should learn and get into the habit of thinking in React.

This is what the React Mental Models workshops focus on.

Workshop Goals

This is the first workshop in the series. I’ll cover the most fundamental mental models of React:

  • Building a static version of the UI — the HTML tags
  • Making the UI dynamic — data binding

You’ll build this simplifed chat room interface and a few simpler exercises.

chat window

Workshop Format

Illustrated guides

You are a visual person? I am too! I’ll use illustrations and metaphors to help you understand and memorize the concepts, such as this and this.

Interactive exercises

Prepare to get your hands dirty. You’ll do many exercises. You’ll finish them along with other learners. We’ll review the answers together and hold discussions. We’ll take advantage of the interative nature of the workshop format. As one of the students said, “the playful balance of tension and reward made the workshop learnings far more memorable than the solo studies I do on the couch watching youtube tutorials. ”

Prerequisites

  • Knowldge of HTML and CSS Basics. You should be comfortable with reading and writing HTML/CSS in a code editor such as VSCode. If you are not there yet, I suggest you to get your feet wet first.
  • It’d be helpful if you know some JavaScript basics, such as variables, functions, object, string and array. I’ll go over relevant JS concepts (including ES6) on an as-needed basis.
  • Don’t be discouraged by the requirements above. You can always ask me questions at the workshop or before/after. The only must-have requirement is your desire to learn.

Risk Free Investment

I’ll give you a full refund if you are not happy with the result. No hard feelings!

What People Say

Linton's workshop helped me break through the concepts that had kept me from learning React in the past. His methods and exercises were so valuable that I've continued building on them for fun. I'd suggest everybody who has attempted to learn React in the past and struggled to take this workshop.
Product Designer,
The playful balance of tension and reward made the workshop learnings far more memorable than the solo studies I do on the couch watching youtube tutorials. Thanks!
Product Designer,
Linton's workshop is well-structured and easy to follow. As a beginner, I'm excited that I can solve small exercises after learning the mental model of React. This workshop is a great learning experience for people who are new to React!
UX Student,
Big thanks to @lintonye for helping me understand how @react hooks work inside out! I really love his workshops.
UX Designer,
© 2020 jimu Labs, Inc.