Reactが今どきだって聞いたけど、JSXという特殊な記法を使わないと真価が発揮されないと聞いた。
でもJSXってコンパイルが必要なんだよね。
Node.jsは知ってるけど、WebpackとかGruntとか使ったことない。
JSXを手軽に試してみたいんだけどなあ。。。
そんなWeb開発弱者の僕らのためのメモ。
手順
- CDNを使ってコードを書く
- Node.jsをインストールする
- Browsersyncをインストールする
- Brousersyncを実行する
1. CDNを使ってコードを書く
CDN (Content Delivery Network)で提供されているライブラリを使わせてもらいましょう。
最低限のHTMLを用意します。
index.html
<body>
<div id="hello-example"></div>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
<script type="text/babel" src="app.jsx"></script>
</body>
React公式のJSXをコピペします。
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}
ReactDOM.render(
<HelloMessage name="Taylor" />,
document.getElementById('hello-example')
);
2. Node.jsをインストールする
Windowsな僕らはNode.js公式からインストーラーを取得して実行するだけです。
Node.jsとnpm（パッケージ管理ツール）がインストールされます。
3. Browsersyncをインストールする
npmでのパッケージインストールは、ディレクトリローカルにインストールする方法とグローバル環境にインストールする方法があります。
あとで消すこともできますし、とりあえずグローバルに入れてみましょう。-gをつければグローバル環境です。
npm install browser-sync -g
4. Browsersyncを実行する
browser-sync start --server --file "*" --watch
実行すると、Webサーバーが起動してlocalhost:3000がブラウザで開かれます。
ファイルを更新すると、更新がすぐにブラウザに反映されます。
参考
React+JSXのコンパイル（Babel, browserify, webpack）
Browsersyncを利用してお手軽ブラウザ確認環境をつくろう - メドピア開発者ブログ