⚛️🌲 React Holiday


We'll start from basics and get all the way to Suspense, Hooks, and advanced composition!
Each day is a 2-3 minute read with CodeSandbox and quick assignments.
Check out 2017 (below) for examples.

chantastic

Written by chantastic.
Follow his nonsense on Twitter.

Day 25: ...

December 25, 2017

Tinker with it You did great. I’m proud of you for sticking with it to the end. If you made it through, you have all the essential knowledge…

Day 24: Move fast and break things

December 24, 2017

If you click any of the buttons in our app really fast , you’ll see this error. We call inside the asynchronous . All works if our…

Day 23: ...and ACTION!

December 23, 2017

knows too much. It knows how to manage an and display buttons. Pager Duty Let’s pass the actions into with the . I like putting them…

Day 22: A sensible default

December 22, 2017

Our HOC is mostly reusable. But it displays that static message. Let’s make that replaceable. Components over configuration The API is…

Day 21: something I like to call Chrismukkah

December 21, 2017

Welcome to the (H)OC I’m gonna level with you, I don’t know to explain higher-order components to you. I work in analogies and there just…

Day 20: Components: What do they know? Do they know things?? Let's Find out!

December 20, 2017

Smart vs. Dumb components is a dichotomy that has dominated the React conversation as long as React has existed. Here’s the nut: Some…

Day 19: Decide not to decide

December 19, 2017

I know what my decision is, Which is not to decide. Indecision is the best tool you have for smooshing components together. Master it…

Day 18: Conscious uncoupling

December 18, 2017

Gweneth got it right. Conscious Uncoupling is a good (for components). Let’s explore a new smooshing technique that makes reusable…

Day 17: Always use `Did`, unless you shouldn't

December 17, 2017

Here is some lifecycle wisdom: Always use methods, unless you shouldn’t. Confused? Read on for more (confusion). Why ? methods like…

Day 16: Mind the lifecycle gap

December 16, 2017

Today we’ll talk about things that don’t happen! First, a new component I’d like you to write a new component. You’ll define this…

Day 15: Key your children

December 15, 2017

Yesterday , you might have noticed this console warning pop up with our list. 👶 Give the keys 🔑 Following the warning above is simple…

Day 14: Lists are 99.7% of the job

December 14, 2017

99.7% of software development in one requirement A user should be able to view a list of items. — @samccone Listen to Sam. Lists make Apps…

Day 13: Gotta fetch 'em all

December 13, 2017

Today, we start with a new component! 🎊 🎉 🎊 🎉 Pokemon Take a stab at writing this component in a new sandbox before reading the next…

Day 12: Smoosh components

December 12, 2017

Compose means “smoosh things together.” You can smoosh 🥛 and ☕️. You can smoosh a 🍔 with your 😋. You smoosh things all day; it’s…

Day 11: Use expressions for conditional rendering

December 11, 2017

You can’t use statements in `render. In those curly-braces, you can only use expressions. Fortunately, you got a couple options. Tern or…

Day 10: setState is a food truck

December 10, 2017

When you set down with set state, you might think state is set immediately. It isn’t. There’s a leak! has a naming problem. You’re right to…

Day 9: Set state dynamically

December 09, 2017

If you want to set state dynamically, use a function . We give an anonymous function to be called with . Our function takes that and…

Day 8: Set state statically

December 08, 2017

Managing state is hard. I’ll take four days to cover the React APIs for setting state. So don’t read today’s lesson without coming back for…

Day 7: State of mind

December 07, 2017

Being sexy is all about attitude… It’s a state of mind. — Amisha Patel One of the special powers of class components is their ability to…

Day 6: Events aren't events

December 06, 2017

Look at HTML. It lets you handle DOM events inline. I could tell the sordid history that landed this in the “bad practice” bucket but we’d…

Day 5: Components can use classes for special powers

December 05, 2017

Some components have to be special. Those components get defined with class . It’s not much to look at now. We’ll fill it in this week…

Day 4: Props are function arguments

December 04, 2017

If components are functions and functions take arguments, components should take arguments. They do! In React we call component arguments…

Day 3: Components are functions

December 03, 2017

Components are just functions. 🤯 How do I write said component functions? Easy. Here’s one that spits out our wherever used. How do I use…

Day 2: JSX 4 LYFE

December 02, 2017

People like to make hay about JSX . Don’t get your undies in a bunched. All it does is make these two lines equivalent: How does HTML work…

Day 1: Hello 🎄

December 01, 2017

In , programs have a function. It’s where programs starts. React apps are similar; on the web they start with . WTF is ReactDOM? React…

About

December 01, 2017

Why? ¯ _ (ツ)_/¯ I like holidays. I like helping people. I think most React education is pathologically complicated. This is a condensed…