react 勉強メモ 1日目

why jsx？

jsxがなかったら...
全て React.createElement()でDOMを作らなければならない

npm run build で jsxファイルをjsのファイルにトランスパイルして一つにまとめる（バンドルする）

書き方

App.js

import "./styles.css";
export default function App() {
 return (
   <div className="App">
     <h1>Hello CodeSandbox</h1>
     <h2>Start editing to see some magic happen!</h2>
   </div>
 );
}

index.js

import { render } from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
render(<App />, rootElement);

render(DOM, 描画対象のroot);

みたいなイメージでOK

Functional Component

- ESアロー関数

- stateを持たない

- propsを引数に

- jsxをreturnする

Class Component

- React.Componentを継承

- ライフサイクルやstateをもつ

- prpsにはこのクラスの中での宣言であることを示すためthisが必要

- renderメソッド内で Jsxをreturnする

※ 最近のreactはなるべく使わないケースが多い（なるべくcomponentにstateを持たせたくないのでできるだけ Functional Componentを使う）

環境構築

create-react-appは記事とか読みながらなら10minくらいでさくっと終わるので省略

state

render()内では値を変更してはならない

stateの変化をきっかけに再renderするので無限ループになってしまう

setState()で値を変更する

stateを使えばページリロードなしで表示を切り替えることができる

stateの設定方法

constructorで設定

  // 公開状態を反転させる関数
 togglePublished = () => {
   this.setState({
     isPublished: !this.state.isPublished
   });
 };

無限にrenderされるのを防ぐために関数型で呼び出す

onClick={() => this.togglePublished()}

ライフサイクル

コンポーネントの「時間の流れ」

- Mounting: 生まれる瞬間

- Updating: 成長する期間

- Unmounting: 死ぬ期間

Why ライフサイクル？

関数の外に影響を与える関数を記述するため

- DOM変更

- API通信

- ログ出力

- setState()

副作用 = 適切な場所に配置すべき処理