Yet another Beginner’s Guide to setting up a React Project — Part 1

React has gained considerable momentum in the last few years and has turned into a mature and stable UI library. It has shown consistent growth since its initial release in March, 2013 by Facebook.

Despite its growth, setting up a React project is a daunting task. To alleviate that Facebook released create-react-app. It can create React apps with no build configuration. However, for a beginner, that may seem like a lot of magic. Also, I personally feel this is not a solution. The problem of understanding the build configurations and various parts of a project is still not resolved. Rather, create-react-app creates another layer, a facade to hide the complexity.

In this article I will set up a functional React project from scratch. This post is best suited for beginners who want to understand the various parts and how they work in synchrony to give us a fluid development experience.

Let’s get exploring.

I am going to use Yarn instead of npm to install the various modules needed during the setup. If you don’t have yarn, you can see the installation instructions here.

Open your terminal and type the following.

The mkdir (make directory) command creates a new react-project directory and cd changes the current working directory to it.

Now run yarn init in the terminal. Yarn will ask a few questions regarding your project and produce a package.json file. The values in the parentheses are default values and you can just press enter to leave them unaltered. This file contains all the information that you entered and lists all the dependencies that are required to develop and run the project.

Result of yarn init

Installing React and ReactDOM

We have a directory to hold our project. Now we install React and ReactDOM. Type yarn add react react-dom. The add subcommand installs a module in the current project. You can specify more than one module by separating them with a space. Here, we are installing react and react-dom.

Yarn will now fetch the modules including their dependencies and install them. After the installation, you should see that the react-project now contains a directory named node_modules and a file yarn.lock.

node_modules is the actual storehouse of all the modules (and their dependencies) in the current project. In most cases, this directory is managed by yarn, or npm if you used that. You can read more here.

Yarn also generates the yarn.lock file to keep information regarding the module dependencies and their versions. Think of it like this — this file creates a snapshot of all the dependencies that are currently installed. Every time you add or remove a package, this snapshot is updated to reflect the current state. You can delete node_modules and run yarn install (or equivalently just yarn) and node_modules will be recreated.

You may be wondering why we installed react and react-dom. The authors of react made a distinction between the library which defines and creates the view components (i.e React) and the library which renders (i.e ReactDOM) the aforementioned components. The DOM in react-dom is the same as Web DOM. Rendering the DOM means creating and displaying the webpage. This kind of code organisation allows react to be used on different platforms by simply changing the renderer. React Native is an example of this. Instead of React being rendered in the browser, the same components are rendered in iOS and Android. Yet another example is ReactVR.

Webpack Development Server

At this stage, we have a way of creating and rendering React components. However, we don’t have any method of sending these components to the browser before it can show them. That is where a web server comes in. We will be using a development server called webpack-dev-server. Type yarn add -D webpack webpack-dev-server. The keen observers would have noticed that we are installing webpack and webpack-dev-server both. Also, the -D is there doing something.

We are installing webpack because webpack-dev-server depends on it. Also, we will be needing webpack a little later. The -D specifies that the modules will be installed as development dependencies. Generally, a project needs two types of module dependencies. Production and Development. Development modules will not be used in production i.e when the package is complete or when the end-user is using the product. However, a developer hoping to make a change in your package will need the development dependencies as well. To this effect, package.json will have an extra key called devDependencies to list the packages needed during development.

Creating Your First React App

Create two files in the react-project directory: index.html and index.js. You can do this via the terminal by typing touch index.html index.js in Linux and macOS. In Windows, the easier way would be to open an editor and ‘Save As’ the files as appropriate names and types.

Using your favourite editor, enter the following in the index.html file.

This is a simple HTML file.

• It has one div which has the ID root.
• It also has a script tag which loads the bundle.js.

This file will contain the React library, the renderer and our components to display.

In the index.js file, enter the following.

Lines #1 and #2 import React and ReactDOM. In Line#5, we create an element of type div using createElement and set the inner value to be ‘Hello World’. Line #5 is an equivalent representation of <div>Hello World</div> in React.

Line#6 defines the place where the rendering will take place. In this case, the div tag of our index.html whose ID is root.

Line#4 is a function invocation which takes two arguments: the Component/Element to render, and the place where it will be rendered. Hence, both the values are appropriately passed.

Running the React App

At this stage, your react-project directory should look like this —

react-project directory contents

Before you can see the marvel of your work, you need to do one more thing: Run the server. If you type webpack-dev-server in the terminal, you will get the error command not found. This happens because we did not install webpack-dev-server globally. We need to use npm scripts or equivalently yarn scripts to run webpack-dev-server. Along with it, we also need to provide webpack-dev-serve an entry file. For now, think of entry file as the file which will be served by the dev server. We pass the filename as command line arguments to the dev server as shown below.

Open package.json in your favourite editor and make changes such that it results in this file —

Focus on lines #6 to #8. We used a key called scripts and its value is an object. In this object, we specify the names of the commands and the actual command that the name will execute as key-value pairs. For example, start executes webpack-dev-server index.js. The names are arbitrary and can be anything. More info here.

Now, in your terminal type yarn start to execute the command associated with start. If everything goes well, then you should see something like this —

Result of running yarn start

You can see now that the project is running at http://localhost:8080/.

Navigate to this link and you’ll see ‘Hello World’ printed.

Result of all the hard work!

This brings us to the end of part 1. Theoretically, you can build any React applications using only the tools listed above. However, in part 2, we will see how we can greatly simplify the development process by including linters, bundlers, JS transpilers, and other utilities.

Edit: Here’s Part 2.

Reach out to me @ Facebook