ご注意
この記事は16.8.0未満のバージョンのReact学習サイトにより学んだものに基づいて記載しています。
なおまだcreate-react-appもやったことがない、教材が提供してくれたファイル構成しか見てない。
create-react-appを自分で打った結果に対して調べた方が良さそうと、途中で気付いた。
いったんこのまま書き連ねる。
ファイル構成の基本
プロジェクトフォルダ
├src
│ ├components
│ │ └App.js
│ └index.js
├index.html
└stylesheet.css
| ファイル | なにこれ |
|---|---|
| index.html | スカスカのhtml |
| stylesheet.css | index.htmlの飾りつけ |
| index.js | Reactアプリを実行する際、一番最初に呼び出されるファイル |
| App.js | Reactで作ったモジュール |
「部品」のこと。
もう少し具体的に書くと
「そいつ単独でも機能としては成立するけど、普通は他のものと組み合わせて使うよ！」な部品のこと
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とかって結局何なんだい？
参考：Webpackってどんなもの？
うーん、いまいち…と思ったら、この学習サイトでは上記のHTMLを実行すると
プレビュー表示される画面のソースが以下のように書き換わっていた。
<!DOCTYPE html>
<html>
<head>
<title>ここにタイトル</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js?instanceId=c9eade6290&ideKey=ip-10-120-58-38&containerPort=3000"></script>
</body>
</html>
Web上でソースエディットと実行結果のプレビューが表示されるサービスなのだが、きっと裏でごにょごにょしているのだろう。ユーザは気にしなくて良さそうだ。なーんだ。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('root'));
Reactアプリを実行する際、一番最初に呼び出されるファイル
頭の2行は恐らく定型文。
ReactDom.render(comp, target)とは：
targetのSelectorで見つけた要素にcompをrender(与える、返す)。
3行目でimport App from ~によりAppを得て、
こいつを<App />という形で指定して埋め込むらしい。
記載の混乱の種その①
App.js
ReactDom.render(comp, target)でcompの部分に該当する部品を作る処理を定義
{}とか=とか()が複雑。わざと混乱させようとしてない？！？
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を作る
constructor
参考：コンストラクタ（英：constructor）とは via わわわ
クラスをnewした瞬間に実行される関数のこと
マジで15年間インフラしかやってこなかった人間は、アプリ開発者が口にする「コンストラクタでー」とか何いってんだこいつ日本語喋れよとか思ってたけど、ようやくスッキリした。
でもReactはいいね、ちゃんとconstructorとか書いてあって。
Javaだとクラスメイト同名のメソッド = コンストラクタでしょ？
知らないと読めねぇーって。マジで。
props
参考：Reactの基本：propsについて
参考：propsとstateのイメージをつかむ【はじめてのReact】
props : 親コンポーネントから子コンポーネントへ値を渡すための仕組み
state : 各コンポーネントごとに持つ、コンポーネントの状態を管理する仕組み
う…うん、ちゃんと勉強してからまた書く！(理解してない)
super(props)
参考：なぜsuper(props) を書くの? - React界のカリスマ「Dan Abramov」のブログ
JavaScriptではsuperは親クラスのコンストラクタを参照します。(この例では、親クラスはReact.Component実装を指しています。)
重要なのは、JavaScriptはあなたがコンストラクターで親のコンストラクターを呼ぶまでthisは使わせてくれません。
厳密に必要というわけではないですが、私は常にsuper(props)で渡すことをオススメしています。
**おおっと**
Hooksではsuperもしくはthisさえ持っていません。
しかし、これは別の日の話題としましょう。
マジでｗ