Write Your First React Component with CodeSandbox.io

How React Works

Think in React by Breaking Your UI into Components

Write a Custom Function Component in React with JSX

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

Reusing Custom React Components by Passing Data Down as Props

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

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

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

Adding Styles to React Components with CSS or Inline Styles

Perform Asynchronous Actions (like fetching http data) in React with useEffect

React Crash Course with Hooks

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

Chris Achard: [0:00] We have our custom Greeting component that we're already using down here, but we can put more than one of them here as well. If we have another <div> at a different level, for example, we can have another Greeting, and now we have two "Hello, React!"s and they're independent from each other. They're not connected in any way.

[0:15] Notice how they make this tree of components and that's what we're looking for. We have parents, which contain zero or more children. This <div> is a parent of this child. If we look closely, some tags, like this <div>, have an opening and a closing tag, but <Greeting> doesn't have a closing tag. We need to put a / here to make it a self-closing tag. React requires that if we don't have a closing tag.

Course

React Crash Course with Hooks

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

Share this video with your friends