MACでReactの導入とサンプル画面作成

勉強のメモを兼ねて

[MAC]Macbook white 2009 late
[IDE] VisualStudio 1.27.2  (以下VSCと呼ぶ)
[パッケージ管理] yarn  (not npm)　　※yarnのインストールについては後ほど記載


<h1>準備編</h1>

<h2>Reactに必要なモジュールを準備する</h2>
まずは呪文を唱えましょう。
※VSCodeのターミナルから実施できます。

>yarn install -g create-react-app

<pre>
/usr/local/var/nodebrew/node/v10.4.0/bin/create-react-app -> /usr/local/var/nodebrew/node/v10.4.0/lib/node_modules/create-react-app/index.js
+ create-react-app@2.1.5
added 1 package from 1 contributor, removed 5 packages and updated 12 packages in 10.242s
</pre>

create-react-appというコマンドは、MACには標準装備されていないため、
新しくMACにインストールします。

（windowsしか使ったことない人には、「コマンドをインストールする」というのは耳慣れないかも）

コマンド自体がなにやってるかは以下参照
https://qiita.com/naohikowatanabe/items/71a8bf477216ef56a5b7

<h2>プロジェクトを作る</h2>
さらに呪文２つ目を唱えます。

>create-react-app reactsample

<pre>
Creating a new React app in /.../reactsample.

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

yarn add v1.7.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 127.20s.

Initialized a git repository.

Success! Created reactsample 
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 reactsample
  yarn start

Happy hacking!
</pre>

メッセージがいろいろ流れましたが超訳すると
　reactsampleのプロジェクトが作れたよ！「Success! Created reactsample」
　楽しんでね！「Happy hacking!」

ということでしょうか。
無事にプロジェクト作成完了したので、
試しにReactのモジュールが起動できるか実行してみましょう。

>yarn start

<pre>
Compiled successfully!

You can now view reactsample in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://172.20.10.2:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.
</pre>

お使いのブラウザにReactのデフォルト画面が表示されました。

![スクリーンショット 2019-02-17 14.32.26.png](https://qiita-image-store.s3.amazonaws.com/0/123732/d372e53c-bada-7da1-a100-ac98e4443c03.png)

ここまでくれば、Reactの開発環境は整いました。

<h1>作成編</h1>

<h2>デフォルト画面を書き換え</h2>

プロジェクトの中に以下のファイルが作成されています。

<pre>
reactsample
 | - public      : HTMLファイルを置くところ
 | - src         : Reactのソースファイルを置くところ
 L - node_module : Reactが使う標準モジュール。触らないこと。
</pre>

さらに細かく見ると以下のようになっています。（メインのファイルのみ）

<pre>
reactsample
 | - public
 |       L index.html
 | - src
 |       | - index.js
 |       L - App.js
 L - node_module
</pre>

先ほどのデフォルト画面は![スクリーンショット 2019-02-17 14.32.26.png](https://qiita-image-store.s3.amazonaws.com/0/123732/e4ae8388-065b-da0f-e77b-a3f780a7771f.png)

index.html , index.js , App.js で記述された内容が表示されています。
呼び出し順番は上の通り。

今回はこの画面を書き換えてみます。

index.jsがApp.jsを読み込んでいるのはしゃらくさいので、
index.jsを直接書き換えます。

<pre>
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(

    &lt;App />, 
    document.getElementById('root')

);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

</pre>

&lt;App />, 　←　ここを
&lt;div>hello world&lt;/div>　←　これに書き換えます。

<pre>
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(

    &lt;div>hello world &lt;/div>, 
    document.getElementById('root')

);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

</pre>
すると今までのデフォルト画面は消え、hello worldが表示されました。

![スクリーンショット 2019-02-17 15.01.40.png](https://qiita-image-store.s3.amazonaws.com/0/123732/cd7f17bc-b735-61fa-240b-ea336562dfe3.png)

※注意点として、
　ReactDOM.renderの第１引数は必ず何かしらのタグで括っておかないと
　エラーになります。

これでひとまずはサンプル画面が完成です。