Simple React Development in 2020

Hi, aspiring React developer! 👋

Maybe you’re a jQuery developer looking to experiment with a modern framework. Or, maybe you’re an Angular developer wanting to see what all the hype is about. Maybe you’re a seasoned back-end or systems programmer looking to make the jump to front-end. Maybe you’re new to programming in general, but want to learn how to build dynamic web applications.

Regardless of your background, you’ve likely had a similar experience: React itself seems pretty straightforward, but the tooling and ecosystem is overwhelming.

You probably feel like this guy:

https://twitter.com/thomasfuchs/status/834481271443226627

I’ve seen and heard variations on this theme frequently. Especially for newcomers, React development can often seem like a complex maze of tools and libraries. Even experienced developers talk about how complicated modern web dev is, and pine for the simple days of just opening an editor and writing.

However, this is a solved problem!

Over the past few years, the React community has put a ton of effort into creating a tool that allows React developers to get up and running almost as quickly as downloading a dependency and opening an editor.

The goal of this guide is to help create your first React app. It shares a step-by-step process, from initial system setup through to deployment, without straying into tangent explanations that aren’t critical at this point in the learning process.

No prior experience with React or its related tools is required, although it does assume that you know the basics of working with a command line and git.

This is a living document, and I’ll be updating it as the landscape changes.

Last Updated: December 9th, 2019

The Quickest Start: CodeSandbox

CodeSandbox is an online REPL. It’s friggin’ amazing.

It lets you instantly bootstrap a React project with everything you need. It runs in the browser, but it supports multiple files, third-party dependencies… It uses VS Code as its editor, which is *wild. *It’s essentially a full development environment that runs in-browser, and I can recommend it without reservation. You can build a full application using CodeSandbox.

There is something to be said for having everything run on your local machine, so we’ll cover that as well. But if you’re looking for a rocketship-speed start, head over to CodeSandbox, and jump straight to Step 3.

Step 1: Install Yarn

Yarn is a package manager. It helps us manage our project’s dependencies.

If you’re new to programming, essentially you can think of this as a tool to help us easily download and use other people’s code.

Download and installation instructions are available **on the Yarn site**.

Once you’ve installed yarn, verify that you can use it on the command line. Open a new terminal, and run:

**But what about NPM? **You may have seen that NPM is the de facto package manager in the Javascript community, and may wonder why I’m suggesting Yarn.

Without getting too far off-topic, Yarn is a concerted effort by the community to improve package management. Internally it still uses the NPM package repository, so you can still install all the same packages.

Over the past couple of years, the default NPM client has improved. If you’re already comfortable with NPM, you can use it instead. Alternative NPM instructions will be provided as we go along.

Step 2: Create a React application

When people talk about complexity in React development, often they’re referring not to React itself, but in the build system and development environment.

They have a point — as React developers, we tend to build pretty complex dev environments and build systems. We suffer this complexity because it makes React development quicker and more enjoyable.

However, that complexity is overwhelming for those just getting started, and worse, it gets in the way of learning what’s really important: React itself.

Thankfully, there is a have-your-cake-and-eat-it-too solution. It’s called **create-react-app.**

create-react-app is a command-line tool, owned by Facebook and maintained by talented developers both at Facebook and in the community. It’s amazing. It abstracts away all the complexity and difficulty of implementing Webpack, Babel, a dev server, a production build process, and a thousand other tedious-but-critical things.

It’s zero-configuration by default, and doesn’t clutter up your project directory with a bunch of files you don’t understand.

Note: Eventually, you will want to spend the time learning how this works internally. There’s a lot of neat stuff you can do with Webpack, for example. Our top priority at the moment, though, is getting you excited about building with React, so we can defer this stuff for later.

Yarn comes with a built-in helper for using create-react-app:

yarn create react-app [your-app-name]

I’d like my application to be named cats-n-stuff, so I’ll run that:

*The actual terminal output is *a lot, so this screenshot cuts out a bunch of stuff in the middle.**

If you get an error starting with “A template was not provided”, it’s likely because you have an earlier incompatible version of create-react-app installed. Check out this StackOverflow answer.

If you’re using NPM instead of yarn, you can run “npx create-react-app cats-n-stuff” to achieve the same result.

This command does quite a few things:

• Downloads and installs create-react-app
• Creates a new project folder, cats-n-stuff (or whatever you name your app)
• Scaffolds out a new project, including everything you need to compile a production-ready app, as well as run a development server
• Installs dependencies

You’ll notice the output towards the end gives you a set of commands. Let’s start by following its instructions:

We should see the following output:

A browser window should also have opened, showing the following:

Let’s open our new project in our code editor. I’m using VS Code. You should see the following files:

Let’s go through them:

node_modules

This directory holds all of our project dependencies, like react and react-dom. It also includes all the dependencies needed to run our build system and development server. Sometimes, folks are alarmed by the size of this directory (~200mb), but it’s important to remember that it includes a whole bunch of dev tooling. Very little code is actually shipped to the user.

public

This directory holds static assets, stuff like our favicon and search-engine preferences. It also houses our project’s only HTML file. Because React is all-javascript, you only really need the HTML file to update the stuff, like title and meta tags. This can always be modified with React as well, but for now it can be simplest to add your own