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

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.

https://app.egghead.io/api/v1/lessons/react-write-your-first-react-component-with-codesandbox-io/subtitles

Chris Achard: [0:00] For this React crash course, we're going to be using CodeSandbox.io. If you want to follow along, go to codesandbox and then click Create Sandbox, and then, in the Overview, you can click the React template.

[0:15] Here we go. We have the files, on the left side here, which we'll minimize, our code, and our browser. We can edit the code to say Hello React, and when we save it, it re-runs, force the Sandbox, and we get to see Hello React.

[0:35] To make a nappy centered in this big browser window, we can hit Command-B and type in styles to get to styles.css. We will just remove the text-align: center and save it again, to line it up on the left.

[0:49] That's it. Congratulations! You've written your first React component.

Write Your First React Component with CodeSandbox.io

Share this video with your friends

Course

React Crash Course with Hooks