●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 
```

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

```shell-session:配置はこんな風・・・
[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

```json:.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ファイルは以下・・・

```jsx: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
```

```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)

```

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

css-loader	cssを読み込む

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

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