街撮りchの中のひとのブログ: shigeki.takeguchi.log

もうすぐ還暦ジジイが街撮りのYouTubeチャンネルで奮闘する記録

Reactの学び方(2017年ゴールデンウィーク)、Reactってけっきょく何なのか?

目次

  1. 1. 最初に
  2. 2. 必要なものあるかどうか確認
  3. 3. ファイル・フォルダ構成
  4. 4. package.json
    1. 4.1. パッケージの説明
  5. 5. package.jsonの中のscriptsで何をしているか
  6. 6. webpack.config.json
  7. 7. サンプルのソースコード
    1. 7.1. /app/index.html
    2. 7.2. /src/scripts/index.js
  8. 8. 少しずつReactの学習を進めていけるようなコンテンツをあげていきます。

最初に

ちょっと時間に余裕が出てきたのでReactの知識をアップデートするかってことで学び直してます。
以前やった学んだ時はReactを実践投入することはなかったので今回は実践で投入してサービスとして使えるところまで持っていこうと思ってます。

生のReactを知ろう – JSX、Flux、ES6、Webpackを使わず…

極端なところだけど生というか素のReactってのは何なのかを知ろうとしたらこういうアプローチがいいと思う。
React系は細かくモジュールに分割して必要なものを必要な時に必要なだけって感じで考えられていてReactはまぁViewを作るだけになっている。
けどまぁさすがにwebpackでBrowsersyncとES2015での記述をコンパイルだけでもと思って作ってみました。

今までv1で動けばいいかってことでやってきましたが、とうとうNode.jsも最新(v7.9.0)にしてwebpackもv2で動くようにconfigも書きました。

必要なものあるかどうか確認

1
node -v

まずはお決まりのNode.js入ってるか確認。

1
yarn --version

npmでもいいんですがyarn(Node.jsのパッケージマネージャー)が入ってるか確認。 Yarn

1
webpack -v

webpackも入っているか確認。
もし入ってなかったら

1
npm install -g webpack

-gオプションはGlobalオプション。

ファイル・フォルダ構成

1
git clone https://github.com/shigekitakeguchi/yarn-webpack-react-simple.git

https://github.com/shigekitakeguchi/yarn-webpack-react-simple

GitHubから落として使ってください。
カスタマイズなりなんなりして。

1
cd npm-webpack-riotjs

落としたフォルダ内に移動する。

1
2
3
4
5
6
7
8
9
10
11
├── README.md
├── app
│   ├── index.html
│   └── scripts
│   └── bundle.js
├── package.json
├── src
│   └── scripts
│   └── app.js
├── webpack.config.js
└── yarn.lock

ファイル・フォルダ構成はこんな感じ。
README.mdは不要。app.jsに書けばいいだけです。

1
yarn install

これで必要なパッケージがインストールされるはず。

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
"name": "yarn-webpack-react-simple",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack -w --config webpack.config.js"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"browser-sync-webpack-plugin": "^1.1.4",
"webpack": "^2.4.1"
},
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4"
}
}

中身はこんな感じ。

パッケージの説明

落としてきたpackage.jsonからインストールすればいいんですがそれぞれのパッケージの説明を。

1
yarn add --dev babel-core

https://github.com/babel/babel/tree/master/packages/babel-core

言わずもがな、Babelのコンパイラのコア。

1
yarn add --dev babel-loader

https://github.com/babel/babel-loader

webpackでES2015構文で書いたファイルをトランスパイルするのに必要。

1
yarn add --dev babel-preset-es2015

https://github.com/babel/babel/tree/master/packages/babel-preset-es2015

ES2015を扱うためのプラグイン。

1
yarn add --dev babel-preset-react

https://github.com/babel/babel/tree/master/packages/babel-preset-react

Reactのためのプラグインですね。

1
yarn add --dev browser-sync

https://github.com/browsersync/browser-sync

もう面倒過ぎて手動でブラウザをリロードさせるなんてできないですね。
しかもwebpack-dev-serverも不要になります。

1
yarn add --dev browser-sync-webpack-plugin

https://github.com/Va1/browser-sync-webpack-plugin

webpackでBrowserSyncするためのプラグインです。

1
yarn add --dev webpack

https://github.com/webpack/webpack

Reactのインストール

1
yarn add react

ReactDOMもインストール

1
yarn add react-dom

package.jsonの中のscriptsで何をしているか

1
2
3
"scripts": {
"start": "webpack -w --config webpack.config.js"
},
1
yarn start

このコマンドでローカルサーバーを立ち上げwebpackでwatchを行いJavaScriptの変更を監視しコンパイルがはじまります。以前よりもシンプルになってます。それだけwebpackへの依存が増えたってことでもありますね。

webpack.config.json

こちらの方はまだES2015へ移行できてないです。
部分的にはv2には対応させましたがとりあえずは動くのでそのまま。
そのうちES2015的な書き方へ移行させたい。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var webpack = require("webpack");
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
entry: './src/scripts/app.js',
output: {
path: __dirname + '/app/scripts',
filename: 'bundle.js',
publicPath: '/app/',
},
module: {
rules: [
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015'],
}
}
]
},
resolve: {
extensions: ['.js', '.jsx']
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: true
}
}),
new BrowserSyncPlugin(
{
host: 'localhost',
port: 8080,
server: { baseDir: ['app'] }
}
)
]
}

webpack(v2)にして書き直したところです。
これはv1でやっていた時の書き方。

1
2
3
4
5
6
7
8
9
10
11
12
module: {
loaders: [
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015'],
}
}
]
},

部分的に書き直すだけで動くようになるみたいですね。
loadersをrulesへ変更しloader: ‘babel’をloader: ‘babel-loader’にしました。

1
2
3
4
5
6
7
8
9
10
11
12
module: {
rules: [
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015'],
}
}
]
},

サンプルのソースコード

生のReactを知ろう – JSX、Flux、ES6、Webpackを使わず…

こちらで掲載されているコードを参考までに記述しておきます。

/app/index.html

1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>yarn-webpack-react-simple</title>
</head>
<body>
<div id="react-app"></div>
<script src="/scripts/bundle.js"></script>
</body>
</html>

/src/scripts/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from 'react';
import ReactDOM from 'react-dom';

var rootElement =
React.createElement('div', {},
React.createElement('h1', {}, "Contacts"),
React.createElement('ul', {},
React.createElement('li', {},
React.createElement('h2', {}, "James Nelson"),
React.createElement('a', {href: 'mailto:james@jamesknelson.com'}, 'james@jamesknelson.com')
),
React.createElement('li', {},
React.createElement('h2', {}, "Joe Citizen"),
React.createElement('a', {href: 'mailto:joe@example.com'}, 'joe@example.com')
)
)
)

ReactDOM.render(rootElement, document.getElementById('react-app'))

基本的に、ReactはHTMLをJavaScriptでレンダリングするツールです。

これがよくわかるサンプルだと思います。

少しずつReactの学習を進めていけるようなコンテンツをあげていきます。

今回はシンプルにReactの機能とは何かを学べる環境を作りましたがReduxやReact Routerを少しずつでもいいので学んでいける環境をあげていきます。

いつもvブログを読んでいただきありがとうございます。
YouTubeチャンネルの運用を続けていくために機材購入、資料購入などで困っております。
よろしければAmazonの欲しいものリストから応援いただけると助かります。

街撮りchの欲しいものリスト

管理人:タケグチシゲキ

フロントエンドエンジニアとして働く55歳のジジイです。
首都圏を中心に散歩動画を撮影してYouTubeで配信してます。現在は夜の街のネオンや光が作り出す陰影が好きで撮影することが多いです。

YouTbueチャンネル

YouTubeチャンネルもぜひご覧ください。思い出の街や気になる街の風景を楽しんでいただければと思います

X(旧Twiiter)

X(旧Twiiter)でも情報発信しております。よろしければフォローいただけると嬉しいです

記事や動画について知っている情報を教えていただけると幸いです。どんなささいなことでも大丈夫です。

また、仕事依頼、コラボ依頼、著作物の提供などについてのお問い合わせは下記のお問い合わせフォーム、X(旧Twiiter)のDMでお待ちしております

お問い合わせ

ブログ記事やYouTubeチャンネルの動画に関するコメント、お仕事依頼、コラボ依頼、著作物の提供についてなどなどお問い合わせにて随時募集中です。
情報提供などもお待ちしております。

お問い合わせはこちらのGoogleフォームからお願いいたします