【React】create-react-app を使わずにReactアプリを立ち上げる

2022.02.05

こちらの書籍より学ばせていただいた内容をまとめています。

書籍の説明

書籍名： Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス
著者： Alex Banks 著
出版社： オライリージャパン 発行
発売日： 2021/8/6

create-react-appで簡単にアプリ立ち上げができるReact。このcreate-react-appがいかにありがたいものなのか、そのバックグラウンドで行われていることを知るために、これを使わずにアプリを立ち上げます。

目次
  1. ベースとなるHTMLを作成する
  2. webpack
  3. プロジェクトの作成
  4. まとめ

ベースとなるHTMLを作成する

ブラウザでReactを動作させるためには、以下2つのライブラリが必要になります。

・React

・ReactDOM

これらライブラリをunpkg.comが提供するCDNからダウンロードして使用します。

ベースとなるHTMLがこちら

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React Samples</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script></script>
  </body>
</html>

webpack

Reactアプリをブラウザ上で動かすにはwebpackの構築が必要になります。

webpackとは

JavaScriptのモジュールバンドラー。

つまり、複数のモジュールを一つのファイルにまとめるものです。

webpackの役割
  • JSXおよびES.nextの変換
  • コンポーネント間の依存関係の管理
  • 画像やCSSの最適化

create-react-appを使って環境構築をする場合は、これらwebpackが行っている仕組みを裏で構築してくれているため、設定不要です。

プロジェクトの作成

それではプロジェクトを作成していきます！

$ mkdir recipes-app

$ cd recipes-app

package.jsonを生成。-yを付けることで全てデフォルトを適用してくれます
$ npm init -y

reactとreact-domをinstall
$ npm install react react-dom serve

必要なファイルを作成し、開発を進めていきます。

webpackを使ったビルド環境の構築

webpackを使って、複数ファイルに分割されたモジュールを一つのファイルに結合します。このビルドは、ブラウザで効率よくロードするために行うものです。

$ npm install --save-dev webpack webpack-cli

webpackのインストールができたところで、webpackに対し、結合手順を教える必要があります。

そのため、プロジェクトごとに設定ファイルを記述します。

設定ファイルは、webpack.config.jsという名前で、ルートディレクトリに配置。

var path = require("path");

module.exports = {
  // エントリファイルを指定し、このファイルを起点に依存モジュールのグラフを形成する
  entry: "./src/index.js",
  // 最終的なバンドルの出力先を指定
  output: {
    path: path.join(__dirname, "dist", "assets"),
    filename: "bundle.js",
  },
};

JSXをコンパイルするためにBabelをインストール

$ npm install babel-loader @babel/core --save-dev

これでBabelがインストールできたので、webpackに対し、Babelを使うように指示する。

module配下のrulesフィールドに追記する。

var path = require("path");

module.exports = {
  // エントリファイルを指定し、このファイルを起点に依存モジュールのグラフを形成する
  entry: "./src/index.js",
  // 最終的なバンドルの出力先を指定
  output: {
    path: path.join(__dirname, "dist", "assets"),
    filename: "bundle.js",
  },
  module: {
    rules: [{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }],
  },
};

rulesフィールドに追加した内容の意味

.jsファイルは全てbabel-loaderにより処理されるよう指定。

excludeには除外するファイルを指定。

Babelのプリセットを指定する

プリセットとは、Babelのプラグインのセットが定義されたもの。

$ npm install @babel/preset-env @babel/preset-react --save-dev

Babelの設定ファイルで、プリセットを指定する。

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

webpackを実行

$ npx webpack --mode development

これで、ビルドまで行うことができました。

まとめ

create-react-appを使えば、一瞬で構築してくれる内容を一から自分でwebpackで構築すると、結構大変です。。。もう使わない理由がわからないです。

以上、読んでいただきありがとうございました。

コメント