Write Your First React Component with CodeSandbox.io

Chris Achard
InstructorChris Achard
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years 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.

~ 8 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today