HOW TO: Setup A React App From Scratch in 2021

Usually, these types of articles give you a list of commands to run and some pre-made configuration files that aren’t always fit for use. They also go out of date very quickly. In this article, I wanted to provide a better resource, one that will help you to understand exactly what is happening, so that you can make your own informed decisions, not just now, but also in the future.

It is important to understand exactly what is included in a JavaScript toolchain to put your own together. Generally, a JS toolchain is made up of three key components:

  • A package manager, this gives you access to a huge number of third-party packages that you will need to build your app. It also manages dependencies for you and provides an easy way to update and install packages. The two most popular package managers are yarn and npm.
  • A bundler will allow you to write modular code and bundle it together in small packages. This provides you with the ability to optimise your site and improve page load times in addition, for larger apps this can be a very useful tool, not to mention the SEO benefits that can be gained by faster page load times. I usually use webpack, however parcel and rollup are both valid options here as well.
  • A compiler, this lets you write modern JS code that will work across older browsers. The benefit here is that you can use modern JS features that will still work everywhere. I usually use babel.

There are more than just these three in a production-ready environment, but we’re just focusing on what you need to start writing code in this article.

JS Toolchain Diagram

Now that we know which components we need to setup our development environment, we can jump right in.

Choosing and installing a package manager

In my personal experience, the average developer won’t notice much of a difference between yarn and npm. They both do the same thing, provide the same access to the same repositories and generally operate in the same way. That being said, there is a very good reason that yarn was developed in the first place. You can read about that here. I usually use yarn in my projects simply because it is what I have always used and it is what I am comfortable using, it is generally faster too. It is important to remember that migrating between npm and yarn is easily done also (depending on how large your project is), so changing your mind isn’t going to cause too many headaches in most scenarios.

If you’re still unsure on which one to use, try setting up a project with npm and then with yarn. You’ll notice that there isn’t much difference, except in the .lock files that are generated, and maybe a very small difference in speed, but this may inform your decision further.

To install your package manager on your machine, you’ll need to follow the relevant guidance in the documentation:

Instructions for NPM can be found here.

Instructions for Yarn can be found here. (You need to install NPM to install Yarn).

Once you have your package manager of choice installed and working, you are ready to move on to the next section.

Setting up a bundler

My bundler of choice is webpack. In this section, I’ll walk through setting up webpack for local development purposes. First up, create a new directory for your web app and navigate to it in your terminal. Then initialise yarn in the directory and install webpack as a development dependency:

yarn init -y
yarn add webpack webpack-cli -D

You should now have a pacakge.json file that looks something like this:

Along with a yarn.lock file and a node_modules directory in your project directory.

Directory structure

Now go ahead and create an index.htmlfile at the root of your project, and create a new directory called src with a new file inside it called index.js .

Your file structure should now look something like this:

Initial files structure

Now let’s hook up the JavaScript file to the HTML file, add the following code to your index.html file:

index.html

And then add the following code to your src/index.js file:

Hello, world!

Next, adjust your package.json to avoid accidentally publishing it, it should look like this:

You should now be able to open your index.html file in a web browser and see a JS alert saying hello, webpack world!

We still aren’t using webpack yet, though. Let’s make some changes so we can begin to use it.

First, create a directory called dist and move index.html into it. Your directory should look like this:

Creating a distribution directory

Next, alter your index.html file so it points to a script called main.js instead of ./src/index.js . This file will be generated by webpack for you when you run it. It should now look like this:

Now go ahead and run yarn webpack in your terminal. The output should look like this:

We can see a warning in the output here, this is because webpack expects a mode to be set. Don’t worry about this just yet, we’ll configure this warning out later.

For now, just take a look at your dist directory. It should now have a file called main.js in it. If you go ahead and open up dist/index.html in your web browser you should see the alert once again.

Now that we’ve got webpack working, let’s start to play with some configuration options that will get rid of those warnings and help to speed up our development process a little bit.

First up, create a new file called webpack.config.js in the root of your project:

Your file structure should look like this:

Now try running yarn webpack in your terminal again. The output should now be warning free:

Now that we’ve eliminated our warnings, let’s go ahead and setup hot module replacement to help us iterate more quickly. Hot module replacement exchanges, adds, or removes modules while an application is running, without a full reload.

Go ahead and install webpack-dev-server with the following command:

yarn add -D webpack-dev-server

This allows us to serve our app locally and use HMR.

Next, update your webpack.config.js file to include our devServer configuration:

Finally, let’s add a script to our package.json so we can easily run this from the command line.

Next, run yarn webpack:development in your console. This should build your app, serve it, and automatically open it in a tab in your browser. If you don’t like the auto-open functionality you can remove the open property from your devServer configuration in webpack.config.js . You can then manually go to localhost:8080 to access your running app.

See more on webpack configuration here if you’re looking for additional behaviour.

The last step is to set up our compiler. This step is important because without it, webpack cannot parse any JSX. We’ll use babel for this, let’s get it installed:

yarn add -D babel-loader @babel/core @babel/preset-env @babel/preset-react

Once we’ve installed these, we can update our webpack.config.js to start using them.

Finally, we can install react and react-dom and begin using it in our app.

yarn add react react-dom

Now update your src/index.js file to render a simple React component:

Finally, we’ll need to add an element to mount our component onto in dist/index.html

Now go ahead and run yarn webpack:development again, it should open your fresh React app up in your browser:

Now that you’ve got a React app up and running, you should be able to go ahead and start developing as you please. If you’re looking to add assets like fonts and images to your app, check out webpack plugins. You can also specify a webpack config file for production separately to the one we have created in this tutorial for the development build and then use scripts in package.json to run the preferred config with the webpack--config flag.

Hopefully this document has given you a good understanding of how the toolchain fits together and allowed you to set up your own app from scratch. For extra credit, try swapping out one of the components in the toolchain for an alternative solution and let me know how it goes!

JavaScript Engineer