Get started with React! (with Hooks)

This course gets you up and running with react in **under a minute** by using codesandbox.io to skip the painful process of setting up your dev environment. 

You'll learn:

- How to write React code with JSX
- How to "think in React"
- How to use local state to store changing data
- How to pass data from parent components to children components using props

So get started now!  You need some javascript and HTML experience, but no prior React experience is needed.

Go to codesandbox.io and start a new sandbox using the "React" template

Then, you can edit the HTML (which is actually a special form of javascript called JSX) to make your first custom component!

CodeSandbox is great because it skips the need to set up your on development environment - so you can get started super quickly.

Write Your First React Component with CodeSandbox.io

The React UI loop follows these steps:

1. You have data
2. That data gets displayed
3. The data updates (by user input, or a fetch from the server, etc)
4. The UI updates

The React "magic" is in step 4 - React automatically updates the UI based on your changing data in a performant way.  That means you can focus on your data and UI layout, and NOT on how you would have to update the DOM to show those changes.

How React Works

Every UI on the web can be thought of as a tree of "components".

Break down your UI in your mind by separating out "like" components.  Those are what you'll turn into React components for displaying your data.

Think in React by Breaking Your UI into Components

React components are functions that return JSX (which looks like HTML, but is actually a flavor of javascript).

Once you create a new function component that returns JSX, you can then use it from inside of another component by returning it like any other component.

Write a Custom Function Component in React with JSX

You can reuse your custom react components multiple times and build them into a tree of components like this:

```
<Greeting />
<div>
  <Greeting />
</div>
```

Notice that the `<div>` tag contains the `Greeting` tag as a child, but the `Greeting` tag contains no children - so it requires the trailing slash (`/>`) so it can be a "self closing" tag

Building a Tree of UI Components in React with Children or with Self-closing tags

To pass data from a parent react component to a child react component, we can supply "attributes" to the JSX tags like:

```
<Greeting name="React" />
```

That `name` attribute is then available in the `Greeting` component as a `prop` (which is an object passed in as the first argument to the react function component.

That means we can display that name from the `props` argument like this:

```
function Greeting(props) {
  return(<p>{props.name}</p>)
}
```

And so you can customize any react component by passing data down in the form of that props argument.

Reusing Custom React Components by Passing Data Down as Props

Data inside of a react component that can change (with user or server interaction) is called `state`.

import `useState` from react, and then we can use that function to create some local state by calling it with a default value:

```
const [count, setCount] = useState(5)
```

`useState` returns an array of two items: the first is the current value of the state, and the second is a function that we can use to update that state.

Create State Data that can Change in a React Component with useState

After creating some state with `useState`, we can call the set function to update the data in local state, which will automatically "re-render" the component, and update the UI.

To do that, we'll first create a new function that will update the state that we want:

```
const updateCount = () => {
  setCount(count + 1)
}
```

and then we can pass that `updateCount` function into the `onClick` of a button:

```
<button onClick={updateCount}>Click Me!</button>
```

which will then call `updateCount` once clicked, which will call `setCount`, which will update the `count` state, and automatically display that update on the UI.

Create a Button in React that Changes Local State and Automatically Updates the UI

To display a list of items in react, we can `map` (or loop) over that list and return JSX from inside the map function:

```
    <div>
      {
        props.items.map(item => {
          return <p key={item.id}>{item.title}</p>
        })
      }
    </div>
```

Remember to always include a `key` attribute though! That lets React keep track of each list item internally, which gives you better performance, and may save you from subtle bugs

Display a List in React by Looping Over an Array of Items

There are two main (default) ways to add styles to React components:

First, just normal CSS classes can be added to react components by setting a `className` attribute:

```
<p className='big-text'>BIG</p>
```

(It's called `className` instead of `class` because "class" is a reserved keyword in javascript)

Second, "inline styles can be added as javascript objects to the `style` attribute of a component:

```
<p style={{ fontSize: 20, color: 'blue' }}>Blue</p>
```

Notice that the "double curly braces" represent a javascript object being created _inside_ of JSX, and also that the css attributes are camel cased.

Adding Styles to React Components with CSS or Inline Styles

**🚨 The correct url is now "https://swapi.dev/api/people/"**

Whenever doing a side effect (like fetching data) in React, we can use the `useEffect` hook to perform that action and then set state afterwards.

So we'll fetch some data inside of useEffect like this:

```
  useEffect(() => {
    console.log(props.id)
    fetch("https://swapi.co/api/people/"+props.id)
      .then(response => response.json())
      .then(result => setData(result))
  }, [props.id])
```

Caution! make sure to set the dependency array (the second argument to useEffect) to contain any data that you use inside of the `useEffect`.  Otherwise you could end up with an infinite loop as the useEffect will run every time the component in re-rendered.



React Crash Course with Hooks

Instructor

Course Content