Thread by @Swizec

LEARN WHILE YOU POOP: Why you should learn React 🧐

Hi 👋 I’m trying something new and need your feedback. What do you think of this as a format for a daily 2min video?

No pressure learning at 2 minutes per day.Start with WHY React all the way to a React 16.3 master in a month.

LEARN WHILE YOU POOP: Why are components so great 🤔

React, Vue, Angular, or whatever. Components are the future and you should learn how to think in them. Here's why 👇

Hint: it's a lot like LEGO except you also have a 3D printer to make your own.

LEARN WHILE YOU POOP 3
How JSX makes your life easier 👇

Some still debate it, but I love how JSX lets you get in there and get your hands dirty right with the stuff your code is meant to be outputting. Like a top chef 👩‍🍳 gently massaging a steak. 🥩

LEARN WHILE YOU POOP 4
Your first @reactjs component 💪

Play with the code on @codesandboxapp 👉 codesandbox.io/s/lpnmn7o6z

We're building towards a chat app 💬

LEARN WHILE YOU POOP 5 | Class-based React components

Functional component 👉 class-based component. A little more overhead, but a lot more power. 🚤

Code is now on GitHub. One commit per video. github.com/Swizec/learn-w…

LEARN WHILE YOU POOP 6
Why you need both state and props 🧐

Both state and props are just JavaScript values that you use when rendering JSX. So why do you need both?

👇

LEARN WHILE YOU POOP 7
How stateful (declarative) rendering makes your job easy 💪

Your UI is an expression of state. Manipulate the state, change the UI. Never worry about the rendering.

Explained with the help of a magical make-your-face-young-again cream container.

I am not sure my explanation made as much sense as I wanted to. Explaining declarativeness is hard

External Tweet loading...
If nothing shows, it may have been deleted
by @Swizec view original on Twitter

LEARN WHILE YOU POOP 8 |
React event API and you 🎪

React comes with a full event API. It's great. No more memory leaks. But there's one bit that's hard 👉`this`

Watch this and never struggle with the `this` keyword in your event callbacks ever again. 3 ways to do it :)

How do you share state between components?
We hoist state to the least common denominator, pass it down via props, and change it back up with callbacks.

Props flow🏄‍♀️ down callbacks fly 🛩 up | LEARN WHILE YOU POOP 9

Now with more bathroom mirror sketching 😛

How React components talk to each other | LEARN WHILE YOU POOP 10

Yesterday we said that props flow down and callbacks fly back up. Today we're putting that into practice with some code.

Tomorrow: React 16.3 context API. I'm excited

Code 👉 github.com/Swizec/learn-w…

LEARN WHILE YOU POOP 11
#reactjs 16.3 Context API explained in 2 minutes 20 seconds 150 milliseconds

The new React 16.3 context API. Why to use it, when to use it, how to use it.
You'll never need Redux or MobX ever again. Maybe 😏

Code on GitHub 👉 github.com/Swizec/learn-w…

LEARN WHILE YOU POOP 12
Styling 💅 your React components

There are many ways to do it. Do you go CSS, do you go css-in-js, which css-in-js do you choose?

This video gives you The Goal and an overview of options.Next few days we look at those in detail

LEARN WHILE YOU POOP 13
Why, when, and how to use the style prop #cssinjs #reactjs

The style prop is great. It's there by default and it works. You should use it for one-off styling overrides or your app is gonna get unruly.

Code on GitHub 👉 github.com/Swizec/learn-w…

LEARN WHILE YOU POOP 14
CSS Modules in 2 minutes 👾

CSS Modules are not my favorite, but they're pretty much the only option when you have a bunch of existing CSS that you want to make better.

Code on GitHub 👉github.com/Swizec/learn-w…

Why styled components 💅 are the best approach to styling React components

Balance between normal CSS and #cssinjs on fleek 👌

Code on GitHub 👉github.com/Swizec/learn-w…

LEARN WHILE YOU POOP 16
Does the key prop still matter?

@reactjs will yell at you, if you render a list and don't give each element a unique key. But do things really break?

Code on GitHub 👉 github.com/Swizec/learn-w…

LEARN WHILE YOU POOP 17
When and how you use #reactjs refs

You should never ever under absolutely no circumstances ever need to use direct DOM manipulation in a React component.

But when you do, refs are there to make it easy.

Code on GitHub 👉github.com/Swizec/learn-w…

LEARN WHILE YOU POOP 18
React 16.3 Lifecycle Methods in 2 minutes

They seem absolutely crucial, but really you'll use them for loading data and not much else. Sometimes 3rd party library integration or making declarative animations.

🤘Still good to know. 🤘

LEARN WHILE YOU POOP 19
Patterns for component reuse

You build components with the linux philosophy. Do one thing and do it well. 👆Then assemble for bigger things.

Higher order components, render props, function as children, and composite components take a different approach

Higher Order Components explained in 2 minutes ⏰

Higher Order Components let you wrap any component in a new component. This lets you share functionality between different components in your app.

Code on GitHub 👉 github.com/Swizec/learn-w…

Render props, the hot new thing ever since @ryanflorence put it in React Router

Why & How You Should Use React Render Props 👇
They're great 👌

Tomorrow we compare to function-as-children 😛

You might enjoy this series as a YT playlist youtube.com/playlist?list=…

LEARN WHILE YOU POOP 22
Render prop or function as children? 🧐

Make your users happy, keep their codebase consistent, support both patterns. Here's how 👇

LEARN WHILE YOU POOP 23
How you can use React Portals to do cool things 😎

Control any part of your app as if it was your component's own child element. Pretty neat.

Code on GitHub 👉github.com/Swizec/learn-w…

LEARN WHILE YOU POOP 24
Handling errors with error boundaries ⚠️

When something goes wrong, React turns your whole app blank. You can fix that with error boundaries.

👇

LEARN WHILE YOU POOP 25
How you can choose what goes in what component? 🧐

A question everybody asks: How do I decide what's in my component? When should I split it up? How many abstractions should I build?

There's 3 guidelines you can use. 👇

LEARN WHILE YOU POOP 26
Build simple forms with React controlled components and keep your API declarative

You might not need react-redux-form or any of that complex stuff 🤯

Code on GitHub 👉 github.com/Swizec/learn-w…

Learn React Router in 2 minutes | LEARN WHILE YOU POOP 27

Plus a bonus lesson about polluting your low level components with context. That was painful, think ahead folks! 😅

Code on GitHub 👉github.com/Swizec/learn-w…

Build 🏗 your components with @storybookjs | LEARN WHILE YOU POOP 28

You'll soon realize that dealing with your whole app when all you wanna do is build the perfect button is ... annoying. So build your components in isolation first.

Doubles as great documentation 💪

So you've built an amazing React component. It's self-contained, does great things, and you use it all over.

Now you wanna use it in other projects and give it to other people.
Time to opensource!

Opensource your React component | LEARN WHILE YOU POOP 29 👇

And thus concludes Module 1 of #learnwhileyoupoop – React Essentials

Here's what happens next 👇
The past 30 videos were a teaser. They become a full video course

🎥 Video so you get the gist
📖 Full articles so you learn the details
🙏🏻 Exercises so you can practice

Want it?