はじめに
JavaScript のフレームワークを何も知らない Rubyist がちょっと React を勉強しようと思いローカル環境で勉強したいと思い、少し環境を整理しました。
Getting Started から始まるページでは、 CodePen を使うようになっているのですが、自分の好きなエディタで編集できた方がやりやすいのですよね。
かといって、本格的に React を npm でインストールして、Project 作ってとか、大袈裟なこともしたくないです。
お手軽な学習のための環境を用意することにしたいと思います。
index.html を用意する
まずは動作を試せるように雛形として使い回せる index.html を用意します。
index.js を読み込む時 type='text/babel' を指定することを忘れないようにしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.development.js"></script>
<script type="text/babel" src="index.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<title></title>
</head>
<body>
<dev id="root"></dev>
</body>
</html>
index.js を用意する
後は、 index.js を index.html と同じディレクトリに作って好きなように index.js を書いていけば良いだけなのですが、動作確認のため、
Hello World をやってみましょう。
ReactDOM.render(
<h1>Hello, World</h1>,
document.getElementById('root')
);
HTTPサーバーを用意する
Chrome で index.html を開いても Reactは動作しません。
HTTPサーバーを動作させて、http でアクセスして表示してやる必要があります。
npm でなんかそれっぽい物をインストールすれば良いのかも知れませんが、良くわかりません。
そう、そんなRubyistには強い味方、Ruby (Webrick) があるのです。
Webrick を使って、 httpsrv.rb を作ります。
httpsrv.rb は PATH の通ったディレクトリに保存して、実行権限をつけておきます。
#!/usr/bin/env ruby
require 'webrick'
port = ARGV.shift || 28_080
srv = WEBrick::HTTPServer.new(Port: port, DocumentRoot: '.')
trap('INT') { srv.shutdown }
srv.start
HTTPサーバーを実行する
httpsrv.rb を index.html を保存したディレクトリで実行します。
$ httpsrv.rb
[2018-08-20 12:48:50] INFO WEBrick 1.4.2
[2018-08-20 12:48:50] INFO ruby 2.6.0 (2018-08-10) [x86_64-darwin17]
[2018-08-20 12:48:50] INFO WEBrick::HTTPServer#start: pid=63672 port=28080
ブラウザで表示する
http://localhost:28080/index.html を Chrome で表示します。
babel の警告は表示されますが、Chromeで表示できました。（学習用なんだから警告出てもこれでおっけー。）
import が使えない
import が使えないっぽいので、そういうのは以下みたいな感じで回避してください。
import { Fragment } from 'react'
は
const Fragment = React.Fragment;
な感じです。
Redux も使いたいよ
index.html の script タグに追加します。
<script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.7/react-redux.min.js"></script>
import を使われているところ
import { Provider } from 'react-redux'
などは、こんな感じで回避すれば良いと思います。
const Provider = ReactRedux.Provider;
どこかのページにあったカウンターの例を写経したものです。
const connect = ReactRedux.connect;
const Provider = ReactRedux.Provider;
class Counter extends React.Component {
increment = () => {
this.props.dispatch({type: 'INCREMENT'})
}
decrement = () => {
this.props.dispatch({type: 'DECREMENT'})
}
render() {
return (
<div>
<h2>Counter</h2>
<div>
<button onClick={this.decrement}>-</button>
<span>{this.props.count}</span>
<button onClick={this.increment}>+</button>
</div>
</div>
)
}
}
const mapStateToProps = (state) => ({
count: state.count
});
const initialState = {
count: 0
};
function reducer(state = initialState, action) {
switch(action.type) {
case 'INCREMENT':
return {
count: state.count + 1
};
case 'DECREMENT':
return {
count: state.count - 1
};
default:
return state;
}
}
Counter = connect(mapStateToProps)(Counter);
const store = Redux.createStore(reducer);
const App = () => (
<Provider store={store}>
<Counter />
</Provider>
);
ReactDOM.render(<App />, document.getElementById('root'))
おわりに
こんな環境で React を少しずつ、勉強しているところです。
うちの社名が社名なので、Reactだけど、ほんのちょっぴりRubyネタを(無理矢理？)絡めてみました。