📝

[React]基礎・仕組みガイド:ブラウザに表示される流れ

2024/08/26に公開

JavaScript

Reactを使ってブラウザにコンテンツを表示するまでの基本的な流れを理解することは、Reactを始める上で非常に重要です。この記事では、そのプロセスを簡単に説明します。

全体の流れ

App.js: コンポーネントのJSXが定義される場所。
index.js: App.jsで定義したコンポーネントをHTMLに変換してブラウザに表示させる場所。
index.html: 最終的にHTMLを表示する場所であり、ReactのアプリケーションがマウントされるDOM要素が含まれる。

App.js

App.jsには、Reactコンポーネントを定義する場所

app/javascript/packs/App.jsの例

import React from "react";

const App = () => {
  return <div>ここにコード書いてく。</div>;
};

export default App;

index.js

App.jsのJSXを、HTMLに変換する場所
書き方は定型分なので暗記はしなくていい。

POINT
・renderでどこのファイル参照してるか記載（App）
・**getElementById("root")**でID名指定（後からhtmlで表示する時に使う）

app/javascript/packs/index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";  // App.jsをインポート

document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(<App />, document.getElementById("root"));
});

index.html

実際にReactの中身を表示したい場所のこと。IDで出力

表示したいview

<div id="root"></div>

JavaScript パックの追加

app/views/layouts/application.html.erbに必要な JavaScript パックを追加。

app/views/layouts/application.html.erb

<%= javascript_pack_tag 'root' %>

自分用メモ

Railsで作成してるアプリ内の複数の場所でReactの技術使いたい（中身は別）ってなったら、極端な話、

app/javascript/components/内に、A.jsとB.js作って、それぞれ定義
app/javascript/packs/内にA.jsとB.js作って、
IDをそれぞれ[a-root] [b-root]にしてAとBをそれぞれ使いたいviewにIDで表示すればいい

極端だけどシンプルな例

コンポーネントの作成
app/javascript/components/A.js と app/javascript/components/B.js にそれぞれのコンポーネントを定義。
エントリーポイントの作成
app/javascript/packs/a.js と app/javascript/packs/b.js を作成し、それぞれのコンポーネントをインポートして、適切なHTML要素に変換

例（A用）

// app/javascript/packs/a.js
import React from "react";
import ReactDOM from "react-dom";
import A from "../components/A";  // Aコンポーネントをインポート

document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(<A />, document.getElementById("a-root"));  // IDを指定してレンダリング
});

例（B用）

// app/javascript/packs/b.js
import React from "react";
import ReactDOM from "react-dom";
import B from "../components/B";  // Bコンポーネントをインポート

document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(<B />, document.getElementById("b-root"));  // IDを指定してレンダリング
});

HTML内での使用
ビューやレイアウトファイルにそれぞれのコンポーネントを表示したい場所に、対応する ID を持つ HTML 要素を追加します。

a.html.erbとb.html.erb

<div id="a-root"></div>  
<div id="b-root"></div>

JavaScript パックの追加
app/views/layouts/application.html.erb や該当するレイアウトファイルに、必要な JavaScript パックを追加します。