Why React?

For the uninitiated, React allows us to build extremely fast web apps through the use of the Virtual DOM — it essentially renders only what it needs to. Providing a lightweight alternative to the traditional way of working directly with the DOM.

React also promotes a component based workflow, meaning your UI is essentially just a collection of components. This makes for a fantastic building experience! As you’ll build with modularity, your code will be in neat self-contained chunks. And it’s also very useful when working in teams, individuals can work on parts of a project, while still working collectively toward project completion.

Installation & Setup

There are a number of ways to get up and running with React. Firstly, we’ll take a peek at CodeSandbox and CodePen. If you want to instantly start playing around with code, this is a nice way to go!

We’ll then focus on spinning up a React project with Create React App — which gives you an awesome starting point for your projects, without the need to spend time setting up a build environment.

React in CodeSandbox

CodeSandBox is an online code editor which you can use to get a React project up and running in no time at all.

Go to https://codesandbox.io/s and click “React”.

Instantly, you’ll be in a React environment that has been configured with the create-react-app structure. We’ll look at this structure further on in the article! If you want to start coding without setting up a local install, this is a great way to go! Tasks such as transpiling, bundling and dependency management are all automated, and you can easily share the link of anything you’ve been working on!

React in CodePen

An alternative to CodeSandBox is CodePen. Many developers use CodePen to showcase their work by creating “pens” for quick code demos, or “projects” for when multiple files are involved. CodeSandbox is definitely more feature rich for working with React, however CodePen is also a fine solution.

I’ve created a CodePen React starter here:

Create React App

Create React App is a tool (built by developers at Facebook) that’ll give you a massive head start when building React apps. It handles all of the configuration, so you don’t need to know any Babel or Webpack. You just run the initial install & you’ll be up in a local dev environment, in no time!

Installing with Create React App

All we need to do is open up our terminal, and run the following:

npx create-react-app <app-name>

Where <app-name> is of course, the name of your app!

We use npx as it will download and run Node.js commands without installing them. If you don’t have Node installed, you can download it here.

So go ahead and run the above command to begin the install! Give it whatever name you like..