Use Codesandbox to Start a New React Application

Instructor: [00:00] We're going to use codesandbox.io to create a new React project. When you first open CodeSandbox, you'll see it provides you with this constellation of cubes spinning in space over here. Each of these cubes represents a different kind of template that you can open a new CodeSandbox with.

[00:18] We want to start with React. I'm going to go ahead and click the blue cube and then say, "Open React." Inside of a new CodeSandbox, you have three different panes. On the left-hand side, you see your project configuration.

[00:32] This includes things like the template that was used to create this project, the files that exist within that template that are created automatically for you as well as a list of dependencies that your template provided you with to start out with. You can see in this case we used Create React App to start the project. That's something that CodeSandbox does under the hood for you.

[00:51] It created several files including an index.js, a styles.css, and those are both in the source folder, and a package.json. We can look at each of these independently in the center view, which is our file view. This gives us a fairly typical tabbed interface that we might be used to from our favorite code editors.

[01:10] Inside of those, you can see we get syntax highlighting and all that nice stuff that we expect from a full featured editor, which CodeSandbox totally is.

[01:19] On the right-hand side, you can see this output window. The output window has several options. We're showing the browser right now. You can see, "Hello CodeSandbox. Start editing to see some magic happen."

[01:28] We'll go ahead and listen to that. We'll say, "The magic is real." You'll see that updates instantly, almost, over in your browser window. That's pretty nice. In addition, we have a console, so you can do things like console.log, hello world. You can see the console actually logs.