しかたらむーの てっくぶろ

組み込みソフトの古参エンジニアがモダンなフロントエンドエンジニアに転生 その進化の記録です

React 3ステップで始める

はじめに

これまでは主にVueを中心にフロントエンドのちょこっと記事を幾つか書いてきました。
ここいらで別のフレームワークも試してみようと思います。
候補はAngularReactのどちらかですが、Vueはその起源がAngularに近くコンセプトが似ているということもあるので、ここは全く別の進化系統である React から挑戦してみようと思います。
Vueで色々チャレンジしたお題をReactでトレースしていくってなアプローチで進めていきたいと思います。
まずは、環境整備からということで本記事は3ステップでReactを始めるためのレシピを紹介します。
しばしお付き合いお願いします。

今回は環境構築~サンプルプロジェクトの立ち上げまでをわずか3ステップでやってみます。

Step1. 環境構築

まずはさておき環境構築からですよね
ここでは、node.jsnpmがインストール済みであることを前提にしています。 ちなみに筆者の環境は以下のとおりです。

PS C:\Users\Shikataramuno> node --version
v11.11.0
PS C:\Users\Shikataramuno> npm --version
4.0.5

ReactにはVueVue 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.

ってな具合に表示されて、ブラウザが起動し例の原子マークみたいな写輪眼みたいなロゴが表示されます。こんな感じです。

f:id:Shikataramuno:20190403220421p:plain

ここらへんの感じはVuevue create test-project でやるのとそんなに違いませんね。

謝辞

今回は、超特急でReactの環境構築からサンプルプロジェクトのビルドまでやってみました。
案外スンナリって感じで、Vueと同じような感じでプロジェクトのひな型を作るところまで、とっても簡単にできました。
次からはこれをベースにReact版のレシピを整備していきます。 少しでもお役に立てたならハッピーです。最後まで読んでいただきありがとうございました。