Step by Step Environment Setup of the React Developer – No Legacy, 2017 Standards

Originally written on October 25th, 2016. Last updated on January 10th, 2017. I have released another article on setting up ESLint with React and ES6. I highly recommend reading it after this article. I will place a reminder and a link at the end of this article as well so that you can continue focusing on the first steps.

You can read the other articles belonging to this series in chronological order by clicking here.

I recently started reviewing React applications of many software developers, who just got started writing React code. My common takeaway was that most developers don’t spend enough effort on creating their environment setup. The goal of this article is to act as a baseline for your application setup. Therefore, I will apply updates to this article on a regular basis.

When you read an article like this, always pay attention to the date when it was written. This is why I started the whole article with the date. Assuming the churn rate of JavaScript frameworks and libraries doesn’t slow down significantly, a three year old tutorial on this topic will be outdated without updates. Always pay attention to the date!

If your boilerplate is a year old, I suggest refreshing your knowledge. You may get some ideas about new things to try out.

You will also read about some major mistakes that developers make when it comes to installing modules globally, and failing to mention some dependencies.

We will first need Node, npm, and Git. Node and Git comes pre-installed in many operating systems already. If it is not the case for you, make sure you install them.

Step 1: Choose Your Text Editor or IDE

Technically, your editor is hardly ever a question in similar tutorials. It still makes sense to add this step to the list because of multiple reasons:

  • new promising contenders have emerged in the last two years
  • we need our editor to work with ES2015, and it should also support all syntactic sugar coming with React, namely, the JSX language
  • it is not obvious anymore which editor comes with the best developer experience

The goal of this step is not to give you an ultimate answer about which editor or IDE to choose. I will just enumerate some options you may have not heard about. I encourage you to do your own research, and customize your developer experience. Alternatively, you can just stick to your favorite for now, and wait for my article on comparing these four editors.

The most exhaustive list on IDEs and editors I have found is here. We will deal with the top four of the list. All four of them can be configured to work with ES2015 and React without problems and highlighting glitches.

WebStorm is the number one choice of most developers. It comes with a first year price tag of $129 for business use, and a $59 for individuals. Rates decrease to $77 and $35 respectively, starting from the third year. Many people brag about the productivity boost WebStorm gives you, including coding assistance, full support for React, GIT integration, other tool integrations, and debugging utilities.

WebStorm is the only paid solution. All other editors may be used for free.

Visual Studio Code gained popularity lately. The main benefit of VS Code is IntelliSense, intelligent code completion. Debugging is also supported. The critics of Visual Studio Code say that IntelliSense makes it very slow and resource-intensive.

Atom and Sublime Text 3 have been around for a while. Atom’s advantage is Git integration. Sublime’s advantage has been stability and very wide support of additional packages. In fact, Sublime Text can do everything that all the other solutions can, if you install the right packages.

Even though it’s not on the list, one editor worth watching is Facebook’s Nuclide. Based on the list of releases, Nuclide is actively evolving. Even though it has not reached version 1 yet, it is worth watching Nuclide as a possible contender for the future.

Once you have selected the editor of your choice, make sure you configure it to work with ESLint.

In some editors, you have to configure it to use the correct syntax highlighting for React, ES2015, and JSX. For Sublime Text 3 for instance, you can use the package babel-sublime.

Step 2: Initialize your application

Create a folder for your new project. Execute npm init inside the folder of your application. Provide the necessary details about your application by answering the questions in the terminal. Once you are done answering or skipping these questions, a package.json file is created in your folder.

Step 3: Install Production Dependencies

Production dependencies are the ones that you use on production, not only during development.

Install the newest versions of React and ReactDOM:

Once the installation is completed, package.json is automatically updated.

If you have experience with the earlier versions of React, the information may be new to you that the creators detached ReactDOM from React.

React and ReactDOM are generally used together. ReactDOM is a package for working with the DOM.

Step 4: Install Dev Dependencies

Dev dependencies are only used during development. They are not to be deployed when using your code in a production environment.

We will install the following dev dependencies:

  • babel-loader: babel module loader
  • babel-core: the core transpiler used for transpiling ES2015 and JSX code
  • babel-preset-es2015: ES6/ES2015 support
  • babel-preset-react: React/JSX support
  • babel-preset-stage-2: babel preset for some extra features such as destructuring
  • webpack: for bundling our packages for distribution and managing dependencies
  • webpack-dev-server: our development server

Many Frontend Developers think that including a development server is not necessary. After all, we just write HTML, CSS, and JavaScript, and all we need to do is to open our index.html file in the browser. Right? Wrong.

We will need some server side functionalities sooner or later. For instance, we need the http protocol to simulate state.

Webpack’s development server will do the trick.

If you are used to installing Babel, Webpack, or anything else globally, be aware that it is bad practice to do so. Imagine updating these dependencies, and these updates may break your dependency chain when a breaking change is not compatible with your setup.

Avoid global installations whenever you can. For instance, once I reviewed an application that wouldn’t work. After debugging, it turned out that a global dependency never made it to package.json. When I ran npm install, the dependency in question was never installed. If you create an open source application, chances are, most people downloading your application won’t be able to run it following your installation instructions.

Locally installing Babel or Webpack may come with path problems. If the command babel is not recognized by your operating system, don’t start adding path references. If you want to use Babel or Webpack, change your package.json instead by adding the following scripts:

You can run Babel and Webpack on its own by executing npm run babel and npm run webpack respectively.

Step 5: Create the Files of Your Application

Create a src folder, and create an app folder inside src.

Create our main HTML file, src/app/index.html. Generate or paste default HTML contents in the file. For instance, we can start with:

Create a JavaScript file in src/app. Name it app.js.

Import react and react-dom, and paste a simple demo component. Don’t worry about the syntax for now, we will explore it in depth in the next section.

Step 6: Configure Webpack

The following Webpack config file will work with our application setup. Create a file webpack.config.js in your project folder on the same level where package.json is.

Paste the following contents, then read the explanation below to understand the settings.

In line 1, path uses node’s built in ability to recognize the path of our application, and resolve the path of folders inside our application.

Our entry point in the application is /app/app.js.

The bundle file app.dist.js will be generated by Webpack. It contains our app code and all its dependencies. You don’t have to worry about referencing scripts in a certain order.

The path publicPath is important for the Webpack development server. We have to tell Webpack the location of the public server.

Place the reference to the bundle in your index.html file just before the end of the body:

Loaders compile all files matching the regular expression belonging to the test key. We have to transpile .js and .jsx files, that are matched by the provided regular expression.

The exclude key is for specifying folders to exclude. As node packages come already transpiled and minified, Webpack does not have to take care of them.

The list of presets are the same as the ones we installed with npm. Just remove the prefix babel-preset- from the name of the preset.

Step 7: Set up npm to build and run your application

Add two scripts to your package.json file to build the development version and the production version of your application.

webpack -d runs Webpack in development mode, and webpack -p runs Webpack in production mode. In production mode, source maps are removed, and Webpack fully minifies the code.

We also have to copy the index.html file from the source folder to the dist folder. If you are using Windows, most likely you use cygwin, so the cp command is available to you. Otherwise, use copy instead of cp.

The last command in the -d build configures and runs the Webpack development server. It does hot compilation of the React code. As you write code, your browser is automatically refreshed. Remember, developer experience is always important, and these little tweaks save you a lot of time.

After entering npm run build in the terminal, you can reach your application in your browser, under the address http://localhost:8080. If you prefer another port, owerwrite it with the --port switch.

If you open localhost:8080/app, you can see the rendered component. Try modifying app.js by adding a string to the div you render on screen. After saving the file, watch the contents of your browser window reflect all changes in a second or so. Reloading the solution as you make changes to the source code adds a lot to the developer experience, if you try it out once, you won’t want to live without it anymore.

Lastly, if you would like to follow this tutorial, I encourage you to learn and practice the lastest JavaScript standards. Similarly to the environment setup, we will use the latest features that are available to us 2016-2017. I encourage you to stay up to date with ES6 by signing up for my email course. You will not only learn the fundamentals of ES6, but I will also give you exercises and reference solutions to practice the fundamentals. I strongly believe that your time is important, and therefore, you will learn exactly what’s needed for you in practice, nothing more, nothing less. If you expect a slightly different variation of the specification, feel free to buy any book or HD video course on ES6/ES2015, and you will get all information the specification gives you, bundled with some entertainment. If you want to put your skills into practice, sign up below by clicking the green YES button.

Would you like to learn ES6?
Strengthen your JavaScript knowledge with marketable skills!
Get the Course "ES6 in Practice"!

Learn Marketable Skills.

Verify your knowledge with real world exercises.

Thank you for your subscription.
Please check your inbox to access the first lesson.

You can read the other articles belonging to this series in chronological order by clicking here. I can highly recommend continuing with the article on setting up ESLint with React and ES6, as this article will enhance your application setup.

If you would like to get regular updates on my articles, sign up in the above form with your favorite email address.

  • Tony Garcia

    The. $129/year pricing for Webstorm is for a business/organization subscription. The personal subscription price is $59 for the first year, $47 for the second and $35 for each year after.

    • True, thank you for the comment, Tony. I was far too involved and biased, as I had to evaluate a company decision.

  • lazlojuly

    Thanks @disqus_nskjd2faTS:disqus, great post as always! Are you going to write the upcoming articles in a test driven approach?
    I have been looking out for some good practices when it comes to testing React.
    Unfortunately, most tutorials ignore testing.

    • Thank you for the praise, Lazlo.

      Yes, I do want to include testing, and it is great feedback that you want it.

      Time-wise, as I am posting two articles every three days on the ES6 course that you can see at the bottom of this article, the React course is starting slow. However I do not want to compromise quality in exchange for releasing these articles quickly.

      • lazlojuly

        Thanks! I am a big fan šŸ™‚ It is a big commitment nowadays to keep articles relevant. Your approach, and thinking process is inspiring! I have also started blogging, but really just dabbling at it – I would highly appreciate your feedback if you have time to check it out:

  • Havs

    Thanks for the great post! I came across these articles from this reddit post:

    I recently started using Webstorm and am still getting situated. Most of my career I’ve used Sublime Text. Out of curiosity, which IDE/Text Editor do you prefer or biased towards?

  • Eric P

    I don’t have cygwin on windows. So had to change the scripts to:
    “scripts”: {
    “build”: “webpack -d && copy /Y src\app\index.html dist\index.html && webpack-dev-server –hot –inline –colors –progress –content-base src/”,
    “build-prod”: “webpack -p && copy /Y src\app\index.html dist\index.html”
    or it kept throwing syntax error on copy.

  • Pravin Kumar

    Getting below error while running npm run build command in command window. Could please help me on this.

    > react-sample@1.0.0 build C:codebasereact
    > webpack -d && copy src/app/index.html dist/index.html && webpack-dev-server –hot –inline –colors –progress –content-base src/

    Hash: 2a0eeb6d9d6017185bf4
    Version: webpack 3.5.5
    Time: 2313ms
    Asset Size Chunks Chunk Names
    app.dist.js 2.07 MB 0 [emitted] [big] main
    [81] ./src/app/app.js 676 bytes {0} [built]
    + 183 hidden modules
    The syntax of the command is incorrect.
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! react-sample@1.0.0 build: webpack -d && copy src/app/index.html dist/index.html && webpack-dev-server --hot --inline --colors --progress --content-base src/
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the react-sample@1.0.0 build script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

  • Curly-Chick

    I get the message: localhost refused to connect.. Any idea what I did possibly wrong?