search
LoginSignup
49

More than 1 year has passed since last update.

posted at

updated at

React環境構築【for mac】

こんな人向け

  • とりあえずReactを触ってみたい人

前書き

  • この記事は【mac】におけるReact環境構築について記載しています
  • この記事は「作りながら学ぶReact入門」を参考にしています
  • 著者様が最新の導入手順をgithubで更新してくださっているため、もし本記事でうまく行かない場合は、以下のgithubリポジトリも確認してみてください
  • https://github.com/yuumi3/react_book

それでは、環境構築をやっていきましょう!

1 - Node.jsインストール

  • Homebrewを使って、Node.jsをインストール

$ brew -v
  # Homeberwが入っているか確認、バージョンが表示されればOK

$ brew update
$ brew install nodejs

$ node -v
  # Node.jsが入っているか確認、バージョンが表示されればOK

2 - npmの確認

  • Node.jsをインストールした際に、npmを入っているが念の為確認
$ npm -v
  # バージョンが表示されればOK

3 - Reactインストール用のプロジェクト作成

  • Reactをインストールするためのプロジェクトを作成します
  • プロジェクト名(フォルダ名)は適当でも問題ないです
$ mkdir react_drill
  # react_drillというフォルダを作成

$ cd react_drill
  # react_drillフォルダに移動

$ npm init -y
  # react_drillに、対話形式の答えを全部yesで「package.json」を生成する

4 - package.jsonを編集する

  • 3で作ったpackage.jsonの中身を以下の内容に編集してください
{
  "name": "react_drill",
  "version": "1.0.0",
  "description": "React Drill",
  "private": true,
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "webpack": "webpack -d"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

5 - 必要なnpmパッケージをインストール

  • 必要なnpmパッケージをインストールしていきます
  • react_drillのディレクトリで以下のコマンドを実行してください
$ 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

6 - インストール確認用にReactコードを作成

  • 5で一通りReactを動かすためのパッケージをインストールできました
  • 6では、簡単なReactコードを作成して実際に動かしてみます
# 「react_drill」内に以下のフォルダを作成する

$ 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>React App</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')
)

これで終了です!いよいよ動かしてみましょう!

7 - ブラウザでReactを動かしてみる

  • react_drillディレクトリで以下のコマンドを実行してください
  • 以下のコマンドで、webpack開発サーバを実行します
$ npm start
  # 一番下に「Compiled successfully.」が表示されていれば無事に成功です!

http://localhost:8080/にアクセスして Hello, world!! が表示されていれば無事成功です!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
49