●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)
以下の２つを組み合わせてCSSをwebpackが作成する出力ファイルに組み込む
css-loader cssを読み込む
style-loader css-loaderが読み込んだcssを<style>でくくり出力ファイルに組み込む
※webpackのドキュメント
https://webpack.js.org/loaders/