Zenn
⚙️

そもそもReactがどうやって動いているのか、まとめてみる

2024/03/02に公開
JavaScript
React
初心者
JSX
tech

「勉強しなきゃなぁ」とずっと思っていただけでちゃんとReactを勉強したことがなかった私でしたが、「これからはじめるReact実践入門 コンポーネントの基本からNext.jsによるアプリ開発まで」という良さげな本を見つけて即購入し、Reactの勉強を始めました。
https://amzn.asia/d/0mEB3gE
以前Vue.jsでその仕組みについてよく知らず勉強して痛い目にあったので、文法などについて学ぶ前にReactがそもそもどのように動いているのかを本を参考にまとめ、備忘録として記録したいと思います。

プロジェクトの作成~生成されるファイルの確認

まずはReactプロジェクトを作成します。

npx create-react-app react-nyumon

インストールが終わったら、生成されたプロジェクトのディレクトリに移動してnpm startで起動できます。

生成されたファイルについての簡単な説明は以下の通り。

  • node_modulesディレクトリ
    • ライブラリ
  • publicディレクトリ
    • index.html
      • トップページ
    • manifest.json
      • アプリの構成情報
      • Webページをネイティブアプリとして使いたい時にスマホに表示されるアイコンやタイトルなどを設定できる
    • その他ファビコン画像など
  • srcディレクトリ
    • index.js
      • 起動ファイル
    • App.js
      • Appコンポーネントの本体
    • index.css
      • アプリ共通スタイル
    • App.css
      • APPコンポーネントのスタイル
    • reportWebVitals.js
      • パフォーマンス監視用サービス
    • その他テストコードなど
  • package.json
    • パッケージの情報

サンプルアプリの構造

create-react-appによって生成されるサンプルアプリは、トップページであるindex.htmlが真っ先に呼び出され、その後index.js→App.jsというふうに実行されていきます。

index.html

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- 中略 -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

id="root"になっている<div id="root"></div>という要素を起点にReactアプリは動いています（ルート要素ともいう）。

index.js

続いて呼び出されるindex.jsがReactアプリのスタート地点（エントリーポイント）です。

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>
);

reportWebVitals();

まずはじめにReactに関するライブラリ、およびindex.cssなどのアプリに固有のファイルをインポートしています。reportWebVitalsはパフォーマンスの監視に関するサービスで、reportWebVitals(console.log);のようにreportWebVitals()の部分を書き換えることでパフォーマンス監視を利用できるようになります。

const root = ReactDOM.createRoot ~からがReactアプリ本体で、createRootメソッドの第一引数にReactアプリの埋め込み先を指定します。これにより配下の<App>コンポーネントを実行してidがrootである要素に描画させることができます。コンポーネントもタグの形式で呼び出すのが特徴です。ここではAppコンポーネントを<App>というタグ形式で呼び出しています。

※サンプルアプリはAppコンポーネントしかありませんが、実際には複数のコンポーネントを組み合わせていくことでページを作っていきます。

App.js

index.jsの次はApp.jsが呼ばれます。

App.js
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

ここでAppコンポーネントが定義されています。基本的にJavaScriptの関数と同じですが、

  • 関数名はパスカルケース(PrintHelloworldのような形式)
  • returnで示される戻り値はReact要素（react.element型オブジェクト）
  • 関数のエクスポートが必要
    • サンプルアプリはexport default App;でエクスポートしている

という条件があるので注意しましょう。

なお、コンポーネントにはAppコンポーネントのように関数で定義された関数コンポーネントの他にclass構文で定義されたクラスコンポーネントもあるようですが、関数コンポーネントの利用が推奨されているようです。

参考文献

「これからはじめるReact実践入門 コンポーネントの基本からNext.jsによるアプリ開発まで」
https://amzn.asia/d/gyfZjRw

GitHubで編集を提案

Discussion