React+Redux学習への道のり。～Reactを知る2～

#はじめに・・・
いざ環境ができても、一体何をどうすればいいのか全く分からないので
Reactの開発ができるレベルまでもっていきます。
なお、概念的なことは事前に公式サイトでお勉強しました！(全然理解できてませんが)

※今回もReactのことだけ

##まずはフォルダ構成を知る
`npx create-react-app sample`を実行することでsampleというReactアプリケーションが完成します。
完成すると、フォルダーは以下の構成になります

```
sample
 |-node-modules 
 |-public       
　　|-index.html
　　|-：
 |-src          
　　|-index.js
　　|-App.js
　　|-：
 |-package.json
 |-yarn.lock
 |-README.md
 |-.gitignore
```

yarn.lock と package.jsonはバージョンを管理するためのファイル。
モジュールのバージョンを見るときに開いたりはします。

##各フォルダの説明
###node-modules
nodeのモジュール置き場。
`npm install xxxx`でインストールしたモジュールが配置されるフォルダ。
なので開発する際は触らない。

###public
静的ファイル(画像など)の置き場。
このフォルダの中には`index.html`が配置されている。
あんまりここも触らない？

###src
JavaScriptコードの置き場。
ここがReact開発の肝となるフォルダ！

# ファイルを見てみる
アプリを作成して、何もせずにアクセスすると以下のような画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269980/f315ce2f-67c3-3afa-88d0-ca771e8d6d6e.png)

なぜこの画面が表示されるのか、実際にソースを見てみます。

## public/index.html = テンプレートファイル
画面に表示されているのはHTMLなのだから、まず真っ先に見ます。内容は・・・

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

```
なんのこっちゃわかりません。
メタ情報とリンク情報とbodyの内容だけ・・・。
画面に表示されている`Edit src/App.js and save to reload.`なんてどこにも記述されていません。

このindex.htmlはただの**テンプレートファイル**。
実際の内容は**対となるメインプログラムindex.js**に記述されています。

## src/index.js = HTMLとjsを紐づけるメインプログラム
内容は・・・

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

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

serviceWorker.unregister();
```

だいぶ関連が見えてきました。けどまだ`Edit src/App.js and save to reload.`はありません！
このindex.jsはHTMLのテンプレートとJavaScriptのコンポーネントを組み合わせてレンダリングし、実際の表示を作成している**ルート**になります！

`ReactDOM.render()`がHTMLとJavaScriptを組み合わせてる箇所。
ここでポイントになるのが、**何を**・**どこに**組み合わせるか？というところ。
それはソースを見れば大体わかります。

```
ReactDOM.render(
  <React.StrictMode>                 ← 「何を」の部分
    <App />
  </React.StrictMode>,
  document.getElementById('root')    ← 「どこに」の部分
);
```
###「何を」の部分
`<React.StrictMode>` 
 開発モードにしか適用されないツールを起動するためのタグ。詳細は[公式へ](https://ja.reactjs.org/docs/strict-mode.html)
`<App />`
Appコンポーネント。`import App from './App';`から読み取れるようsrc/App.jsの内容。
###「どこに」の部分
`document.getElementById('root')`これはpublic/index.htmlにあった`<div id="root"></div>`

まとめると・・・
index.htmlの`<div id="root"></div>`にsrc/App.jsの内容がレンダリングされる。
ってことです。

><<余談>>
index.htmlに`<div id="root2"></div>`と追記すれば、index.jsでも`document.getElementById('root2') `が利用できたりします。
※ここら辺の使われ方とかはいまいちわかってません。

## src/App.js　=　コンポーネント

```
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

```
ようやく見つけました。`Edit src/App.js and save to reload.`
ここが実際の内容に当たるってことです。App.jsの内容を編集すれば画面に表示される内容も変更されます。
なのでApp.jsをお手本にコンポーネントの開発をしていくと思います。

HTMLのタグが書かれてますが、これが**JSX**なので微妙に記述方法が違います。ここは場数踏んで覚えるのが一番かなぁと。

#おわりに・・・
なお私はSPAを完全理解しておらず、index.htmlやcontents.htmlといった風にHTMLファイルが沢山あると思ってました。なので、『publicフォルダにhtmlファイルつくるんやろなぁ』と思ってました。
ですが違うんですね～。Reactの場合htmlファイルはindex.html一つだけ・・・。画面遷移をするには`react-router`ってのを使うらしい。またこれは別途勉強します。はい。

#お世話になったサイト
[初心者のためのReact入門](https://www.tuyano.com/index2?id=5642554087309312)
とてつもなくお世話になりました。