はじめに

Reactを学習するために教材を購入したのですが、その開発環境の構築に時間を要したため忘備録として残したいと思います。
この記事では正常にインストール出来たかを確認するため画面にHello Worldと表示させるまでを行います。
create-react-appは使用しません。

また、途中作成する各設定ファイルについての記事を[React]create-react-appを使わずに環境構築 ~設定ファイル編~で書きました。

Node.jsのインストール(Homebrew)

// node.jsがインストールされているか確認(バージョンが表示されればインストールされている)
$ node -v

// バージョンが表示されなければ以下でインストール
$ brew update
$ brew install nodejs

npmコマンドのインストール

npmコマンドはNode.jsと一緒にインストールされていますが、バージョンが古いとアップデートの必要があります。

// バージョンを確認
$ npm -v

// 必要に応じてアップデート
$ npm install npm --global

プロジェクトの作成

プロジェクト用ディレクトリーを作成し、その中にパッケージの管理ファイル(package.json)を作成します。
今回は、hello_worldという名前でディレクトリーを作成します。

// プロジェクト用ディレクトリーを作成し移動
$ mkdir hello_world
$ cd hello_world

// パッケージの管理ファイル(package.json)を作成
$ npm init -y

パッケージの管理ファイル(package.json)の編集

以下のように編集します。

package.json

{
  "name": "hello_world",
  "version": "1.0.0",
  "description": "Hello React",  
  "private": true,
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "webpack": "webpack -d"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

"description"と"scripts"の内容を編集しました。

description ・・・説明文
private ・・・github等に置かないプライベートなプロジェクトの指定
start ・・・開発ツールの起動スクリプト
webpack ・・・webpack実行様スクリプト

npmパッケージのインストール

以下のコマンドで必要なパッケージをインストールしていきます。
途中でnpm ERRと表示された場合はエラーが発生していますので、タイプミスなどを確認してみたり、必要に応じて調べてみてください。
$ npm install react react-dom $ npm install webpack webpack-cli webpack-dev-server --save-dev $ npm install @babel/core @babel/preset-env @babel/preset-react @babel/cli --save-dev $ npm install eslint babel-eslint eslint-loader eslint-plugin-react --save-dev $ npm install css-loader style-loader babel-loader --save-dev

インストール結果の確認用のコードを書くためのディレクトリーを作成

$ mkdir src
$ mkdir public

設定ファイルの作成

一部のファイル名は.から始まりますが、これらのファイルはファインダーには表示がされませんので注意してください。
以下のファイルを作成します。

No.	作成ファイル
1	.babelrc
2	.eslintrc.json
3	webpack.config.js
4	public/index.html
5	src/index.js

設定ファイルの編集

先ほど作成したファイルを編集していきます。

.babelrc

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

.eslintrc.json

{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "es6": true
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true,
      "jsx": true
    }
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "plugins": ["react"],
  "rules": {
    "no-console": "off"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

webpack.config.js

module.exports = {
  entry: {
    app: "./src/index.js"
  },
  output: {
    path: __dirname + '/public/js',
    filename: "[name].js"
  },
    devServer: {
    contentBase: __dirname + '/public',
    port: 8080,
    publicPath: '/js/'
  },
  devtool: "eval-source-map",
  mode: 'development',
  module: {
    rules: [{
      test: /\.js$/,
      enforce: "pre",
      exclude: /node_modules/,
      loader: "eslint-loader"
    }, {
      test: /\.css$/,
      loader: ["style-loader","css-loader"]
    }, {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
     }]
  }
};

表示用ファイルの編集

public/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1" />
  <title>Hello world.</title>
</head>
<body>
  <div id="root"></div>
  <script type="text/javascript" src="js/app.js" charset="utf-8"></script>
</body>
</html>

src/index.js

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <h1>Hello, world!!</h1>,
  document.getElementById('root')
)

以上で準備は整いました。

インストール結果の確認

では、webpack開発サーバーを実行して正常に表示されるか確認しましょう。
皆様のブラウザーに正常に表示されていることを祈ります！

$ npm start

// ブラウザーで http://localhost:8080 を開いてください

おわり

これで開発環境を構築し、Hello worldを表示することができました。
設定ファイルの記述に関しては、見づらくなってしまうため別の記事に書こうかと思います。
最後まで見ていただき、ありがとうございました。

[React][mac]create-react-appを使わずに環境構築