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

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.

https://app.egghead.io/api/v1/lessons/javascript-think-in-react-by-breaking-your-ui-into-components/subtitles

Chris Achard: [0:00] The key UI paradigm in React is components. Everything we're going to break into custom components, and then display that on screen. Here we have a TodoList and we wrap the whole thing in a container. Then we have a SearchBar, which is separate from the TodoList itself. Inside the TodoList there are four TodoItems.

[0:19] Within those components then, we also have the base HTML components. We have text inputs and checkboxes and strings. Those are part of our tree as well.

[0:30] In our sample app so far, we only have a <div> with an <h1> inside of it, but we can build a tree like this, and now we've created a tree of base HTML components which make up our entire React application.

Think in React by Breaking Your UI into Components

Share this video with your friends

Course

React Crash Course with Hooks