Babel、webpack、ES6でReactを動かすために

WEBや書籍など、いろいろなところでReactの記事が記載されていますが古い情報だったりして初学者には辛いところです。動作確認できた情報をまとめています。
情報は以下のバージョンで確認している内容です

$ node -v
v10.16.0
$ npm -v
6.9.0

まずはフォルダを作成しパッケージをインストールします

$mkdir react-es6 && cd $_
$npm init
$ npm i -D @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/register
$ npm i -D webpack webpack-cli
$ npm i -S react react-dom

雑誌などだとwebpack.config.jsに以下の記述があったりしますが、その場合options以下を削除し、.babelrcに記載します。

options: {
  presets: ['es2015', 'react']
}

babelの設定ファイルを作成します
file: .babelrc

{
  "presets": [
    "@babel/preset-env", "@babel/preset-react"
  ]
}

なお、babel_core, babel-preset-es2015, babel-preset-reactなどをインストール済みの場合は使いませんので削除できます

$ npm rm babel_core babel-preset-es2015 babel-preset-react

その他は、webpackやら、httpなどを使うと思いますが、ほぼ触らずに大丈夫です