"Bored At Home" React Challenge

April 13 - May 31, 2020
10:00 AM - 11:30 AM PDT (Tuesdays) - Other timezones
Online (I'll send you the links)
Kill The Boredom

Crazy times, I know! But I applaud you for staying home to keep yourself and others safe. 👏👏👏

Getting stuck at home isn’t fun. It can even be depressing. But at least we have a shelter to live in, food in the fridge, and the internet to connect with each other.

While others might be killing time with Netflix or video games, why don’t you use this extra time to pick up some new skills and stay ahead?

Join “Bored At Home” React Challenge!

Come to learn React from scratch, meet like-minded people (with guaranteed social distance) and build something cool!

How does it work?

  • I’ll host one workshop per week for a few weeks.
  • I try my best to make the workshops fun and interactive.
  • You do in-class exercises and homework.
  • I pick some solutions as hot seat. We review it together as a group.
  • You complete a course project and show it off to the friend who has just played Call Of Duty for days.
  • I pick winners to receive grand prizes!

Who is this for?

Anyone who’s new to React (or who has attempted but struggled in the past). Here are some technical requirements:

  • 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. BTW: Sign up for Dan Abramov’s Just JavaScript, do it NOW!
  • Don’t be discouraged by the requirements above! You are more than welcomed to give it a try and you can always ask me questions at the workshop or before/after. The only must-have requirement is your desire to learn.

What will be covered?

The workshops will cover React fundamentals with a strong focus on mental models (thanks Dan for the inspiration!). 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 event is for you.

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

  • Basic concepts (components, state, props, JSX)
  • 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

What will I build?

What about a chat room?

chat window

What about this Emoji game?

emoji kung fu

Perhaps we won’t have enough time to learn all the details. I’ll decide the scope as we go through the program. But remember, the focus is on constructing solid mental models so that you could build many other things!

What’s the cost?

Free.

Why are you doing this for free? What’s the catch?

No catch! I have two goals for this project.

First, I want to stay mentally healthy by keeping myself busy. I’m used to working from home but these days I find myself more and more anxious — I even misread an email subject as “5 CEOs tested positive” when it’s actually “5 positive things CEOs can do”.

Second, I want to study how you learn and put together the result as a course, or maybe a book, or maybe both. I did a similar challenge on Framer last summer and the outcome was wonderful.

You said there will be prizes?

Yes! I’m not rich but I can give out my courses to winners. If you have suggestions, or even better, want to sponsor prizes, email me: linton AT jimulabs.com!

1 Winner

  • All courses on LearnReact.design
    • The React course/book as the outcome of this project
    • Prototyping with React + Framer: Starship ($299 value)
    • React 101 for designers ($99 value)
    • React Native for designers ($139 value)
    • Framer UI animation: Toggle ($59 value)
  • Showcase on LearnReact.design

4 Finalists

  • The React course/book as the outcome of this project
  • Prototyping with React + Framer: Starship ($299 value)
  • Showcase on LearnReact.design

All Challengers

  • Coupons (details coming soon)

Has anyone tried the workshops?

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,
Hi! I'm Linton!

I'm a full-stack developer and I love design. I've been teaching designers React since 2017 and I'm loving it! I'm also the author of a couple of courses at Treehouse and Lynda.

My dark little secret: 😈 creating this course is also my special way to learn all things about design and React -- trying to explain things clearly has taken my understanding of the concepts to a whole new level.

Thrilled to be on this journey with you!

Hey! I'm Beebee!

I'm a designer and animator. I draw inspiration from my dream diaries.

In my dreams, I saw mammoths chasing little bears on a circus. I managed to turn missiles launched from North Korea into splendid firework shows. I convinced the Emperor of Qin Dynasty to stop killing. I chatted with Prince Edwards in Chinese. I was left in awe by the weirdly breathtaking scenes made up of lily pads, lotus, water grass and pale dead fish...

What's in your dreams?

© 2020 jimu Labs, Inc.