react-templates
- wixが提供しているライブラリ(http://wix.github.io/react-templates/)
- reactのテンプレート箇所を".rt" 拡張子ファイルとして切り分け、コンパイルしテンプレートとして出力する。
- HTML感覚で書ける。
- お試し: http://wix.github.io/react-templates/fiddle.html
install
npm i -g react-templates
gulp: https://www.npmjs.com/package/gulp-react-templates
npm i gulp-react-templates
gulp task code
サンプル
const gulp = require('gulp');
const rt = require('gulp-react-templates');
const rename = require("gulp-rename"); // 出力ファイル名を変更するため
const rt_path = './src/rt/*.rt';
gulp.task('rt', () => {
return gulp.src(rt_path)
.pipe(rt({ modules: 'es6' })) // 吐き出す際の出力フォーマットを選択
.pipe(rename(name_info => {
const new_basename = name_info.basename.replace('.rt', ''); // '.rt'を''に置換
name_info.basename = new_basename;
}))
.pipe(gulp.dest('./src/templates'));
});
gulp.task("watch", () => {
return gulp.watch(rt_path, gulp.series(['rt']));
});
Command line Interface
source: https://github.com/wix/react-templates/blob/gh-pages/docs/cli.md
先ほどの出力する際のoptionの例を以下に記載
// temp.rt
<h2>Hello React</h2>
// es6
// rt [file.rt|glob]* -m es6
import * as React from 'react';
import * as _ from 'lodash';
export default function () {
return React.createElement('h2', {}, 'Hello React');
}
// commonJS
// rt [file.rt|glob]* -m commonJS
'use strict';
var React = require('react');
var _ = require('lodash');
module.exports = function () {
return React.createElement('h2', {}, 'Hello React');
};
// none (default)
// rt [file.rt|glob]*
var tempRT = function () {
return React.createElement('h2', {}, 'Hello React');
};
reactに組み込む
▼ こんなrtファイルを書いて
// temp.rt
<h2>Hello react-templates</h2>
▼ コンパイル(es6)してこんな感じにして
// temp.js
import * as React from 'react';
import * as _ from 'lodash';
export default function () {
return React.createElement('h2', {}, 'Hello react-templates');
}
▼ importしてrenderのなかでreturnする
// App.js
import React, { Component } from 'react';
import Temp from './templates/temp.js';
class App extends Component {
render() {
return Temp();
}
}
ReactDOM.render(<App />, document.getElementById('root'));
ブラウザに Hello react-templates が出力されればok