tilt-react-views
v0.1.0
Published
An Express like API to render React JSX Views with bare http.Response
Downloads
82
Readme
tilt-react-views 
This module provides a ReactViews class to extend or mixin, that exposes the
necessary methods to compile and render React components from an HTTP response.
Inspiration from express-react-views. This package aims to offer a similar experience, but without Express.
Install
npm i tilt-react-views -SUsage
Views are JSX files automatically transpiled by babel-register, stored in the
views directory (as configured view .views() or options.views).
The default value is ./views in the current working directory.
views/index.jsx
var React = require('react');
var HelloMessage = React.createClass({
render: function() {
return (<div>Hello {this.props.name}</div>);
}
});
module.exports = HelloMessage;server.js
const path = require('path');
const ReactViews = require('tilt-react-views');
var views = new ReactViews({
views: path.join(__dirname, 'views')
});
require('http').createServer((req, res) => {
res.render = views.render.bind(views, req, res, next);
res.render('index');
}).listen(3000);Or within the stack of middleware, prior to the router handlers. This adds a
.render() method to the response object.
const views = new ReactViews();
app.use((res, res, next) => {
res.render = views.render.bind(views, req, res, next);
next();
});
app.get('/', (req, res, next) => {
// will render views/index.jsx
res.render('index');
});Layouts
You can compose your views to decorate your component with a layout.
views/index.jsx
var React = require('react');
var Layout = require('./layout');
var HelloMessage = React.createClass({
render: function() {
return (
<Layout title={this.props.title}>
<div>Hello {this.props.name}</div>
</Layout>
);
}
});
module.exports = HelloMessage;views/layout.jsx
var React = require('react');
module.exports = React.createClass({
render: function() {
return (
<html>
<head><title>{this.props.title}</title></head>
<body>{this.props.children}</body>
</html>
);
}
});Documentation
new ViewsReact(options)
optionsoptions.views: Views directory to lookup from when rendering (default: 'view/')options.engine: View extension to use (default:jsx)options.doctype: Doctype to use with HTML markup (default:<!doctype html>)options.renderToString: When truthy, force the output to be done withrenderToString(default:renderToStaticMarkup)
.render(req, res, next, view, props)
Ends the response with Homepage component HTML markup
res.render = views.render.bind(views, req, res, next);
res.render('homepage', {
title: 'Homepage',
description: 'Server side react rendering'
});.views(path)
Set the views directory to seach template from.
.engine(ext)
Get or set the file extension to use when loading views.
.react(filename, options)
Require the transpiled component by Babel and creates a new React element. The resulting HTML is sent back to the client.
Tests
Run with npm test.
var views = new ViewsReact();
views.views(path.join(__dirname, 'views'));
var app = http.createServer((req, res) => {
res.render = views.render.bind(views, req, res, done);
res.render('index', { title: 'Foo' });
});
request(app)
.get('/')
.expect(/<!doctype html>/)
.expect(/<html/)
.expect(/<head>/)
.expect(/Foo<\/title>/)
.expect(/Hello/)
.expect(200, done);