Reactのファイル構成とconstructorの周り

# ご注意

この記事は[16.8.0未満のバージョンのReact学習サイト](https://prog-8.com/courses/react)により学んだものに基づいて記載しています。

なおまだ`create-react-app`もやったことがない、教材が提供してくれたファイル構成しか見てない。
`create-react-app`を自分で打った結果に対して調べた方が良さそうと、途中で気付いた。
いったんこのまま書き連ねる。

# ファイル構成の基本

```text
プロジェクトフォルダ
├src
│ ├components
│ │ └App.js
│ └index.js
├index.html
└stylesheet.css
```

|ファイル|なにこれ|
|---|---|
|index.html|スカスカのhtml|
|stylesheet.css|index.htmlの飾りつけ|
|index.js|Reactアプリを実行する際、一番最初に呼び出されるファイル|
|App.js|Reactで作ったモジュール|

参考：[モジュール（英：module）とは](https://wa3.i-3-i.info/word12243.html)

>「部品」のこと。
>もう少し具体的に書くと
>「そいつ単独でも機能としては成立するけど、普通は他のものと組み合わせて使うよ！」な部品のこと

## index.html

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="stylesheet.css">    
    <title>ここにタイトル</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>
```

`<script src="bundle.js"></script>`ってなんだ？
参考：[【JavaScript】モジュール...バンドル...webpackとかって結局何なんだい？](https://qiita.com/wanwanwan/items/9d8d3d5a6ef4be688c3e)
参考：[Webpackってどんなもの？](https://qiita.com/kamykn/items/45fb4690ace32216ca25)

うーん、いまいち…と思ったら、この学習サイトでは上記のHTMLを実行すると
プレビュー表示される画面のソースが以下のように書き換わっていた。

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <title>ここにタイトル</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js?instanceId=c9eade6290&amp;ideKey=ip-10-120-58-38&containerPort=3000"></script>
  </body>
</html>
```

Web上でソースエディットと実行結果のプレビューが表示されるサービスなのだが、きっと裏でごにょごにょしているのだろう。ユーザは気にしなくて良さそうだ。なーんだ。

## index.js

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

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

参考：[React初心者の実行の流れに関するメモ書き](https://qiita.com/take9021/items/c363d15bd5fdc3b0109c)

>Reactアプリを実行する際、一番最初に呼び出されるファイル

頭の2行は恐らく定型文。

`ReactDom.render(comp, target)`とは：
`target`のSelectorで見つけた要素に`comp`をrender(与える、返す)。

3行目で`import App from ~`により`App`を得て、
こいつを`<App />`という形で指定して埋め込むらしい。

記載の混乱の種その①

## App.js

`ReactDom.render(comp, target)`で`comp`の部分に該当する部品を作る処理を定義
`{}`とか`=`とか`()`が複雑。わざと混乱させようとしてない？！？

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

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: 'きつねうどん'};
  }
  
  // handleClickメソッドを定義してください
  handleClick(name) {
    this.setState({name:name});
  }
  
  render() {
    return (
    	<div>
    	  <h1>こんにちは、{this.state.name}さん！</h1>
          <button onClick={() => {this.handleClick('たぬきそば')}}>たぬきそば</button>
          <button onClick={() => {this.handleClick('きつねうどん')}}>きつねうどん</button>
      </div>
    );
  }
}
export default App;
```

## React.ComponentをextendsしてAppを作る

参考：[【JavaScript】クラス⑤ 〜継承〜](https://qiita.com/andota05/items/ac4a7a8287f9d5ce6013)

### constructor

参考：[コンストラクタ（英：constructor）とは via わわわ](https://wa3.i-3-i.info/word13646.html)

>クラスをnewした瞬間に実行される関数のこと

マジで15年間インフラしかやってこなかった人間は、アプリ開発者が口にする「コンストラクタでー」とか何いってんだこいつ日本語喋れよとか思ってたけど、ようやくスッキリした。

でも`React`はいいね、ちゃんと`constructor`とか書いてあって。
Javaだとクラスメイト同名のメソッド = コンストラクタでしょ？
知らないと読めねぇーって。マジで。

### props

参考：[Reactの基本：propsについて](https://zenn.dev/enumura/books/a882cb41219318/viewer/0d233b)
参考：[propsとstateのイメージをつかむ【はじめてのReact】](https://qiita.com/rio_threehouse/items/7632f5a593cf218b9504)

>props : 親コンポーネントから子コンポーネントへ値を渡すための仕組み
>state : 各コンポーネントごとに持つ、コンポーネントの状態を管理する仕組み

う…うん、ちゃんと勉強してからまた書く！(理解してない)

### super(props)

参考：[なぜsuper(props) を書くの? - React界のカリスマ「Dan Abramov」のブログ](https://qiita.com/hand-dot/items/61a4b808f110b12e4281)

>JavaScriptではsuperは親クラスのコンストラクタを参照します。(この例では、親クラスはReact.Component実装を指しています。)
>重要なのは、JavaScriptはあなたがコンストラクターで親のコンストラクターを呼ぶまでthisは使わせてくれません。

>厳密に必要というわけではないですが、私は常にsuper(props)で渡すことをオススメしています。

#### \*\*おおっと\*\*

>Hooksではsuperもしくはthisさえ持っていません。
>しかし、これは別の日の話題としましょう。

マジでｗ