ReactJSファイル連携解説
2024-10-19
ReactJSにおけるindex.jsとindex.htmlの連携について
ReactJSでは、アプリケーションのルートコンポーネントであるindex.jsと、HTMLの構造を定義するindex.htmlが連携して、アプリケーションのレンダリングを行います。この連携において、index.jsがindex.html内の要素のIDを参照し、それに対応するReactコンポーネントをマウントする仕組みが重要です。
具体的な連携プロセス
-
<div id="root"></div> -
index.jsで、ReactのDOMレンダリング機能である
ReactDOM.render()を使用して、ルートコンポーネントを指定したIDの要素にマウントします。import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.rend er(<App />);
参照の仕組み
root.render()は、取得した要素に指定したReactコンポーネントをレンダリングします。ReactDOM.createRoot()は、指定したIDの要素を取得します。
このプロセスにより、index.jsがindex.html内の要素のIDを参照し、その要素にReactコンポーネントをマウントすることが可能になります。
重要なポイント
- index.htmlは、Reactコンポーネントをマウントするための要素を提供する必要があります。
- index.jsは、index.htmlの構造を理解し、適切なIDを参照する必要があります。
- IDは一意である必要があります。同じIDが複数の要素に指定されている場合、予期しない動作が発生する可能性があります。
index.html
<!DOCTYPE html>
<html>
<head>
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
<div id="root"></div>: Reactコンポーネントをマウントするための要素。IDはrootに設定されています。
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDO M.createRoot(document.getElementById('root'));
root.render(<App />);
root.render(<App />):Appコンポーネントをルート要素にレンダリングします。ReactDOM.createRoot(document.getElementById(' root')):index.htmlの<div id="root"></div>要素を取得し、Reactのルート要素を作成します。
App.js (例)
import React from 'react';
function App() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
export default App;
Appコンポーネント: 実際にレンダリングされるコンポーネント。
連携の仕組み
- index.htmlが読み込まれる。
- index.jsが読み込まれ、実行される。
ReactDOM.createRoot()が<div id="root"></div>要素を取得する。root.render()がAppコンポーネントをレンダリングし、<div id="root"></div>要素内に表示する。
JSXの直接挿入
- この方法では、
index.jsファイルは不要になります。 - index.htmlの
<body>タグ内に直接JSXコードを挿入することができます。
<!DOCTYPE html>
<html>
<head>
<title>React App</title>
</head>
<body>
<div id="root">
<h1>Hello, React!</h1>
</div>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></sc ript>
</body>
</html>
サーバーサイドレンダリング（SSR）
- SSRは、SEOの改善や初期表示速度の向上に効果があります。
- 生成されたHTMLをクライアントに送信し、ブラウザで表示します。
- サーバー側でReactコンポーネントをレンダリングし、HTMLを生成します。
node環境でサーバーサイドレンダリングを行う場合、以下のようなコードを使用します。
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App';
cons t app = express();
app.get('/', (req, res) => {
const html = ReactDOMServer.renderToString(<App />);
res.send(`
<!DOCTYPE html>
<html>
<head>
< title>React App</title>
</head>
<body>
<div id="root">${html}</div>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></sc ript>
</body>
</htm l>
`);
});
app.listen(3000, () => {
console.log('Server listening on port 3000');
});
クライアントサイドレンダリング（CSR）
- 一般的なWebアプリケーションでは、CSRが最もよく使用されます。
- デフォルトのレンダリング方法であり、ブラウザ側でReactコンポーネントをレンダリングします。
reactjs
