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.
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.
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. π₯©
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 π¬
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β¦
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?
π
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.
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 :)
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 π
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β¦
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β¦
#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
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β¦
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β¦
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β¦
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β¦
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β¦
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. π€
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
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β¦
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=β¦
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 π
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β¦
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.
π
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. π
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β¦
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β¦
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 πͺ
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 π
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?
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?
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
