Reactやってみよう〜開発環境からHelloWorld

# 開発準備
React開発のためにはNode,Yarn、Webpack,Babelなどのツールを設置、プロジェクトに設定する必要があります。

###[Node.js設置](https://nodejs.org/ja/download/current/)：
 WebpackとBabelの基盤はNode.jsなのでNode.jsを設置が必要、Node.jsの公式サイトから最新を設置します。
###[Yarn設置](https://yarnpkg.com/en/docs/install#mac-stable)
 Node.jsのパッケージマネージャ
###[VSCode設置](https://code.visualstudio.com)
 Microsoft社が開発したオープンソースのテキストエディタ、ReactのDebugもできる。
Debug For Chrome設置
![スクリーンショット 2019-10-06 9.36.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108475/2b0ed952-a834-e0b2-f441-7086b6a2ff18.png)
Add Configurationで`Chrome`を設定したら`launch.json`が生成される。
![スクリーンショット 2019-10-06 9.44.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108475/b204f564-da61-c421-669d-85bdf67fdac9.png)
![スクリーンショット 2019-10-06 9.44.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108475/9ff32ce0-5f3a-6103-4c06-21be295039b3.png)
launch.json編集 (url portを3000に変更)

```
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}
```


### create-react-app設置
create-react-appツールを使えばReact実装に必要なモジュールを簡単に設置することができます。

```
  npm install -g create-react-app
```

# HelloWorldプロジェクト生成
英語ができる方は以下のリンク参考してください。
https://code.visualstudio.com/docs/nodejs/reactjs-tutorial

create-react-appツールで`hello_world`プロジェクト生成して`nom start`するだけで`localhost:3000`がChromeに表示される。

```
create-react-app hello_world
cd hello_world
npm start
```
`npm start`したら表示されるページ
![スクリーンショット 2019-10-06 9.52.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108475/44a8fddf-4d01-4629-9c95-ad335b60e981.png)

### 自動的に生成されるソース
node_modules: 必要なモジュールが設置されている。
srcフォルダにはソースコードが配置されて、実際の開発はこの中で行います。

### 今回から必要なソース以外を削除
修正前

```
$tree -I 'node_modules'
.
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
```

修正後

```
$tree -I 'node_modules'
.
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.js
    └── index.js
```

`index.html`の中の`root`IdのDivが入っている。

```react:index.html
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    ....
```

ReactDOMが`document.getElementById('root')`のElementにAppコンポーネントを注入するイメージで覚えたらいいかも。

```react:index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
```

APPのRetunの中に書いているのはHtmlに見えますが、JSXと言うはHtml風に書けるJavaScriptの拡張構文

```react:App.js
import React from 'react';

function App() {
  return (
    <div>Hello World!</div>
  );
}

export default App;
```

<img width="407" alt="スクリーンショット 2019-10-06 11.34.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108475/decb386c-d7fa-fa37-f6a2-3d15ce3d0629.png">


次回からは簡単なテーマを考えて実際実装しながらReactの勉強をしようと思います。