⚛️🌲 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.
Written by chantastic.
Follow his nonsense on Twitter.
Day 25: ...
December 25, 2017Tinker 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, 2017If 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, 2017knows 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, 2017Our 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, 2017Welcome 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, 2017Smart 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, 2017I 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, 2017Gweneth 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, 2017Here 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, 2017Today 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, 2017Yesterday , 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, 201799.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, 2017Today, 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, 2017Compose 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, 2017You 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, 2017When 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, 2017If 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, 2017Managing 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, 2017Being 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, 2017Look 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, 2017Some 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, 2017If 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, 2017Components 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, 2017People 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, 2017In , 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, 2017Why? ¯ _ (ツ)_/¯ I like holidays. I like helping people. I think most React education is pathologically complicated. This is a condensed…