React の履歴(No.5)

フレームワーク	特徴
AngularJS	MVCに対応したフルスタックフレームワーク．パフォーマンス面でReactとVue.jsに負けている
Vue.js	UIに特化したフレームワーク．Reactと比較すると少しパフォーマンス面で劣っている

試してはいないググった情報

↑

プロジェクトの作成と実行†

プリジェクトの作成にはnpxコマンドを使う

# プロジェクトの作成
% npx create-react-app プロジェクト名

# （対象ディレクトリに移動して）Reactプロジェクトの実行
% npm start

↑

初期状態†

プロジェクト作成後の初期状態で注目すべきファイルは'index.js'

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

createRoot
- ReactElementの起点となる要素（ルート要素）を指定する
- ルート要素に対して`root.render()`を実行してReactElementを描画している

StrictMode
- Strict（厳密）モードで動作させる
- レガシーなAPIや正しくないライフサイクルでの利用を監視し，警告を出してくれる
- 開発モードでのみ機能する

reportWebVitals
- パフォーマンス監視を行う
- `reportWebVitals(console.log);`とすることでパフォーマンス監視ログをコンソールに出力することができる

↑

コンポーネント†

コンポーネントを定義する方法は2つある
以前のバージョンではクラスコンポーネントのみで利用することのできる機能があったが，バージョンアップで両者ともできることの差は殆どなくなった
公式では関数コンポーネントの利用を推奨している

関数コンポーネント: 関数として定義
クラスコンポーネント: class構文で定義

↑

JSX†

コンポーネントはJSX式を返す必要がある
JSXは実行時にReact.createElementメソッドに自動的に変換される

↑

式を埋め込む†

JSX式には`{...}`で式を埋め込むことができる

const name = "John";
const element = <h1>Hello, {name}</h1>;

// 変数と文字列を結合した場合は`{...}`内で行う
// 属性値を指定する場合は`"{...}"`のように囲わない
const profile = <img src={'https://profile/' + name + '.jpg' />;

↑

無視される値†

`{...}`内にBoolean/Undefined/Nullが書かれた場合は無視される（何も表示されない）
```
const name = true;
const element = <h1>{name}</h1>;
// → <h1></h1>が描画される
```

↑

条件分岐†

JSX式で条件分岐を実現する方法はいくつかある

↑

if文†

let elem = <p>Hello</p>;
if (!nameHidden) {
   elem = <p>Hello, {name}</p>
}

return (
   <h1>Welcome</h1>
   {elem}
);

↑

即時関数†

return (
   <h1>Welcome</h1>
   {(() => {
      if (nameHidden) {
         return <p>Hello</p>;
      }
      else {
         return <p>Hello, {name}</p>;
      }
   })()}
);

↑

3項演算子†

return (
   <h1>Welcome</h1>
   <p>Hello {nameHidden ? null : (', ' + name)}</p>
);

↑

短絡評価†

nameHiddenがtrueの場合は短絡評価により2番目が評価されない
`nameHidden && xxx`の場合はnameHiddenがfalseで2番目が評価されない
```
return (
   <h1>Welcome</h1>
   <p>Hello {nameHidden || (', ' + name)}</p>
);
```

↑

ルート要素†

JSXでは常に1つの要素を返す必要がある

// divで囲って1つの要素としている
return (
   <div>
      <h1>Hello</h1>
      <p>JSX</p>
   </div>
);

div等のタグ階層を深くしない`<React.Fragment>`も用意されている
- React.Fragmentはダミー要素であり描画時には無視される
- 省略形として`<>...</>`でもReact.Fragmentが利用できる

↑

Props†

親コンポーネントから子コンポーネントへ値を渡すための手段
子コンポーネントはPropsの値を変数のように保持して動的に変更することはできない
Propsにはオブジェクトや関数などJavaScriptで式で表せるものは渡すことができる

App.js

export default function App() {
   return (
      <Label name="John" />
   );
}

Label.js

export default function Label(props) {
   return (
      <>
         <h1>Hello</h1>
         <p>{props.name}</p>
      </>
   );
}

↑

分割代入†

子コンポーネントの引数に`{名前, ...}`とすることでも親コンポーネントから値を受け取ることができる
分割代入を用いればデフォルト値も指定することができる
呼び出し時に要求するPropsが明確になるメリットがある

Label.js

export default function Label({ name = 'React' }) {
   ...
}

↑

State†

関数コンポーネントでStateを使用するためにはuseState関数で初期化とセッター作成を行う

const [stateを格納する変数, stateの値を更新する関数] = useState(初期値)

Counter.js

import { useState } from 'react';

export default function Counter({ init }) {
   const [count, setCount] = useState(init);
   return (
      <>
         <p>{ count }</p>
         <button onClick={ () => setCount( c => c + 1 ) }>++</button>
      </>
   );
}