こんな人向け
- とりあえず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.」が表示されていれば無事に成功です！