Preparing for React Development

First, prepare an environment where React can be used. This article explains the basic React workflow, from writing and running a simple program to building it for deployment.
Tags:

Preparing React

React is a framework created for developing the JavaScript front end, the part displayed on the client side.

When many people hear “web application framework,” they may think of MVC application frameworks such as Spring. When someone says JavaScript has a frontend framework, they may wonder, “Does that kind of thing exist? Can’t I just write normal HTML and JavaScript?”

However, as you can see from modern web pages, page display is no longer something completed only by combining text and images in HTML. Content is freely arranged, moves around, and changes on the web screen. When something is operated, the display changes and updates in real time. Wouldn’t it be quite difficult to create all of this by manually writing code?

Advanced frontend expression is no longer an era of writing everything by hand. React was created for this kind of frontend development. React is developed by Facebook and is actually used by Facebook, so its quality can be considered well proven.

Installing React

There are several ways to install React, but the easiest to understand is using npm.

npm means “Node Package Manager.” It was originally created for managing packages for Node.js, a JavaScript runtime environment, but it is well suited for managing JavaScript libraries and is used for JavaScript libraries and frameworks. When you install Node.js, npm is installed automatically, so install Node.js if you have never used it.

https://nodejs.org

Install React from Command Prompt or Terminal. React itself is just a script file, so in fact no installation is required, but setting up the React application environment is troublesome. Therefore, install a tool for creating applications that use React.

$ npm install -g create-react-app

Run it like this. create-react-app is that package.

$ sudo npm install -g create-react-app
/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
+ create-react-app@1.4.3
added 106 packages in 6.226s

Now you are ready to create and develop React applications.

Creating and Running an Application with create-react-app

Creating a React Application

Let us actually create a React application. Open Command Prompt or Terminal and move to a suitable location with cd. Then run the following command.

$ create-react-app my-app

Then output like the following appears.

Creating a new React app in /Users/kimkc/dev/react/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...


> fsevents@1.1.2 install /Users/kimkc/dev/react/my-app/node_modules/fsevents
> node install

[fsevents] Success: "/Users/kimkc/dev/react/my-app/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/kimkc/dev/react/my-app/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

+ react-scripts@1.0.17
+ react@16.2.0
+ react-dom@16.2.0
added 1266 packages in 63.989s

Success! Created my-app at /Users/kimkc/dev/react/my-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  npm start

Happy hacking!

If installation finishes without errors, a directory named my-app is created. The files for the React application are installed inside it. A React application can be created this simply.

$ create-react-app [application name]

React Structure

If you check the generated directory, you may be surprised by how many files and directories there are and how large it is. In summary, it looks like this.

.
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── registerServiceWorker.js

Files

  • .gitignore
    • A Git-related file.
  • package.json
    • A file for npm package management.
  • README
    • The readme file.

These files are not directly related to the application body.

Folders

  • node_modules
    • Files related to Node.js modules are organized here. It is fairly large, so you may be surprised and wonder, “Why are there so many files just to run a JavaScript library?” However, most of them are needed to start and operate a server program with Node.js, so you do not need to worry. You do not have to upload everything here separately to use the application.
  • public
    • Files published on the web, meaning files that can be accessed directly, are organized here. It contains the default web page index.html and the favicon.ico icon.
  • src
    • JavaScript source code-related files are organized here. Files related to the React program are inside this folder. CSS files used by React components are also stored here. In other words, the React program and files used by the program are here.

For a while, editing files in the public and src folders will be the center of development. You will rarely edit or use the others directly.

Running and Deploying React

We will check the program contents later, but first let us run the React application created with create-react-app. This also uses an npm command.

In Command Prompt or Terminal, move to the application folder with the cd command. Then run:

$ npm start

This command starts the Node.js server program and opens the web page in a web browser. The first page of the application is below.

http://localhost:3000/

A page saying “Welcome to React” should appear. This is the page of the sample React application.

Deploying a React Application

Now let us explain how to deploy an application created with React to an actual server. Because the folder includes Node.js modules, it is over 60 MB. That is inconvenient for a sample.

To deploy a React application, use npm’s build feature. Move to the application directory in Command Prompt or Terminal and run:

$ npm run build

Then the application is built. A directory named build is created in the application directory. This directory contains the built application. Upload the contents of this directory to the server.

(However, if you look at the generated code, files used in the program are specified with absolute paths, so if you place it in a subdirectory of the server, the paths may not match and it may not work correctly.)

The npm run build command is actually not an npm command itself. It runs a React script configured in the React application’s package.json and performs the build process.

 

Now you can create and run a React application. The next article explains how to use React.

Creating an Application with npm init

The previous section used create-react-app, but there is also a way to create a React application without using it.

Creating an Application from Scratch

This section explains how to manually initialize npm and install the required libraries.

Run commands in the following order. application name is the name of the application to create.

$ mkdir [application name]
$ cd [application name]
$ npm init
$ npm install --save react react-dom

A React application runs once the two packages react and react-dom are installed. However, this method does not provide any concrete web application files. It is a so-called empty application with only the necessary libraries prepared. Therefore, you must create the application files manually.

The following is the output when running npm init. It asks for the package name, version, description, and so on.

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (my-app2) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/kimkc/dev/react/my-app2/package.json:

{
  "name": "my-app2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes) y

The following is the output from running npm install --save react react-dom.

$ npm install --save react react-dom
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN my-app2@1.0.0 No description
npm WARN my-app2@1.0.0 No repository field.

+ react@16.2.0
+ react-dom@16.2.0
added 18 packages in 5.472s

Generated File and Directory Structure

The files and directories generated by this method are as follows.

.
├── node_modules
├── package-lock.json
└── package.json
  • node_modules: Stores Node.js-related packages.
  • package.json: The npm package management file.

There are only two main files and folders. These are the same as the folders and files with the same names created by create-react-app.

Applications whose packages are managed by npm basically have a fixed folder structure. To develop the application, create a src folder inside the application folder, and inside it create a file named index.js as the main program, or JavaScript script file, to execute. This is the main program of the React application.

The shape of the application created by either method is generally the same. The only difference is whether sample application files are prepared from the beginning. Therefore, unless there is a special reason, using create-react-app is more convenient.