🔥 Learn React in 10 Tweets (with hooks)
Tags: react, javascript, webdev, beginners
Published: 2019-09-20 12:30:30

*This was originally posted as a twitter thread: [https://twitter.com/chrisachard/status/1175022111758442497](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](https://thepracticaldev.s3.amazonaws.com/i/hgqzh2cgbo2faqga0ohy.png)

# 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](https://thepracticaldev.s3.amazonaws.com/i/40ealcr41k0wtg9sy19x.png)



# 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](https://thepracticaldev.s3.amazonaws.com/i/uph1bif3qojy0lwiuybh.png)



# 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](https://thepracticaldev.s3.amazonaws.com/i/es71o3a09fezcbnmmprs.png)




# 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](https://thepracticaldev.s3.amazonaws.com/i/bmuerujdd797iij1cnic.png)


# 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](https://thepracticaldev.s3.amazonaws.com/i/oapcgaga6yjajw7xm0wn.png)


# 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](https://thepracticaldev.s3.amazonaws.com/i/kavph5dbus2dpf0s1atl.png)



# 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](https://thepracticaldev.s3.amazonaws.com/i/341nkcw7bd2ljzhv0kgq.png)





# 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](https://thepracticaldev.s3.amazonaws.com/i/v89i68ljh72u3jdfnghb.png)




# 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](https://thepracticaldev.s3.amazonaws.com/i/mawomuxia2wffv45rj9n.png)





# 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](https://www.reactscreencasts.com/crash_courses/react_with_hooks)

&nbsp;

**Like this crash course?**

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

Thanks for reading!