始めよう React（基礎編）！ Part 4 - reactのファイル構成を理解しよう

本編では、
前章作成したcreate-react-appで生成したファイルについて
個人的に割りと重要な部分を説明していきます。

#ファイル構造
create-react-appで生成したファイルは下記の通りになります。
:arrow_down::arrow_down:
![hello-react_file.png](https://qiita-image-store.s3.amazonaws.com/0/293426/f1093cfd-d6d7-3d7d-dc76-5c785e589100.png)


#:bangbang: package.json　と　/node_modules

###:one:　**package.json**
package.jsonは当ウェブアプリケーションの情報と依存関係を管理するファイルになります。

npmでパッケージをインストールした際に、
:arrow_down:のイメージになります。
（これからの紹介では実際に操作しますので、現段階では軽く記憶に残れば良いです。）
**/node_modules**：インストールしたパッケージの内容物を置きます。
**package.josn**：インストールしたパッケージのバージョン情報を管理します。
![packagejson.png](https://qiita-image-store.s3.amazonaws.com/0/293426/93d15224-cbe3-2de1-50d3-e71dd7ece74a.png)

それでは、上記の内容を理解して行きましょう。
###:arrow_down: アプリケーション基礎情報
アプリケーション名、バージョン、公開非公開など、

```json:package.json
  {
  "name": "hello-react",
  "version": "0.1.0",
  "private": true,
  }
```

###:arrow_down:この部分は依存しているパッケージ情報になります。
当アプリケーションが使っているパッケージのバージョンを示しています。
これからのreactの開発では、このような形で必要なパッケージを追加していきます。

```json:package.json
 "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "1.1.5" 
  }
```
`※dependencies：依存関係`

こちらの依存関係に関しては、
第1章で紹介しました内容の最下部に書いている
[始めよう React（基礎編）！ Part 1 - React とは
](https://qiita.com/ShowJs/items/eaed67ae0422ac77449d#react%E3%81%AE%E6%9B%B8%E3%81%8D%E6%96%B9jsx)

```html
 <script src="https://cdn.bootcss.com/react/16.2.0/umd/react.development.js"></script>
 <script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.development.js"></script>
 <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
```
こちらの部分と同じ意味です。

例えば、上記の`...cdn.bootcss.com/react/16.2.0/umd...`
とpackage.jsonの`"react": "^16.5.2"`は同じようなイメージです。

###:arrow_down:このアプリケーションの使い方です。
前章に書いてました、
`$ npm start`の部分になります。
[始めよう React（基礎編）！ Part 3 - create-react-app](https://qiita.com/ShowJs/items/06e2c6deb655a50c9aa9#threereact%E3%81%A7%E6%A7%8B%E6%88%90%E3%81%97%E3%81%9F%E3%82%A6%E3%82%A7%E3%83%96%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E5%8B%95%E3%81%84%E3%81%A6%E8%A6%8B%E3%82%88%E3%81%86)

```json:package.json
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
```

---

###:two:　**/node_modules**
npmを使って、インストールされたパッケージを置く場所と言うイメージです。

前章のcreate-react-appをインストールした際に紹介しましたので、
:arrow_down:こちらを確認してイメージしやすくなります！
[npm install](https://qiita.com/ShowJs/items/06e2c6deb655a50c9aa9#one%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)

中身を見てみると、`package.json`に入っている
**react**、**reactd-dom**、**react-script**も入ってます！z
![node_bundle.png](https://qiita-image-store.s3.amazonaws.com/0/293426/97ba7404-84e5-f628-7c47-edf95a96ca0d.png)

基本的インストールした時からセットになっています。
ウェブアプリケーションの開発に関しましては、直接触ることほぼありません。

少しだけでも変更があるとエラーになる可能性がありますので、
弄らないように心かけていきましょう。

#:bangbang: **/src/index.js**、**/public/index.html**、**/src/App.js**

###:one:　/src/index.js
こちらのを見てみると、先程はpackage.josn内の:arrow_down::arrow_down:が使われてます。

```json:package.josn
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
```
こちらのファイル内容について、説明していきましょう。
![src_indexjs.png](https://qiita-image-store.s3.amazonaws.com/0/293426/dacda2d9-0073-c4b0-3427-bd45148ca117.png)
:asterisk:1,2行は基本的なreactの書き方です。

:asterisk:4行目は同じ/src配下のApp.jsファイルになります。
　こちらのコンポネントをimportしでviewに反映しています。
　こちらでは`/App`の形で省略しています。
　**/src/App.js**についてが、後程説明します。

:asterisk:7行目はAppというコンポネントを使っていて、
　後半の`document.getElementById('root')`部分は
　[始めよう React（基礎編）！ Part 1 - React とは
](https://qiita.com/ShowJs/items/eaed67ae0422ac77449d#react%E3%81%AE%E6%9B%B8%E3%81%8D%E6%96%B9jsx)　に紹介している内容と同じです。
　こちらの`getElementById('root')`は
　**/public/index.html**(28行目)から取ってます。
![react-public_index.png](https://qiita-image-store.s3.amazonaws.com/0/293426/d13d069b-e40c-f050-21fc-8e2e5e193668.png)

---
###:two:　/src/App.js
先程紹介しました/src/App.jsについては、
現在`$npm start`または`$yarn start`で見た画面はこちらの画面の内容を表示してます。
![src_appjs.png](https://qiita-image-store.s3.amazonaws.com/0/293426/571cef7e-a765-2bc1-e8d6-71fcc231ce81.png)
:asterisk: 1行目基本的なreactのページの書き方です。
　**'react**'というパッケージの**'React と　Component'**を引用しています。

:asterisk: 5行目はES6の書き方で、
　Appという**class**を定義し、**'react**'の**Component**を継承しています。

:asterisk: 21行目でexport、**App**という名のコンポネントとして出力します。


実際の変化を見て見ましょう！
少し文字部分のところを変更して、
![react_change.png](https://qiita-image-store.s3.amazonaws.com/0/293426/1b0a7b18-0401-94ab-9cc0-b5111a5adaf2.png)
:arrow_down::arrow_down:Hello to Reactになりました！
![react_changed.png](https://qiita-image-store.s3.amazonaws.com/0/293426/d8005646-9fc2-c1c4-b84f-5e4627289b78.png)


#最後に
Reactの**Hello world**の紹介はここまでです！
React実はそんなに難しくないでしょう！

次回はこちらのcreate-react-appの内容を修正して、初めてのコンポネントを作ります！
興味がある方是非見てみてください！！