30分間React入門「いいねボタン」作成チュートリアル
注意
下準備のnpm run build
でつまづくので、足りないパッケージをインストール
$ npm install --save-dev babel-preset-es2015 babel-preset-stage-0 babel-preset-react
webpack.config.js編集してloaderを変更
webpack.config.js
module.exports = {
entry: __dirname + "/src/main.js",
output: {
path: __dirname + "/dist",
filename: "like-button.js"
},
module: {
loaders: [
- {test: /\.js$/, loader: "babel", query: {presets: ["es2015", "stage-0"]}}
+ {test: /\.js$/, loader: "babel-loader", query: {presets: ["es2015", "stage-0", "react"]}}
]
}
};
package.jsonはこうなります
package.json
{
"name": "like-button",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "rm -rf dist/*.js && webpack",
"watch": "rm -rf dist/*.js && webpack -w"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.6.0"
}
}
ソース
今回書いたソースコードはこちらです
https://github.com/soartec-lab/react_like_button