はじめに
これまでは主にVueを中心にフロントエンドのちょこっと記事を幾つか書いてきました。
ここいらで別のフレームワークも試してみようと思います。
候補はAngularとReactのどちらかですが、Vueはその起源がAngularに近くコンセプトが似ているということもあるので、ここは全く別の進化系統である React から挑戦してみようと思います。
Vueで色々チャレンジしたお題をReactでトレースしていくってなアプローチで進めていきたいと思います。
まずは、環境整備からということで本記事は３ステップでReactを始めるためのレシピを紹介します。
しばしお付き合いお願いします。
今回は環境構築~サンプルプロジェクトの立ち上げまでをわずか３ステップでやってみます。
Step1. 環境構築
まずはさておき環境構築からですよね
ここでは、node.js、npmがインストール済みであることを前提にしています。
ちなみに筆者の環境は以下のとおりです。
PS C:\Users\Shikataramuno> node --version v11.11.0 PS C:\Users\Shikataramuno> npm --version 4.0.5
ReactにはVueのVue CLIに該当するツールとしてcreate-react-appってぇのがあります。
（詳しくはこちらを参照願います。
->Create React App · Set up a modern web app by running one command.）
まずはこれをインストールしましょう。
npm install -g create-react-app
これでReactのビルド環境が出来上がりました。
めっちゃ簡単ですね！ ちゃんとインストールできているか確認してみましょう。
次のように出力されればOKです。
PS C:\Users\Shikataramuno> create-react-app --version 2.1.8
次は、プロジェクトの作成です。
Step2. プロジェクト作成
プロジェクトを作ってみる
プロジェクトの作成もとっても簡単です。
create-react-app test-project
たったこれだけです。
Vue CLIは対話形式で色々設定できましたが、create-react-app では指定できるオプションがかなり少ないようです。create-react-app --helpで確認してみてください。
この後、プロジェクトのひな型が作られ、コンソールにメッセージが表示されます。
こんな感じです。
PS C:\Users\Shikataramuno> create-react-app test-project
Creating a new React app in C:\Users\Shikataramuno\test-project.
...中略...
Initialized a git repository.
Success! Created test-react at C:\Users\Shikataramuno\test-project
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 test-project
yarn start
Happy hacking!
プロジェクトフォルダ以下はこんな風になります。
C:\Users\Shikataramuno\test-project
│ package.json
│ README.md
│ yarn.lock
│
├─node_modules
│
├─public
│ favicon.ico
│ index.html
│ manifest.json
│
├─src
│ App.css
│ App.js
│ App.test.js
│ index.css
│ index.js
│ logo.svg
│ serviceWorker.js
│
└─test-react
package.json
yarn.lock
Step3. ビルド
このプロジェクトルートで
npm start
とするとビルドが始まり、うまいことできてると、エラーが出ずにテストサイトが起動されます。
PS C:\Users\Shikataramuno\test-project> npm start > test-react@0.1.0 start C:\Users\Shikataramuno\test-project > react-scripts start ...中略... You can now view test-react in the browser. Local: http://localhost:3000/ On Your Network: http://192.168.56.1:3000/ Note that the development build is not optimized. To create a production build, use yarn build.
ってな具合に表示されて、ブラウザが起動し例の原子マークみたいな写輪眼みたいなロゴが表示されます。こんな感じです。
ここらへんの感じはVue で vue create test-project でやるのとそんなに違いませんね。
謝辞
今回は、超特急でReactの環境構築からサンプルプロジェクトのビルドまでやってみました。
案外スンナリって感じで、Vueと同じような感じでプロジェクトのひな型を作るところまで、とっても簡単にできました。
次からはこれをベースにReact版のレシピを整備していきます。
少しでもお役に立てたならハッピーです。最後まで読んでいただきありがとうございました。
