Thread by @chrisachard

🔥 Learn React in 10 tweets (with hooks) 👇

1/10

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! 💯

2/10

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

3/10

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 HTML mixed into JS, but JSX is actually one of the things that makes React awesome 🦄

4/10

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

5/10

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.

6/10

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 👇)

7/10

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")

8/10

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

9/10

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

10/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.

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 👇

reactscreencasts.com/crash_courses/…