Hello React with Code Sandbox

React on CodeSandbox

Totally new to React and just want to try it out? The fastest way to get your own React app up and running is to use an online IDE like CodeSandbox.io. Online IDEs have come a long way in recent years and can be great tools for practice or to share working code.

If you'd rather start with a standard setup on your local computer, check out our professional setup with Webstorm.

Create a React Sandbox

After arriving on CodeSandbox, you should be able to see a button that says Create Sandbox.

Then, you can click React from the box of popular templates.

You will be immediately transported to a screen with a text editor and browser running some code. You're done! You now have a boilerplate generated off of the create-react-app boilerplate. Working off of an official boilerplate like create-react-app is important as it insures our project is initialized with the latest React version and the React team's best practices.

Edit the code

Don't be shy! Start editing the code in the editor. You will notice that your changes instantly are reflected live on the mock browser to the right. Try changing the inner contents of the header tag to <h1> Hello [your name] </h1>.

Entry point file, src/index.js

Typically known as the "entry point", the index.js file is the first JavaScript file that runs for our application. This one file mounts our main React "App" component, which will subsequently import and render its own React components. You can think of this as the "top-level" or "root" component.

You may be wondering why we don't have to write any HTML to import this file. The JavaScript <script> tags are automatically injected into the main index.html file for us. We'll look at the public/index.html file shortly.

File System

Over on the left you can see the files and directories that have been generated by the boilerplate. The public directory is commonly used across web development as the root directory that will be "served" by a web server to "clients", or users of your website. The index.html is sent as the html file your browser reads, so this is truely the first code that runs for our application. We can edit this to insert scripts and stylesheets, add meta tags, and so forth.

The src directory is commonly used to contain our "source code", or the code that will ultimately get compiled and bundled into our public directory at build-time. We will create all of our custom application code in here, creating directories as we see fit.

Importing libraries

Back to our index.js file, we can see that we import React and ReactDOM. It will be necessary to import React in every file that uses JSX, the React component syntax, but ReactDOM is only necessary for mounting the first React component, App.

The root React component, App

To create our first React component, we simply create a JavaScript function named App. Inside this function, we return some JSX (special HTML we use inside JavaScript), wrapped in parenthesis. We could also directly return the JSX without parenthesis, like return <div>.., but its always better to wrap in parenthesis so we can move that first element to the next line, as we're doing here. This makes the last closing HTML </div> tag line up with the first <div>. You'll want to keep the indenting consistent so your code is as readable as possible.

Indenting

By default, CodeSandbox has set up a 2 space tab size, so tabs are converted to 2 spaces. Each tab corresponds to nesting a level deeper inside the app. For example, inside the function App, we indent 1 tab for statements in this function. In the return statement's JSX, we indent the <div> a tab as to denote it is nested within the return statement, and inside the div, we indent yet again to show these are child components. This entire component could be on one line, and it would run just the same. So indenting is all about maintaining consistent and readable code style.

Prettier code formatting on save

Prettier is a popular code formatting tool. CodeSandbox has this set up in this default project, as you can observe by pressing CMD/Ctrl + S, which forks your repository, and formats the code for you. If you mess up the indenting, Prettier will come to your rescue by re-indenting your code, and a whole lot more.

Where React mounts the first component

You'll find the below snippet of code in your newly created React project. This is where React attaches itself to a root HTML element.

We use the document's query-selector to search for an element with the id "root" (found in our public/index.html file). Then, we use ReactDOM to render our React component App on the HTML DOM node rootElement.

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Next steps

The App will be rendered inside our root div, and the HTML element of the App will be the same div that we returned from the function. Inside this div we have two header tags, which are rendered inside this div.

The next steps for our app is to create some new components in other files, which we can then import into our App.js file. This way, we're separating our functionality into files that make sense for what we're building. Continue to our creating react components tutorial next.

Standard React Install

You can use npx command locally to build a React project with create-react-app:

npx create-react-app my-project
cd my-project
yarn start

If you want to use an IDE, check out our webstorm tutorial.

Under the hood magic

This boilerplate is actually doing a lot behind the scenes despite its minimal end-result. You should know that create-react-app relies on its own package react-scripts to set up the complex build process called transpiling. This is a fancy way of saying that code is converted from React-friendly syntax JSX to classic JavaScript code that the browser can understand. It uses Webpack and Babel to accomplish this. Fortunately, we rarely have to pay attention to these technologies and they just work their magic in the background.