Reactを書く環境作り(僕)

Reactを書く環境作り(僕)Reactを書く環境作りのメモをしておきます。これ、ほぼReact素人の僕が書くのであまり参考にしないほうが良いかもしれないです。

Reactのチュートリアルをもう一回やってみた(ESLint & Webpack) – Morizotter Blog を参考にしてみたのだが、情報が古くなっているところもあるのでメモしておく。

React

とりあえずReactを入れる。

$ npm init
$ npm install --save react react-dom

Eslint

Eslintも入れて設定する。

$ npm install eslint --save-dev
$ eslint --init

aslant --initで対話形式で設定を聞かれる。僕が選んだのは下記の選択肢。

  • Use a popular style guide
  • AirBnB
  • JSON

すると、下記のファイルが生成される。

.eslintrc.json

{
    "extends": "airbnb",
    "plugins": [
        "react"
    ]
}

とりあえずこれでよし。

Webpack

このやり方が今も有効かわからないけどとりあえず動いた。

$ npm install --save-dev webpack babel-loader babel-core babel-preset-react babel-preset-es2015

webpack.config.jsは前回試行錯誤してできたものをそのまま使う。

module.exports = {
  entry: __dirname + "/src/app.js",
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: "babel",
        query:{
          presets: ['react', 'es2015']
        }
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  }
};

簡易サーバーと変更監視

$ npm install lite-server concurrently --save-dev

lite-serverconcurrentlyをインストールする。webpackでjsの変更を監視しつつ、変更があったら簡易サーバーで立ち上げたページが自動更新するというようにするために、package.jsonのscriptを編集する。

"scripts": {
  "webpack": "webpack -w",
  "lite": "lite-server --verbose --open dist",
  "start": "concurrent \"npm run webpack\" \"npm run lite\""
},

とりあえず準備はこれでよし。

表示してみる

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="dist/bundle.js"></script>
  </body>
</html>

app.js

import React from 'react';
import ReactDOM from 'react-dom';
import Main from './Main';

ReactDOM.render(
  <Main />,
  document.getElementById('app')
);

Main.js

import React from 'react';

export default function Main() {
  return (
    <div className="main">
    <p>header</p>
    </div>
  );
}

npm startするとmainという文字が画面に表示される。

Pocket
LINEで送る

You may also like...