Course: Section

Get Started with Modern React: Intro, Setup, and ES6 Basics

Episode: Title

S01・V02: Online Playgrounds

Date Created: July 17th, 2019
Last Updated: 27 days ago

Objectives
  1. We will show you how to use the CodePen online playground.
  2. We will show you how to use CodeSandbox.
Watch Video
Duration: 3m 31s

Online Playgrounds

If you’re interested in playing around with React, you can use an online code playground. We will show you two online playgrounds:

  1. CodePen, and
  2. CodeSandbox.

CodePen

The URL is https://codepen.io.

Click on the “Start Coding” button near the top left of the webpage. Click on the “Settings” button near the top right of the webpage. Click on the “JavaScript” tab in the “Pen Settings” modal.

Now, click on the selection input labelled “JavaScript Preprocessor”. Select the “Babel” option. Babel is necessary for writing JSX in React. We will talk about JSX in detail in Section 2 of this course.

Now, search for “react” in the search bar under “Add External Scripts/Pens”. Select “react”. Next, search for “react-dom” in the search bar. Select “react-dom”, which we will use to render React elements to the DOM. We have now finished with the Settings. Close the modal.

Within the “HTML” box on the left, add a div with an id of root.

<div id="root"></div>

Now, we can render a React component to the DOM.

We will use a simple “Hello, World!” example, which we will explain in Section 2, Video 2. Click on the “JS” box on the bottom left.

Next, type the following:

ReactDOM.render(
  <h1>Hello, World!</h1>,
  document.getElementById('root')
);

We now can see “Hello, World” render to the page. You can try out React by editing the code in the “JS” box.

CodeSandbox

Let’s now demonstrate how to create a React playground in CodeSandbox. The URL is https://codesandbox.io.

Click on “Create Sandbox” on the top right of the webpage. Now, click on the “React” template.

This template already has a React component rendered to the page. You can try out React by editing the code in index.js.

Summary

We showed you how to use the CodePen online playground, and we also showed you how to use CodeSandbox.

Next Up…

In the next video, we will cover how to try out React without using JSX syntax.