React App from Scratch in 5 Steps

Article summary: Create a React app from scratch, the old-fashioned way. Features hot reloading with webpack and automatic browser refresh using Browsersync. View GitHub repo here.

React was originally built with these logs back in 1972.

There are a lot of starter projects for creating a react app, like create-react-app . The problem is, these can have a lot of bloat and can leave you in trouble when you don’t understand what’s going on. Today, we are going to go through an entire React build from the ground-up, plain and simple 😆. This is important for you to do because you need to understand how the tools that React relies on fit together. If you don’t, you are lame.

Also, this is our format: do first, explain last. If you’ve never created a node application before, go to the end of the article to view the Prerequisites section for the tools that you must have for the below items to work.

1) Create directory & Initialize the project

First, you need to kick off the whole project with a shiny new folder. Then you need to run the npm initialization, which will create a package.json file (you don’t have to answer all the terminal questions, by the way):

mkdir react-scratch-app

cd react-scratch-app

npm init

2) Install all dependencies

Next, you need to install all of the libraries that make a React app work. Run these instructions in your terminal. When they are finished, you should see them listed in your package.json file:

Babel, Webpack, Browsersync, React

npm i -D babel-core babel-cli babel-preset-env babel-preset-react

npm i -D webpack webpack-cli webpack-dev-server babel-loader

npm i -D browser-sync browser-sync-webpack-plugin

npm i -s react react-dom

Note: i is short for install. -s is short for --save, which installs the node module locally and saves the name under dependencies in your package.json file. -D is short for --save-dev, which does the same, but saves the name under devDependencies.

3) Create structure: folders and base files

Put these directories and files in your new folder (tip: use the mkdir and touch commands in your terminal to do this). We will fill them in later:

Basic React project structure

4) Populate configuration files

Fill in the files below exactly as the appear; these tell the tools what to do:

.gitignore

.babelrc

webpack.config.js

5) Populate the project working files

These are the files that make the app actually render; copy these into yours:

public/index.html

src/index.js

src/App.js

6) RUN THE APP!

Pretty straight-forward, right? And you thought you wouldn’t be able to do it. Well, congratulations; you aren’t a lame-o after all! From your root project directory (react-scratch-app), run the following command:

webpack-dev-server

You should see the output from your file compile process in your terminal. And then you should see your browser automagically open and load this url: localhost:8080. If you see your text “This is an incredibly complex react app!”, then you’re golden! If you got some errors, see the Troubleshooting section further down 😢.

Make a change to your App.js file (change up the sentence or whatevs…); you will notice that your browser automagically reloads thanks to Browsersync. Whoa; I just did it right this moment; it was so rad, that I’m jumping for joy right now and I’m leaving to go take a walk to process...

*In-depth section, as promised

Babel

Babel takes your javascript es6 code that you wrote and compiles it down to es5 javascript that all browsers can read (to prevent browsers like the $?!# Internet Explorer from crying like a baby).

Webpack

Webpack is a build tool; it builds your javascript libraries and files into one massive hunk of javascript, that gets violently thrown into your index.html page. We also use webpack-dev-server, which builds your code and creates a simple server for your app.

React

React is just a javascript library written by Facebook that spits out html and handles DOM manipulation in a more manageable way. It allows you to write components that mix javascript and html (jsx), and then renders them to the screen. It just makes the whole friggin’ web thing more easy, stable, and way more manageable. It’s not needed for every web project, just ones that have a lot of dynamic content and user interactivity (which can be a pain in the ass to manage using the traditional way).

How are my assets getting served?

Great question. webpack-dev-server is running on port 3000. In the webpack.config.js file, you will see the contentBase location set as public/. This is what sets your index.html file to load in the browser. If you had any assets like images etc, they would also be included here. See the publicPath listed as http://localhost:3000/dist/ ? This is the reference point for all of your React code in bundle.js.

* Prerequisites (ignore if you’ve already used node, brew etc)

Before you start lathing and sawing your scrap pile, you need to make sure that you already have these tools in your workshop. I recommend that you take these at face-value; don’t delve in and try to understand all of their intricate parts, because you will just get pissed off and won’t ever actually write any React code 😵. They just need to work.

1. Xcode command line tools (you have to have these for Homebrew)
2. Homebrew (easily install/uninstall programs on mac)
3. NVM (install & use multiple Node versions, includes NPM)

* Troubleshooting

Here are some possible scenarios you may run into that make you go “WTF mate”. Just be patient; you’ll get it eventually, I promise 😅.

When I run webpack-dev-server, it says “Command not found.”

This is a PATH error. If you want to fix it quickly without hassle, just reinstall it globally with this command: npm i -g webpack-dev-server.

When webpack-dev-server is compiling, I get an error that a Babel library was not found.

This is related to the above webpack error. You should fix it quickly by also installing all of the babel dependencies globally: npm i -g babel etc.

I don’t see my bundle.js file after the compiling finishes, but my content is still being served. Where the F is it?

webpack-dev-server actually stores your bundle.js file in memory while it is running. As soon as you kill the server, it kills its in-memorybundle.js. To compile and output your physical file in the /dist directory, you need to run webpack. BUT you might ask, what happens when both the webpack bundle.js and my bundle.js file in /dist are present? Well, webpack will serve the one that’s in memory over the other.

WHY IS IT CALLED REACT?

Because it reacts to you.