React - Code Sandbox and Local Development

Web Development 2 WEBD-2008

Red River College



Table of Contents

Introduction

Objective

Module Plan

Code Sandbox

70zge-ke_400x400

Let’s experiment with React and JSX using the Code Sandbox online IDE :

  • Sign up for an account using your GitHub account.
  • Create a new sandbox using the “React” template.

Code Sandbox is like VS Code in your browser.

It includes support for npm modules and will automatically bundle and transpile our code.

Code Sandbox Project Files

Take a moment to explore the Code Sandbox React template files:

Hello Code Sandbox

Let’s add our Hello component to the project.

Create a new file called Hello.js in the src folder:

import React from "react";

export default function Hello() {
  const greeting = "Hello Component";
  return <p>{greeting}</p>;
}

Update App.js to look like this:

import React from "react";
import Hello from "./Hello";

export default function App() {
  return (
    <div>
      <h1>Hello CodeSandbox</h1>
      <Hello />
    </div>
  );
}

You should now see the contents of the App component in the Code Sandbox preview window.

Please take a moment to read through the comments included with this pre-made version of the same project:

What's Next?