今更ながらReactに触れてみました。

ということで、下記サイトで勉強しようと思ったら環境部分でだいぶ引っかかったので、備忘録として書いときます。
(環境構築ならcreate-react-appで一発だけど、理解のため最初から構築したかったので…)

30分間React入門「いいねボタン」作成チュートリアル
http://c16e.com/1510161700/

環境

Ubuntu 16.04.2 LTS
node 8.1.2
npm 5.0.3

下準備

まずはフォルダ作って、移動

mkdir react-like-button
cd react-like-button

その後は、package.jsonを作成（すべて未入力で進めました）
npm init

そしてnpmで下記をインストール

react
react-dom
webpack
babel-core　←参考サイトには書いてないけど、これ入れないとダメ！
babel-loader
babel-preset-react
babel-preset-es2015
babel-preset-stage-0

npm install --save react react-dom
npm install --save-dev webpack babel-core babel-loader babel-preset-react babel-preset-es2015 babel-preset-stage-0

インストールが終わると、多分package.jsonにいろいろと追加されてると思う(多分)ので
webpackのビルドタスクをscriptsに追加

【追加】
"build": "rm -rf dist/*.js && webpack"
"watch": "rm -rf dist/*.js && webpack -w

package.json

{
  "name": "react-like-button",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "webpack": "^3.0.0"
  },
  "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",
  "description": ""
}

そしたらwebpackの設定ファイルを作成
注→query: {presets: ["react"]}こうしないとコンパイルでエラーになってしまう！

webpack.config.js

module.exports = {
  entry: __dirname + "/src/main.js",
  output: {
    path: __dirname + "/dist",
    filename: "like-button.js"
  },
  module: {
    loaders: [
      {test: /\.js$/, loader: "babel-loader", query: {presets: ["react"]}}
    ]
  }
};

ふぅ、疲れた…
あ、ソースコード置き場と、ビルドされたJSが生成される場所を作るのを忘れてました
（環境構築で力尽きた）
mkdir src dist

ついでに今回のソースと確認用HTMLを作成
【ソース】
touch src/main.js

【確認用HTML】
touch dist/index.html

構成

最終的には以下のようなフォルダ構成になりました。

react-like-button
　-dist
　　-index.html
　-node_modules
　-src
　　-main.js
　-package.json
　-webpack.config.js

とここで疲れてしまったので、実際に作っていくのは次回ということでorz

React始めました〜①下準備〜

環境

下準備

構成