備忘録

忘れそうなこと色々

【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編集でどうにかなりそうだけど眠いのでまた今度