DEV Community

Cover image for 🔥 Learn React in 10 Tweets (with hooks)
Chris Achard
Chris Achard

Posted on • Originally published at twitter.com

🔥 Learn React in 10 Tweets (with hooks)

This was originally posted as a twitter thread: https://twitter.com/chrisachard/status/1175022111758442497

🔥 Learn React in 10 tweets (with hooks) 👇

1.

How React Works:

  • you display data on a webpage
  • a user interacts with it
  • now the data changes...
  • ...and you want the webpage to look different

React does that for you! 💯

How React Works

2.

To think in React:

Break your UI into custom components.

Each component is responsible for displaying itself, based on the external and internal data available.

Build trees of these components for a full UI

Think in React

3.

Components are functions that return JSX

JSX looks like HTML, but is actually JavaScript

Inside of JSX, use curly braces to contain JS

A lot of people go "YUCK!" when they see what looks like HTML mixed into JS, but JSX is actually one of the things that makes React awesome 🦄

Components and JSX

4.

After defining a function component, you can use it within another component - it is a "custom component"

Use this method to build a "tree" of components that defines your entire UI

Custom Components

5.

Data that comes in from the outside of a component is called "props" (properties)

This can be passed from a parent to a child through JSX attributes

Props come into function components as the first argument to the function.

Props

6.

Internal, changeable data is called "state".

State is defined by the useState function, which returns the data, and a function to change that data (in an array).

NEVER set the state variable directly - always use that function (because of the next point 👇)

State

7.

When state or props change, your component updates AUTOMATICALLY 🎉

✨ This is the magic of React! ✨

You almost never have to go into the DOM yourself

(If you think that you do - you're probably trying to do it the "hard way")

Automatic Updates

8.

Make lists of things by looping over an array of data with map

Return an element from each loop iteration

Provide a unique key to each element in the list to ensure best performance

Lists in JSX

9.

2 built-in ways to style components:

  1. Set the class with className, and use regular CSS files

  2. Set inline styles with style={{ }} and camel cased keys
    👉 notice the double curly braces

Style Components with CSS

10.

Perform Async functions and side effects inside of useEffect (takes a callback)

The second argument is an array of dependencies.

Include any variable the useEffect uses that might change, or an empty array if there are none.

Async Functions and Side Effects

Bonus

That's it! Most of React is just special cases of those 10 points.

Now: want to watch 👀 this crash course as a screencast? Your wish is granted! 🎉

Check it out for a better understanding of each point 👇

https://www.reactscreencasts.com/crash_courses/react_with_hooks

 

Like this crash course?

I post more on twitter: @chrisachard
Or join the newsletter! https://chrisachard.com/newsletter/

Thanks for reading!

Top comments (21)

Collapse
 
dzhavat profile image
Dzhavat Ushev

I haven't used React in the last three years but these steps were quite clear and helped me understand how it has evolved. Thanks :)

Collapse
 
karataev profile image
Eugene Karataev

I see only one change of modern React compared to React 3 years ago: hooks instead of class components with local state and lifecycle methods. I guess in the next three years React will not change dramatically as well.

Collapse
 
chrisachard profile image
Chris Achard

I agree.

Also - classes still work great, and there are no plans to deprecate them! I only choose hooks for this guide because I find them easier to explain than classes. I hope to do another guide in the future though (a part 2 I guess) that explains classes - because there are SO MANY classes in the wild that React developers will definitely encounter them.

Thread Thread
 
karataev profile image
Eugene Karataev

Btw, I still prefer to use class components instead of hooks, because I don't want to mix two approaches in one codebase (even if it's the acceptable strategy as described in the official docs).

Thread Thread
 
seanmclem profile image
Seanmclem

I see increasingly hooks described as an alternative to classes. But hooks are really just something you can use in functional components. Functional components are the alternative to classes and don't require hooks

Thread Thread
 
chrisachard profile image
Chris Achard

Correct, yes. Hooks are what enables function components to replace classes though- otherwise you can have local state. You could do everything in redux though say, and you wouldn’t need ‘useState’

Thread Thread
 
seanmclem profile image
Seanmclem

Hooks help functions replace classes only when those class components used state or life cycle. Otherwise it could have used a functional component all along and that's always been the alternative to classes. I'm not sure what my point was anymore but it's fun to discuss

Thread Thread
 
chrisachard profile image
Chris Achard

:) Yes - you're correct; the main use case for hooks is state or lifecycle (useEffect). You can also use useRef for reference though, useContext for context, and a few other things - but useState is probably most of the usage.

Collapse
 
tobi4161 profile image
Tobias Dixen

I don't think you can update state as you do in 7. If you set state derived from the current state, you should pass in a function which takes the previous state as parameter and returns the new state:

setCount(prevCount => prevCount + 1)
Collapse
 
chrisachard profile image
Chris Achard

That's important if you're doing multiple setCount calls or async ones, yes absolutely. With just the one, it's fine to use the previous value.

But yes! That's a good point for the next course :) Thanks

Collapse
 
francosirena profile image
Franco Sirena

Hey Chris in order to keep your teachings high quality I would strongly suggest for you to change the number 7.
Clicking thrice fast enough in the button can already cause an inconsistency between clicks and count value.
I have to remember people all the time that setState is an async action, and we often find flaky tests because of patterns like the one you're using, so, please, for the sake of newcomers doing the right thing. Change it to use the callback syntax.

Thread Thread
 
chrisachard profile image
Chris Achard

I'll have to test that, yeah - I often forget about the callback syntax myself :/ so it would be good for me to remember too! Thanks for the tip

Collapse
 
chrisachard profile image
Chris Achard

🤣 - My goal is to get people "over the first hurdle" - and really, the core of React isn't that big!

There is obviously more you need to know to write a full app, but I tried to fit in the base of what I use everyday. Hope it helps!

Collapse
 
_martinjose28_ profile image
martin jose

This post is amazing. I've been learning react this week, I am feel so comfortable creating a simple UI, I already added authentication using okta, and make http request to an API that I build about 2 months ago (mongo, node, express).

I have to say I prefer classes instead of hooks. Idk it seems more complicated I know that things become easier when we try. But for now I will keep using classes if I need to work with state. (BTW in this post finally I understand how to work with hooks ) thanks (y)

Collapse
 
chrisachard profile image
Chris Achard

That's awesome! Glad it helped

Yeah - classes are totally fine! Both classes and hooks are fully supported - so if you like classes better, then go for it :)

Collapse
 
nibble profile image
Joseph Mawa • Edited

Concise explanation. Simple to grasp. Thanks a bunch for the article. One quick question though.
Why does esLint give a warning whenever i use a variable defined outside, inside the effect without passing it as a dependency. Like:

   useEffect( () => {
       fetch(url)
      .then(res => res.json())
      .then( data => console.log(data))
}, [])

url is defined outside and obviously i want to fetch the data once after initial render but esLint gives a warning requiring me to pass it as a dependency. Does it mean i can't use a variable defined outside the effect if i don't pass it as a dependency?

Collapse
 
reneschwarz222 profile image
ReneSchwarz222

I have just seen your lessons and reactscreencasts.
Really, I have learned about react. Thank you very much.
Certainly, you are very excellent developer.
I'd like you to explain to me about the difference between react and react native.
I hope you to reply.

Collapse
 
surajkamdi profile image
Suraj Kamdi

Nice post.. 👍🏻

Collapse
 
sonicoder profile image
Gábor Soós

It is awesome how short and definite it is. Good job!

It has made me think about creating it for Vue and Angular 🚀

Collapse
 
fredkodye profile image
fredkodye

This was very helpful.

Thanks for your contribution @chrisachard .

Collapse
 
chrisachard profile image
Chris Achard

Glad it helped!