⛏️

create-react-appを使わないReact環境構築

2023/01/03に公開約3,800字

はじめに

create-react-appを使わずにReactの環境作るよ。

下記の参考サイト通りに進める。
インストールしたパッケージの概要や、Webpack設定ファイルの項目の概要など書いてくれてるのでわかりやすい。
https://dev.to/ivadyhabimana/how-to-create-a-react-app-without-using-create-react-app-a-step-by-step-guide-30nl

成果物はこちら。
https://github.com/kkznch/template-react-for-inspection/tree/01-without-react-create-app

手順

Babelのインストール

JSXをターゲット環境で実行できる形式に変換するために、Babelと関連パッケージをインストールする。

$ yarn add --dev @babel/core babel-loader @babel/cli @babel/preset-env @babel/preset-react

Webpackのインストール

複数のJSファイルを一つのファイルにバンドルするために、Webpackと関連パッケージをインストールする。

$ yarn add --dev webpack webpack-cli webpack-dev-server html-webpack-plugin

Reactのインストール

Reactと関連パッケージをインストールする。

$ yarn add react react-dom

ファイルを作成

public/index.html を作成する。

public/index.html
<html lang='ja'>
  <head>
    <meta charset='UTF-8'>
    <title>React app</title>
  </head>
  <body>
    <div id='root'></div>
  </body>
</html>

src/App.js を作成する。

src/App.js
import React from 'react';

const App = () => {
  return <h1>Hello, world!</h1>;
};

export default App;

プロジェクト直下に index.js を作成する。

index.js
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './src/App.jsx';

const container = document.getElementById('root');
const root = createRoot(container);

root.render(<App />);

Babelの設定ファイルの作成

プロジェクト直下に babel.config.json を作成する。

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

Webpackの設定ファイルの作成

プロジェクト直下に webpack.config.js を作成する。

webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  target: 'web',
  devServer: {
    port: '3000',
    static: {
      directory: path.join(__dirname, 'public'),
    },
    open: true,
    hot: true,
    liveReload: true,
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'public', 'index.html'),
    }),
  ],
};

package.jsonを編集

package.json に下記を追加する。

package.json
"scripts": {
  "start": "webpack-dev-server .",
  "build": "webpack ."
},

実行

CLIで下記のコマンドを実行すると、ブラウザにページが表示される。

$ yarn start

おわりに

TypeScript、ESLitの導入なども別途やっていきたい。

参考

https://dev.to/ivadyhabimana/how-to-create-a-react-app-without-using-create-react-app-a-step-by-step-guide-30nl
https://babeljs.io/docs/en/configuration
https://webpack.js.org/configuration/

Discussion

ログインするとコメントできます