Write Your First React Component with CodeSandbox.io

Chris Achard
InstructorChris Achard

Share this video with your friends

Send Tweet
Published a year ago
Updated 2 weeks ago

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.

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.