早速最初のReactアプリケーションプロジェクトを作ってみましょう。
Facebookが便利なツール"create-react-app"を提供してくれていますのでこれを使いましょう。
最初のReactプロジェクト
適当にフォルダーを作成し、そのフォルダーに移動してcreate-react-appを実行します。
私は"react-app"というフォルダを作成し、"hello-world"という名前のプロジェクトを作成しました。
実行コマンドは以下の通りです。
実行コマンド（旧）
$ npx create-react-app hello-world --typescript
実行コマンド（新）
$ npx create-react-app hello-world --template typescript
npx は前にも説明しましたが、コマンド実行時に必要なパッケージをインストールしておかなくても、必要に応じて自動でダウンロードして実行してくれるようにするものです。
ここで"旧"と"新"の両方を記載しましたが、よく書籍では"旧"のほうが記載されているのですが、実行すると分かりますが、
将来的には"--typescript"というパラメータは削除される可能性があるので新しいパラメータ"--template typescript"を使ってねん
と言われるので、一応"新"パラメータも載せました。
上記コマンドを実行すると、バーッとメッセージが表示されるのですが、何が行われているのか分からなかったので、１つ１つのメッセージを調べました。
いきなりこんなにメッセージが出力されるので最初はビビりますが、これって自分が作ったプロジェクトがどのように作成されているのかを知るための良い情報ですよね。
出力メッセージに１つ１つのメッセージに括弧付き番号"()"をつけて解説します。
このあと説明しますね。
最初のReactプロジェクト
satom@W1007018N182 MINGW64 ~/src/react-app
$ npx create-react-app hello-world --typescript
(1)
Creating a new React app in C:\Users\satom\src\react-app\hello-world.
(2)
The --typescript option has been deprecated and will be removed in a future release.
In future, please use --template typescript.
(3)
Installing packages. This might take a couple of minutes.
(4)
Installing react, react-dom, and react-scripts with cra-template-typescript...
(5)
yarn add v1.22.4
(6)
[1/4] Resolving packages...
(7)
[2/4] Fetching packages...
info fsevents@1.2.11: The platform "win32" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.1.2: The platform "win32" is incompatible with this module.
info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
(8)
[3/4] Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
(9)
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 33 new dependencies.
info Direct dependencies
├─ cra-template-typescript@1.0.3
├─ react-dom@16.13.1
├─ react-scripts@3.4.1
└─ react@16.13.1
(10)
info All dependencies
├─ @babel/compat-data@7.10.3
├─ @babel/helper-builder-react-jsx@7.10.3
├─ @babel/helper-define-map@7.10.3
├─ @babel/helper-get-function-arity@7.10.3
├─ @babel/helper-member-expression-to-functions@7.10.3
├─ @babel/plugin-syntax-numeric-separator@7.10.1
├─ @babel/plugin-transform-parameters@7.10.1
├─ @babel/runtime-corejs3@7.10.3
├─ babel-eslint@10.1.0
├─ babel-preset-react-app@9.1.2
├─ core-js-pure@3.6.5
├─ cra-template-typescript@1.0.3
├─ electron-to-chromium@1.3.483
├─ escalade@3.0.1
├─ eslint-config-react-app@5.2.1
├─ eslint-plugin-import@2.20.1
├─ eslint-plugin-react@7.19.0
├─ internal-slot@1.0.2
├─ node-releases@1.1.58
├─ open@7.0.4
├─ pnp-webpack-plugin@1.6.4
├─ react-dev-utils@10.2.1
├─ react-dom@16.13.1
├─ react-error-overlay@6.0.7
├─ react-scripts@3.4.1
├─ react@16.13.1
├─ scheduler@0.19.1
├─ string.prototype.matchall@4.0.2
├─ terser-webpack-plugin@2.3.5
├─ ts-pnp@1.1.6
├─ webpack-dev-server@3.10.3
├─ webpack@4.42.0
└─ xregexp@4.3.0
Done in 211.09s.
(11)
Initialized a git repository.
(12)
Installing template dependencies using yarnpkg...
yarn add v1.22.4
[1/4] Resolving packages...
warning @testing-library/react > @types/testing-library__react > @types/testing-library__dom@7.5.0: This is a stub types definition. testing-library__dom provides its own type definitions, so you do not need this installed.
[2/4] Fetching packages...
info fsevents@2.1.2: The platform "win32" is incompatible with this module.
info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.11: The platform "win32" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 24 new dependencies.
info Direct dependencies
├─ @testing-library/jest-dom@4.2.4
├─ @testing-library/react@9.5.0
├─ @testing-library/user-event@7.2.1
├─ @types/jest@24.9.1
├─ @types/node@12.12.47
├─ @types/react-dom@16.9.8
├─ @types/react@16.9.41
├─ react-dom@16.13.1
├─ react@16.13.1
└─ typescript@3.7.5
info All dependencies
├─ @sheerun/mutationobserver-shim@0.3.3
├─ @testing-library/dom@6.16.0
├─ @testing-library/jest-dom@4.2.4
├─ @testing-library/react@9.5.0
├─ @testing-library/user-event@7.2.1
├─ @types/color-name@1.1.1
├─ @types/jest@24.9.1
├─ @types/node@12.12.47
├─ @types/prop-types@15.7.3
├─ @types/react-dom@16.9.8
├─ @types/react@16.9.41
├─ @types/testing-library__dom@7.5.0
├─ @types/testing-library__react@9.1.3
├─ aria-query@4.2.2
├─ css.escape@1.5.1
├─ csstype@2.6.10
├─ dom-accessibility-api@0.3.0
├─ min-indent@1.0.1
├─ react-dom@16.13.1
├─ react@16.13.1
├─ redent@3.0.0
├─ strip-indent@3.0.0
├─ typescript@3.7.5
└─ wait-for-expect@3.0.2
Done in 35.15s.
(13)
We detected TypeScript in your project (src\App.test.tsx) and created a tsconfig.json file for you.
(14)
Your tsconfig.json has been populated with default values.
(15)
Removing template package using yarnpkg...
yarn remove v1.22.4
[1/2] Removing module cra-template-typescript...
[2/2] Regenerating lockfile and installing missing dependencies...
info fsevents@2.1.2: The platform "win32" is incompatible with this module.
info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.11: The platform "win32" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
warning " > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5".
success Uninstalled packages.
Done in 23.94s.
(16)
Created git commit.
(17)
Success! Created hello-world at C:\Users\satom\src\react-app\hello-world
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!
(18)
We suggest that you begin by typing:
cd hello-world
yarn start
Happy hacking!
satom@W1007018N182 MINGW64 ~/src/react-app
$
それでは解説します！
(1) プロジェクトフォルダーの作成
現在のフォルダー"c:\Users\satom\src\react-app"に"hello-world"という名前のReactアプリケーションのプロジェクトを作成します。
実際には、"hello-world"という名前のフォルダーが作成され、そのフォルダーがプロジェクトフォルダーになります。
(2) 旧パラメータに対する警告と、新パラメータのアナウンス
冒頭で説明した"旧"と"新"のコマンドによる違いがここで説明されています。
今後は"--template typescript"を使用しましょう。
(3) Reactプロジェクト作成に必要なパッケージのインストール
ここで少し心配になるぐらい時間かからいますが、安心してください、動いてます!
(4) TypeScriptのプロジェクト作成テンプレートのインストール
"cra-template-typescript"は、Reactの公式なTypeScriptプロジェクトのテンプレート名です。
要するにここで公式テンプレートを使用したプロジェクト作成を行っています。
(5) ～ (9) yarnによるReactプロジェクトの構築ステップ
(5)から(9)まで、yarnが実行され、Reactプロジェクト構築に必要なパッケージと、それらに必要な依存関係のある関連パッケージ全てがインストールされ、Reactプロジェクトが構築されます。
(10) Reactプロジェクトで必要となった全パッケージの表示
最終的に、Reactプロジェクトを構築するために必要な全パッケージの情報を表示します。
(11) Gitローカルリポジトリの自動作成
作成したReactプロジェクトをベースにgitリポジトリを自動作成します。なんと一気にGitリポジトリも作成してくれるのです。便利な世の中になりました。でも、少しだけお節介ですねw
(12) Reactプロジェクトのテストモジュールのインストール
Reactプロジェクトにテストモジュールを追加構築しています。
(13)～(14) TypeScriptのための設定ファイルの自動生成
作成したReactプロジェクトがTypeScriptベースの場合、設定ファイルを自動作成します。
(15) 不要となったパッケージを削除
これは何をしているのか不明。。
(16) Gitローカルリポジトリへのコミット
ここまでのプロジェクトファイルをGitローカルリポジトリに保存。
(17) Reactプロジェクトの構築完了！
これが表示されれば、プロジェクトの構築は完了です！
yarnコマンドを使って、Reactアプリケーションのローカル実行(yarn start) 、リリースモジュール作成(yarn build)、自動テスト実行(yarn test)が可能です。
yarn ejectだけは何をしているのか不明。。。
(18) Let's try to run your first app!
ここまで完了した場合、デフォルトの状態でアプリケーションが起動できるようになっています。
という事で、プロジェクトフォルダーに移動して作成したアプリケーションを実行しましょう！
最初のアプリケーション実行
satom@W1007018N182 MINGW64 ~/src/react-app
$ cd hello-world/
satom@W1007018N182 MINGW64 ~/src/react-app/hello-world (master)
$ yarn start
yarn run v1.22.4
$ react-scripts start
i ｢wds｣: Project is running at http://192.168.3.8/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from C:\Users\satom\src\react-app\hello-world\public
i ｢wds｣: 404s will fallback to /
Starting the development server...
Compiled successfully!
You can now view hello-world in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.3.8:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
