React.js single page webapps


#1

Let’s learn about React.js with @Swizec’s 2 min video series.

Codebase: https://github.com/Swizec/learn-while-you-poop-react


#2

01 | Why you should learn react?

A series of 2min twitter video explainers from @Swizec.


#3

02 | Why are components so great?

A series of 2min twitter video explainers from @Swizec.


#4

03 | How JSX makes your life easier.

A series of 2min twitter video explainers from @Swizec.


#5

04 | Your First React Component

A series of 2min twitter video explainers from @Swizec.

Play with the code on CodeSandbox :point_right: https://codesandbox.io/s/lpnmn7o6z

We’re building towards a chat app :speech_balloon:


#6

05 | Class-based React components

A series of 2min twitter video explainers from @Swizec.


#7

06 | Why you need both state and props

A series of 2min twitter video explainers from @Swizec.


#8

07 | How stateful rendering makes your job easy :muscle:

A series of 2min twitter video explainers from @Swizec.


#9

08 | React event API and you

A series of 2min twitter video explainers from @Swizec.

React comes with a full event API. It’s great. No more addEventListener, no more memory leaks. But there’s one bit that’s hard :point_right:this.


#10

09 | Props flow down callbacks fly up

A series of 2min twitter video explainers from @Swizec.

How do you share state between components? With React (and Vue) we like to keep our dataflow unidirectional. That means we hoist state to the least common denominator, pass it down via props, and change it back up with callbacks.


#11

10 | How React components talk to each other

A series of 2min twitter video explainers from @Swizec.


#12

11 | React 16.3 Context API explained

A series of 2min twitter video explainers from @Swizec.


#13

12 | Styling :nail_care: your React components

A series of 2min twitter video explainers from @Swizec.


#14

13 | Why, when, and how to use the style prop

A series of 2min twitter video explainers from @Swizec.

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.


#15

14 | CSS Modules in 2 minutes

A series of 2min twitter video explainers from @Swizec.

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.


#16

15 | CSS Modules in 2 minutes

A series of 2min twitter video explainers from @Swizec.

Why styled components :nail_care: are the best approach to styling React components

Balance between normal CSS and #css in js on fleek :ok_hand:


#17

16 | Does the key prop still matter

A series of 2min twitter video explainers from @Swizec.

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


#18

17 | When and how you use React refs

A series of 2min twitter video explainers from @Swizec.

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


#19

18 | Lifecycle Methods

A series of 2min twitter video explainers from @Swizec.

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.

:metal:Still good to know. :metal:


#20

19 | Lifecycle Methods

A series of 2min twitter video explainers from @Swizec.