Reactの環境構築

JS
2024.05.05

reactを使うには環境構築が必要です。

以下に２つの環境構築をご紹介します。

2つともバージョンは以下の通り。

node.jsのバージョンは、22.0.0

npmのバージョンは、10.6.0

手動セットアップ

用意するファイル

my-app/
  |- public/              // index.htmlファイルを含む公開ディレクトリ
  |   |- index.html       // Reactアプリケーションのエントリーポイント
  |
  |- src/
  |   |- index.js         // エントリーポイントのJavaScriptファイル
  |   |- App.js           // Appコンポーネントのファイル
  |
  |- webpack.config.js    // Webpackの設定ファイル
  |- package.json         // Node.jsプロジェクトの設定ファイル
  |- babel.config.js

ファイルの中身は以下の通りです。

index.js

import React from "react";
import { createRoot } from "react-dom";
import { StrictMode } from "react";
import { App } from "./App";

const root = createRoot(document.getElementById("root"));

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "My React App",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development --open",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "babel-loader": "^8.2.3",
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.0",
    "@babel/preset-react": "^7.16.0",
    "webpack": "^5.67.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.4"
  }
}

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js', // エントリーポイントの指定
  output: {
    path: path.resolve(__dirname, 'dist'), // 出力先ディレクトリの指定
    filename: 'bundle.js' // 出力ファイル名
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader' // Babelを使ってJavaScriptの変換を行う
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx'] // 拡張子を省略してimportできるようにする
  }
};

App.js

import React from "react";

export const App = () => {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This is a simple React application.</p>
    </div>
  );
};

babel.config.js

module.exports = {
  presets: ["@babel/preset-react"]
};

ターミナルでコマンドを打つ

ファイルが準備できたら、プロジェクトディレクトリに移動して、以下のコマンドを打ちます。

npm install
npm start

これで環境構築が完了です。

Create React App

もう１つの環境構築の方法がCreate React App

事前に準備するファイルもなくすぐに環境構築ができます。

以下の通りコマンドを打てばあっという間にReactの環境構築が完成です。

npx create-react-app プロジェクト名
cd プロジェクト名
npm start

next.jsを使用した環境構築

npx create-next-app@latest

これで環境構築ができます。

cd プロジェクト名
npm run dev

これで開発スタートです。