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.

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…