【React入門(1)】開発環境をMacに構築してみる

はじめに

2017年はAngularとSpring Bootで簡単なWebアプリを作成しました。

2018年はReactとPython、Webクローリング/クレイピングというキーワードで、

なにか作ってみたいと考えています。

 

ということで、

Reactについて以下の本をベースにゼロから勉強することにしました。

サンプルプログラムの丁寧な解説やNode.js、Babel、ESLintなどについての簡単な解説もあった点が気に入ったのでこれにしてみました。

現在学習中ですが、学習が終わる頃にはReactが使いこなせるはず!!(たぶん。。。)

 

前置きが長くなりましたが、

本記事ではMacへのReact 開発環境構築手順について、忘れないうちにまとめておこうと思います。。

 

 

環境

  • OS:OS X 10.11 El Capitan

 

 

手順

  1. homebrewインストール
  2. nodebrewインストール
  3. nodejsインストール
  4. Atomインストール
  5. ReactでHelloWorld

 

1.homebrewインストール

ターミナルからhomebrewをインストールします。

command
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
homebrewのバージョン確認ができればインストール正常完了です。
command
$ brew -v
Homebrew 1.2.2

2.nodebrewインストール

ターミナルからnodebrewをインストールします。

command
$ brew install nodebrew
nodebrewのバージョン確認ができればインストール正常完了です。
command
$ nodebrew -v
nodebrew 0.9.7

3.nodejsインストール

ターミナルからホームディレクトリ配下に.nodebrew/srcを作成します。

command
$ cd ~
$ mkdir .nodebrew
$ mkdir .nodebrew/src
nodejsをインストールします。
command
$ nodebrew install-binary latest
Fetching: http://nodejs.org/dist/v8.1.0/node-v8.1.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully
インストールしたnodejsのバージョンを確認します。
command
$ nodebrew list
v8.1.0

current: none
インストールしたnodejsのバージョンを有効化します。
command
$ nodebrew use v8.1.0
use v8.1.0
バージョンが有効化できたことを確認します。
command
$ nodebrew list
v8.1.0

current: v8.1.0
nodeコマンドパスをbashrcへ保存します。
command
$ echo 'export PATH=$PATH:/Users/xxxxx/.nodebrew/current/bin' >> ~/.bashrc
※xxxxxは各環境のホームディレクトリに合わせてください。

/Users/xxxxx/.bash_profileに下記を記述します。(.bash_profileから.bashrcを読み込ませる設定)

command
if [ -f ~/.bashrc ] ; then
. ~/.bashrc
fi
ターミナルを再起動し、nodejsとnpmのバージョンを確認します。
command
$ node -v
v9.4.0
$ npm -v
v5.6.0
バージョンが確認できたらnodejsインストールは完了です。

4.Atomインストール

AtomダウンロードページよりAtomをダウンロードします。

ダウンロードしたファイルを解凍し、Atomをアプリケーションフォルダにドラッグ&ドロップします。

Atomを起動し、「japanese-menu」パッケージをインストールして日本語化します。

以上でAtomインストールは完了です。

 

5.ReactでHelloWorld

まず、Atom上でからターミナルが利用できるようにするため、

ターミナルを開いて以下のコマンドを実行します。

command
$ apm install LarsKumbier/terminal-plus
Atomを再起動し、左下の「+」ボタンをクリックすると、ターミナルが開きます。

 

次に、開いたターミナルで新規プロジェクトを作成します。

command
$ mkdir hello_react
$ cd hello_react/
$ npm init -y
ファイル>開くからhello_reactプロジェクトを開き、package.jsonを以下のように編集します。

package.json
{
  "name": "hello_react",
  "version": "1.0.0",
  "description": "Hello React",
  "private": true,
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "webpack": "webpack -d"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
次に、npmパッケージをインストールしていきます。
command
$ npm install react react-dom
$ npm install webpack webpack-dev-server --save-dev
$ npm install babel-cli babel-loader babel-preset-env babel-preset-react --save-dev
$ npm install eslint eslint-loader eslint-plugin-react --save-dev
$ npm install css-loader style-loader babel-loader --save-dev
最後に、サンプルプログラムを作成していきます。

ディレクトリを作成し、

command
$ mkdir src
$ mkdir public
.babelrc、.eslintrc.json、webpack.config.js、public/index.html、src/index.jsを作成します。

.babelrc
{
  "presets": ["env", "react"]
}
.eslintrc.json
{
  "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"
  }
}
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: "#inline-source-map",
  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')
)
以上でサンプルプログラムの作成は完了です。

以下コマンドを実行し、「http://localhost:8080」へアクセスしてください。

command
$ npm start

Hello, world!!が表示されればOKです。

以上でReact開発環境構築〜Hello Worldまで完了です。

 

お疲れ様でした。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください