React
をテンプレートにして作成
開始行:
[[FrontPage]]
*目次 [#mb382e5b]
#contents
*JavaScriptモジュールバンドラ [#ka9e2e6b]
-複数のJSファイルを静的にまとめて1つのファイルに出力する
-1つにまとめることをバンドルと言い，それを行うツールをモ...
-1つにまとめることで開発者は<script src="...">をいちいち...
**Vite [#u1fb181a]
-Webpackと比較して高速〜とか紹介されているJSモジュールバ...
-Viteの利用にはNode.jsが必要
*Node.js [#u6d60532]
-JavaScript実行環境の1つ
-ブラウザでしか動作しなかったJSがその他の環境でも動作する...
-npmを同梱
-WebSocketサーバとして用いられることが多い?
-2011年8月に0.1.14がリリース．比較的新しいものだが多く使...
*npm [#vc10b720]
- Node Package Managerの略称
-JavaScriptのパッケージ管理を行う
*React [#e95b8c82]
-UI構築のためのフレームワーク
-宣言的UIで開発
-仮想DOMというメモリのDOMと実DOMを比較し，差分のあるコン...
**その他のフレームワークと特徴 [#h04fca67]
|フレームワーク|特徴|h
|AngularJS|MVCに対応したフルスタックフレームワーク．パフ...
|Vue.js|UIに特化したフレームワーク．Reactと比較すると少し...
CENTER:&size(10){試してはいないググった情報};
*プロジェクトの作成と実行 [#g93b56f9]
-プリジェクトの作成にはnpxコマンドを使う
# プロジェクトの作成
% npx create-react-app プロジェクト名
# （対象ディレクトリに移動して）Reactプロジェクトの実行
% npm start
**初期状態 [#h3da960a]
-プロジェクト作成後の初期状態で注目すべきファイルは'index...
#highlightjs(javascript)
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.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your ap...
// to log results (for example: reportWebVitals(console....
// or send to an analytics endpoint. Learn more: https:/...
reportWebVitals();
-createRoot
--ReactElementの起点となる要素（ルート要素）を指定する
--ルート要素に対して`root.render()`を実行してReactElement...
-StrictMode
--Strict（厳密）モードで動作させる
--レガシーなAPIや正しくないライフサイクルでの利用を監視し...
--開発モードでのみ機能する
-reportWebVitals
--パフォーマンス監視を行う
--`reportWebVitals(console.log);`とすることでパフォーマン...
*コンポーネント [#hed841c8]
-コンポーネントを定義する方法は2つある
-以前のバージョンではクラスコンポーネントのみで利用するこ...
-公式では関数コンポーネントの利用を推奨している
:関数コンポーネント|関数として定義
:クラスコンポーネント|class構文で定義
*JSX [#odaca624]
-コンポーネントはJSX式を返す必要がある
-JSXは実行時にReact.createElementメソッドに自動的に変換さ...
**式を埋め込む [#t1867b02]
-JSX式には`{...}`で式を埋め込むことができる
#highlightjs(javascript)
const name = "John";
const element = <h1>Hello, {name}</h1>;
// 変数と文字列を結合した場合は`{...}`内で行う
// 属性値を指定する場合は`"{...}"`のように囲わない
const profile = <img src={'https://profile/' + name + '....
***無視される値 [#a6adba92]
-`{...}`内にBoolean/Undefined/Nullが書かれた場合は無視さ...
#highlightjs(javascript)
const name = true;
const element = <h1>{name}</h1>;
// → <h1></h1>が描画される
**条件分岐 [#lcc6c7bf]
-JSX式で条件分岐を実現する方法はいくつかある
***if文 [#kce68c0e]
#highlightjs(javascript)
let elem = <p>Hello</p>;
if (!nameHidden) {
elem = <p>Hello, {name}</p>
}
return (
<h1>Welcome</h1>
{elem}
);
***即時関数 [#g6c936a1]
#highlightjs(javascript)
return (
<h1>Welcome</h1>
{(() => {
if (nameHidden) {
return <p>Hello</p>;
}
else {
return <p>Hello, {name}</p>;
}
})()}
);
***3項演算子 [#r329540f]
#highlightjs(javascript)
return (
<h1>Welcome</h1>
<p>Hello {nameHidden ? null : (', ' + name)}</p>
);
***短絡評価 [#t9e33b6d]
-nameHiddenがtrueの場合は短絡評価により2番目が評価されない
-`nameHidden && xxx`の場合はnameHiddenがfalseで2番目が評...
#highlightjs(javascript)
return (
<h1>Welcome</h1>
<p>Hello {nameHidden || (', ' + name)}</p>
);
**ルート要素 [#v5cdd9e8]
-JSXでは常に1つの要素を返す必要がある
#highlightjs(javascript)
// divで囲って1つの要素としている
return (
<div>
<h1>Hello</h1>
<p>JSX</p>
</div>
);
-div等のタグ階層を深くしない`<React.Fragment>`も用意され...
--React.Fragmentはダミー要素であり描画時には無視される
--省略形として`<>...</>`でもReact.Fragmentが利用できる
*Props [#p9947695]
-親コンポーネントから子コンポーネントへ値を渡すための手段
-子コンポーネントはPropsの値を変数のように保持して動的に...
-Propsにはオブジェクトや関数などJavaScriptで式で表せるも...
App.js
#highlightjs(javascript)
export default function App() {
return (
<Label name="John" />
);
}
Label.js
#highlightjs(javascript)
export default function Label(props) {
return (
<>
<h1>Hello</h1>
<p>{props.name}</p>
</>
);
}
**分割代入 [#w1d8be9f]
-子コンポーネントの引数に`{名前, ...}`とすることでも親コ...
-分割代入を用いればデフォルト値も指定することができる
-呼び出し時に要求するPropsが明確になるメリットがある
Label.js
#highlightjs(javascript)
export default function Label({ name = 'React' }) {
...
}
*基本機能 [#fea35e29]
-[[フック>React/フック]]
終了行:
[[FrontPage]]
*目次 [#mb382e5b]
#contents
*JavaScriptモジュールバンドラ [#ka9e2e6b]
-複数のJSファイルを静的にまとめて1つのファイルに出力する
-1つにまとめることをバンドルと言い，それを行うツールをモ...
-1つにまとめることで開発者は<script src="...">をいちいち...
**Vite [#u1fb181a]
-Webpackと比較して高速〜とか紹介されているJSモジュールバ...
-Viteの利用にはNode.jsが必要
*Node.js [#u6d60532]
-JavaScript実行環境の1つ
-ブラウザでしか動作しなかったJSがその他の環境でも動作する...
-npmを同梱
-WebSocketサーバとして用いられることが多い?
-2011年8月に0.1.14がリリース．比較的新しいものだが多く使...
*npm [#vc10b720]
- Node Package Managerの略称
-JavaScriptのパッケージ管理を行う
*React [#e95b8c82]
-UI構築のためのフレームワーク
-宣言的UIで開発
-仮想DOMというメモリのDOMと実DOMを比較し，差分のあるコン...
**その他のフレームワークと特徴 [#h04fca67]
|フレームワーク|特徴|h
|AngularJS|MVCに対応したフルスタックフレームワーク．パフ...
|Vue.js|UIに特化したフレームワーク．Reactと比較すると少し...
CENTER:&size(10){試してはいないググった情報};
*プロジェクトの作成と実行 [#g93b56f9]
-プリジェクトの作成にはnpxコマンドを使う
# プロジェクトの作成
% npx create-react-app プロジェクト名
# （対象ディレクトリに移動して）Reactプロジェクトの実行
% npm start
**初期状態 [#h3da960a]
-プロジェクト作成後の初期状態で注目すべきファイルは'index...
#highlightjs(javascript)
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.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your ap...
// to log results (for example: reportWebVitals(console....
// or send to an analytics endpoint. Learn more: https:/...
reportWebVitals();
-createRoot
--ReactElementの起点となる要素（ルート要素）を指定する
--ルート要素に対して`root.render()`を実行してReactElement...
-StrictMode
--Strict（厳密）モードで動作させる
--レガシーなAPIや正しくないライフサイクルでの利用を監視し...
--開発モードでのみ機能する
-reportWebVitals
--パフォーマンス監視を行う
--`reportWebVitals(console.log);`とすることでパフォーマン...
*コンポーネント [#hed841c8]
-コンポーネントを定義する方法は2つある
-以前のバージョンではクラスコンポーネントのみで利用するこ...
-公式では関数コンポーネントの利用を推奨している
:関数コンポーネント|関数として定義
:クラスコンポーネント|class構文で定義
*JSX [#odaca624]
-コンポーネントはJSX式を返す必要がある
-JSXは実行時にReact.createElementメソッドに自動的に変換さ...
**式を埋め込む [#t1867b02]
-JSX式には`{...}`で式を埋め込むことができる
#highlightjs(javascript)
const name = "John";
const element = <h1>Hello, {name}</h1>;
// 変数と文字列を結合した場合は`{...}`内で行う
// 属性値を指定する場合は`"{...}"`のように囲わない
const profile = <img src={'https://profile/' + name + '....
***無視される値 [#a6adba92]
-`{...}`内にBoolean/Undefined/Nullが書かれた場合は無視さ...
#highlightjs(javascript)
const name = true;
const element = <h1>{name}</h1>;
// → <h1></h1>が描画される
**条件分岐 [#lcc6c7bf]
-JSX式で条件分岐を実現する方法はいくつかある
***if文 [#kce68c0e]
#highlightjs(javascript)
let elem = <p>Hello</p>;
if (!nameHidden) {
elem = <p>Hello, {name}</p>
}
return (
<h1>Welcome</h1>
{elem}
);
***即時関数 [#g6c936a1]
#highlightjs(javascript)
return (
<h1>Welcome</h1>
{(() => {
if (nameHidden) {
return <p>Hello</p>;
}
else {
return <p>Hello, {name}</p>;
}
})()}
);
***3項演算子 [#r329540f]
#highlightjs(javascript)
return (
<h1>Welcome</h1>
<p>Hello {nameHidden ? null : (', ' + name)}</p>
);
***短絡評価 [#t9e33b6d]
-nameHiddenがtrueの場合は短絡評価により2番目が評価されない
-`nameHidden && xxx`の場合はnameHiddenがfalseで2番目が評...
#highlightjs(javascript)
return (
<h1>Welcome</h1>
<p>Hello {nameHidden || (', ' + name)}</p>
);
**ルート要素 [#v5cdd9e8]
-JSXでは常に1つの要素を返す必要がある
#highlightjs(javascript)
// divで囲って1つの要素としている
return (
<div>
<h1>Hello</h1>
<p>JSX</p>
</div>
);
-div等のタグ階層を深くしない`<React.Fragment>`も用意され...
--React.Fragmentはダミー要素であり描画時には無視される
--省略形として`<>...</>`でもReact.Fragmentが利用できる
*Props [#p9947695]
-親コンポーネントから子コンポーネントへ値を渡すための手段
-子コンポーネントはPropsの値を変数のように保持して動的に...
-Propsにはオブジェクトや関数などJavaScriptで式で表せるも...
App.js
#highlightjs(javascript)
export default function App() {
return (
<Label name="John" />
);
}
Label.js
#highlightjs(javascript)
export default function Label(props) {
return (
<>
<h1>Hello</h1>
<p>{props.name}</p>
</>
);
}
**分割代入 [#w1d8be9f]
-子コンポーネントの引数に`{名前, ...}`とすることでも親コ...
-分割代入を用いればデフォルト値も指定することができる
-呼び出し時に要求するPropsが明確になるメリットがある
Label.js
#highlightjs(javascript)
export default function Label({ name = 'React' }) {
...
}
*基本機能 [#fea35e29]
-[[フック>React/フック]]
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
