Create a React application from scratch (Part 2): Initialization and the First File

4 min readJan 5, 2018

This post is part of a beginner-level series of posts meant for people who use
ready-made tools, templates or boilerplates for React but wish to learn and understand how to build a React application from the very beginning.

All posts in this series:
Part 1: Introduction
Part 2: Initialization and the First File
Part 3: Using ES2015 Syntax
Part 4: Enforcing a Style Guide
Part 5: Setting up an Express Server
Part 6: Using a Module Bundler
Part 7: Setting up React and Best Practices
Part 8: Setting up Redux
Part 9: Setting up React Router
Part 10: TDD and Setting up Jest

Initializing the application

In order to be able to install modules and dependencies, you will need to initialize the project using npm CLI. Make sure you are on the project directory then run the following command in the terminal:

$ npm init

The CLI will ask you a bunch of questions about your new project so enter the proper information for each field.

Note: Please be kind to your fellow developers and do not press the Enter key repeatedly, type something meaningful, ok?

You are probably used to starting your application by running npm start in the terminal window, but if you try this now you will get an error. This is simply because you have not defined a ‘start’ script in package.json file, so go ahead and add it:

{
  ...
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ...
}

You do not have to worry about the ‘test’ script for now, we will change it later. Create an index.js file on the root of the project directory:

/**
 * index.js
 */console.log('Hello, world!');

If you run npm start now, the message ‘Hello, World!’ will be logged to the console on the terminal window.

About npx

The best scenario for a new developer working on your project is to clone the project then run npm install followed by npm start and things should just work, but in certain situations your project would depend on modules that need to be installed globally such as Bower, Gulp, Webpack, Jest and others.

The problem here is that global modules are not listed in package.json as dependencies and you would have to list those dependencies in the project documentation.

You can work around this problem by using the locally installed binaries in ./node_modules/.bin . A better way is to use npx, a tool that allows you to execute npm package binaries.

How it is used

Normally, if you want to run a binary that is installed locally with your project instead of globally on the machine, you would do this:

$ ./node_modules/.bin/webpack --config config.js

But with npx, you would simply do this:

$ npx webpack --config config.js

Neat, right? Let us see how you can get that working on your machine, if it is not already working.

Installation

The npx package is available by default if you have npm 5.2 or later. Run the following command to make sure:

$ which npx

If you do not have npx installed already, install it from npm:

$ npm install -g npx

In this series

Throughout this series of posts, we will be using npx instead of installing any modules globally. If you would like to learn more about npx, check out this article.

The Editor Config file

An editor config file helps define and maintain consistent coding styles between different editors and IDEs and it is readable by all popular code editors including Sublime Text, Atom and VSCode.

This should be the first file you create in the application directory whenever you are starting a new project with your team. Go ahead and create the .editorconfig file on the root directory of the project.

This is the configuration that we will be using for this specific project:

root = true# General settings for whole project
[*]
indent_style = space
end_of_line = lf
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true# Format specific overrides
[*.md]
max_line_length = 0
trim_trailing_whitespace = false

Keep in mind that this file does not guarantee that each developer is going to follow these rules, it just tells the code editor which rules are preferable for this specific project.

You can read more on how to configure your own file and what each line does from here or you can use this example file as your starting point.

Now that we have initialized our application, let us enable using ES2015 syntax by installing the first dependency in the project — Babel. Let us move on to the next part.

Conclusion

Project documentation is very important and it comes in different forms so make sure your package.json file contains descriptive and useful information.

Use an editor config file so that other developers working on your project will adhere the same coding styles across different editors and IDEs.

Instead of installing packages globally, we will be using npx to execute local package binaries throughout this entire series of posts.

Was this article useful? Please click the Clap button below, or follow me for more.

Thanks for reading! If you have any feedback, leave a comment below.

Go to Part 3: Using ES2015 Syntax