【Laravel elixir + Webpack + React + Pug】環境構築メモ
あんまり使う機会がなかったReactさんですがガツガツ書き換えあるページを作ることになったのでやっとこさ触ってみる。
Laravel先輩使うのでどうせならelixirで動かしたいなぁ…あとJSX覚えるの絶対嫌だなぁ…pug(jade)のままでいきたいなぁ…
ということで環境作ってみる。
前回の記事(laravel 5.3 gulp環境構築メモ - 備忘録)で作ったelixir環境に追加していきます。
1)WebpackでReactを使えるようにする
npm install --save-dev react
npm install --save-dev react-dom
npm install --save-dev laravel-elixir-webpack-react
gulupfile.js
require('laravel-elixir-webpack-react');
2)Webpack&ReactにPug(Jade)を読み込めるようにする
npm install --save-dev jade-react-loader
簡単すぎる、、、
実際に書いてみる
index.js
window.onload = function() { var React = require('react'); var ReactDOM = require('react-dom'); var template = require('jade-react!../../pug/_template_react/template.pug'); var JadeComponent = React.createClass({ render: function() { return template({foo: 'bar'}) } }); ReactDOM.render(React.createElement(JadeComponent), document.getElementById('container')); }
template.pug
h1!= foo
これでこんな感じで表示される
<div id="container"> <h1>bar</h1> </div>
とっても簡単…
ただ、ここの書き方が気持ち悪いのどうにかならんかな…
var template = require('jade-react!../../pug/_template_react/template.pug');
node_modules/laravel-elixir-webpack-react/main.js編集でどうにかなりそうだけど眠いのでまた今度