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
<script> tags are
automatically injected into the main index.html file for us. We'll look at the public/index.html file shortly.
Over on the left you can see the files and directories that have been generated by the boilerplate. The
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
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.
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
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.
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
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);
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-projectcd my-projectyarn start
If you want to use an IDE, check out our webstorm tutorial.
Under the hood magic