Reactパッケージ＠JavaScript¶
はじめに¶
本サイトにつきまして、以下をご認識のほど宜しくお願いいたします。
01. Reactパッケージとは¶
フロントエンドのパッケージ群である。
以下のパッケージを組み合わせて、最低限アプリケーションを作成できる。
- react
- react-dom
- react-scripts (webpack、babelからなる)
02. セットアップ¶
レンダリング手法¶
▼ CSRモード¶
エントリーポイント (mainファイル) でDOMツリーのルートによるrender関数の実行が必要である。
import {StrictMode} from "react";
import {createRoot} from "react-dom/client";
import {App} from "./App.tsx";
const rootElement = document.getElementById("root");
if (!rootElement) {
throw new Error("Failed to find the root element");
}
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>,
);
ワンラインで実装する場合、以下となる。
import {StrictMode} from 'react'
import {createRoot} from 'react-dom/client'
import {App} from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App/>
</StrictMode>,
)
▼ SSRモード¶
記入中...
▼ SSGモード¶
記入中...
03. エクスポート¶
デフォルトエクスポート¶
記入中...
名前付きエクスポート¶
名前付きエクスポートの場合、インポート側は定義した名前以外でインポートできない。
// App.tsxファイル
const Hello = () => {
return (
<p>
Hello, <b>React!</b>
</p>
);
};
// 名前付きエクスポート
export const App = () => {
return (
<div className="App">
<Hello />
</div>
);
};
import {StrictMode} from "react";
import {createRoot} from "react-dom/client";
import "./index.css";
// App.tsxファイルから名前付きエクポート (App) をインポートする
import {App} from "./App.tsx";
createRoot(document.getElementById("root")!).render(
<StrictMode>
<App />
</StrictMode>,
);
04. コンポーネント¶
クラスコンポーネント¶
▼ クラスコンポーネントとは¶
他ファイルで使用できる汎用的なクラスを定義する。
クラスコンポーネントより関数コンポーネントがより推奨である。
import React, {Component} from "react";
export class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {count: 0};
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
</div>
);
}
}
関数コンポーネント¶
▼ 関数コンポーネントとは¶
他ファイルで使用できる汎用的な関数を定義する。
クラスコンポーネントより関数コンポーネントがより推奨である。
import React from "react";
export const MyComponent = () => {
const [count, setCount] = React.useState(0);
return (
<div>
<p>Count: {count}</p>
</div>
);
};
▼ async宣言不可¶
Reactでは、関数コンポーネントでasync宣言は使用できない仕様になっている。
非同期関数をuseEffect関数に渡したうえで、これをコンポーネントにする必要がある。
05. フック¶
useEffect¶
▼ useEffectとは¶
コンポーネント内で非同期処理を使用できるようにする。
const [state, setState] = useState("<初期値>");
useEffect(
// 実行したい非同期関数を定義する
() => {
return () => {
// 事後処理を定義する
};
},
// useEffectを再度実行したい場合に、Stateを設定する
// 省略すると、1回だけ実行する
[state],
);
▼ 第一引数¶
＊実装例＊
import {useEffect, useState} from "react";
export const MyComponent = () => {
const [state, setState] = useState("");
useEffect(() => {
const fetchData = async () => {
const response = await axios.get("https://example.com");
// stateに設定する
setState(response.data);
};
// 非同期処理を実行する
fetchData();
}, []);
// stateを出力する
// state変数はJS型オブジェクトであり、ドットでアクセスできる
return <pre>{state.fooKey}</pre>;
};
▼ 第二引数¶
＊実装例＊
import React, {useState, useEffect} from "react";
import "./App.css";
export const App = () => {
const [count, setCount] = useState(0);
const [count2, setCount2] = useState(0);
useEffect(
() => {
console.log("useEffectが実行されました");
},
// Stateのcount変数の値が変わるたびに、useEffectが実行される。
[count],
);
return (
<div className="App">
<h1>Learn useEffect</h1>
<h2>Count: {count}</h2>
<button onClick={() => setCount((prevCount) => prevCount + 1)}>+</button>
<h2>Count2: {count2}</h2>
<button onClick={() => setCount2((prevCount) => prevCount + 1)}>+</button>
</div>
);
};
▼ 実行の順番¶
useEffect関数はレンダリング後に実行される。
そのため、useEffect関数の後の関数がuseEffect関数よりも前に実行される。
import React, { useState, useEffect } from 'react';
import './App.css';
export App = () => {
const [count, setCount] = useState(0);
// 実行 (1)
console.log('useEffect実行前です');
useEffect(() => {
// 実行 (3)
console.log('useEffectが実行されました');
});
// 実行 (2)
console.log('useEffect実行後です');
return (
<div className='App'>
<h1>Learn useEffect</h1>
<h2>Count: {count}</h2>
<button onClick={() => setCount((prevCount) => prevCount + 1)}>+</button>
</div>
);
}
useState¶
コンポーネント内で状態を操作できるようにする。
import {useEffect, useState} from "react";
const [state, setState] = useState("<初期値>");
// state変数はJS型オブジェクトであり、ドットでアクセスできる
console.log(state.fooKey);
// state変数はJS型オブジェクトであり、JSONを確認したい場合はJSON.stringify関数で変換する
console.log(JSON.stringify(state));