Node.js
npm
React

●Reactプロジェクトの作り方めも 20180315

●Reactプロジェクトの作り方めも 20180315

mkdir hello_react
cd hello_react

Nodeをインストールしておく

初期化(標準設定)

npm init -y
npm install -y

インストールされているパッケージを確認するには(以下のどれか)

npm list
npm list --depth=0
npm list --global --depth=0

モジュールをインストールする

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

ディレクトリを作る

mkdir src
mkdir public 

設定ファイルを作成・・・

配置はこんな風・・・
[ken:hello_react (master)]$ ll
合計 284
drwxr-xr-x   5 ken ken   4096  3月 12 11:05 ./
drwxr-xr-x   3 ken ken   4096  3月 12 11:04 ../
-rw-r--r--   1 ken ken     34  3月 12 11:04 .babelrc
-rw-r--r--   1 ken ken    383  3月 12 11:04 .eslintrc.json
-rw-r--r--   1 ken ken    466  3月 12 11:04 .gitignore
drwxr-xr-x 637 ken ken  24576  3月 12 11:05 node_modules/
-rw-r--r--   1 ken ken    705  3月 12 11:04 package.json
-rw-r--r--   1 ken ken 225338  3月 12 11:05 package-lock.json
drwxr-xr-x   2 ken ken   4096  3月 12 11:04 public/
drwxr-xr-x   2 ken ken   4096  3月 12 11:04 src/
-rw-r--r--   1 ken ken    584  3月 12 11:04 webpack.config.js

.babelrc

.babelrc
{
  "presets": ["env", "react"]
}

.eslintrc.json

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>

ここでは、js/app.jsを読み込んでいるのだが・・・

用意するJSファイルは以下・・・

src/index.js
import React from 'react';
import ReactDOM from 'react-dom';

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

// var x = 100;
// console.log('debug:'+x)

さて、コレを動かすには

npm start

ブラウザで以下にアクセスする
http://localhost:8080/

ーーーーーーーーーーーーーーーーーーーーーーーーーー
メモ

webpack ビルドツール
npm パッケージ管理
Node.js JavaScript処理系

Babel JSを変換(下位バージョンへ互換させるbabel-loader) babel-preset-es2017 babel-preset-react
Eslint Jsの文法チェックをする(eslint-loader) eslint-plugin-react
CSS (CSS-loader)
ーーーーーーーーーーーーーーーーーーーーーーーーーー

npm install パッケージ名
npm uninstall パッケージ名
npm list
npm search キーワード
npm init
npm run スクリプト名
npm start

npm <command> -h     quick help on <command>
npm -l           display full usage info
npm help <term>  search for help on <term>
npm help npm     involved overview

ーーーーーーーーーーーーーーーーーーーーーーーーーー

スクリプトを直接実行する場合はnpxを使う

npx run webpack -d

babelを単体で動かす

npx babel src/index.js
[ken:hello_react (master)]$ npx babel src/index.js 
'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

_reactDom2.default.render(_react2.default.createElement(
  'h1',
  null,
  'Hello, react world!!'
), document.getElementById('root'));

// var x = 100;
// console.log('debug:'+x)

以下の2つを組み合わせてCSSをwebpackが作成する出力ファイルに組み込む

css-loader cssを読み込む

style-loader css-loaderが読み込んだcssを<style>でくくり出力ファイルに組み込む

※webpackのドキュメント
https://webpack.js.org/loaders/