create-react-appで新規プロジェクト構築

create-react-appは、Facebook公式のツールで、Reactプロジェクトを構築してくれます。ビルドツール( Webpack Babel など)の面倒な設定をスキップして、すぐにコーディング作業を進めることができます。ここでは、create-react-appを利用したReactプロジェクトの構築方法を確認します。

作業環境

OSはMacです。以下の環境で作業します。

$ node -v
v11.4.0
$ npm -v
6.4.1
$ yarn -v
1.13.0

create-react-app helpを確認

create-react-app --help で主な利用方法を確認できます。

$ npx create-react-app --help
npx: installed 63 in 3.896s
Usage: create-react-app <project-directory> [options]

Options:

  -V, --version                            output the version number
  --verbose                                print additional logs
  --info                                   print environment debug info
  --scripts-version <alternative-package>  use a non-standard version of react-scripts
  --use-npm
  --use-pnp
  --typescript
  -h, --help                               output usage information
    Only <project-directory> is required.

    A custom --scripts-version can be one of:
      - a specific npm version: 0.8.2
      - a specific npm tag: @next
      - a custom fork published on npm: my-react-scripts
      - a local path relative to the current working directory: file:../my-react-scripts
      - a .tgz archive: https://mysite.com/my-react-scripts-0.8.2.tgz
      - a .tar.gz archive: https://mysite.com/my-react-scripts-0.8.2.tar.gz
    It is not needed unless you specifically want to use a fork.

    If you have any problems, do not hesitate to file an issue:
      https://github.com/facebook/create-react-app/issues/new

新規Reactプロジェクトを構築

create-react-appの使い方

create-react-app をインストールして、新規プロジェクト( my-app )を構築します。

npm install -g create-react-app
create-react-app my-app

または、下記方法でも可能です。 npx であれば、npmパッケージの「ダウンロード」と「実行」をまとめて行なってくれます。

npx create-react-app my-app

プロジェクト構築

$ npx create-react-app my-app
npx: installed 63 in 7.648s

Creating a new React app in /xxxx/my-app.

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

yarn add v1.13.0
[1/4] ????  Resolving packages...
[2/4] ????  Fetching packages...
[3/4] ????  Linking dependencies...
warning "react-scripts > pnp-webpack-plugin > ts-pnp@1.0.0" has unmet peer dependency "typescript@*".
[4/4] ????  Building fresh packages...
success Saved lockfile.
success Saved 4 new dependencies.
info Direct dependencies
├─ react-dom@16.8.2
├─ react-scripts@2.1.5
└─ react@16.8.2
info All dependencies
├─ react-dev-utils@7.0.3
├─ react-dom@16.8.2
├─ react-scripts@2.1.5
└─ react@16.8.2
✨  Done in 41.16s.

Initialized a git repository.

Success! Created my-app at /xxxx/my-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn 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
  yarn start

Happy hacking!

開発環境立ち上げ

作成した環境に移動して、開発環境を立ち上げてみます。

$ cd my-app
$
$ yarn start
618-react-create-react-app_start.png

すでに3000ポートを利用していたので、代わりに3001ポートが利用されました。

フォルダ構成を確認

$ tree -L 1
.
├── README.md
├── node_modules
├── package.json
├── public
├── src
└── yarn.lock

3 directories, 3 files
$ cat package.json
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.2",
    "react-dom": "^16.8.2",
    "react-scripts": "2.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}
$ tree src/
src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js

0 directories, 7 files

参考