React-Integration

Runs an integration server for previewing a react component in the browser. For an example have a look at the integration directory of react-list.

Install

Install as node dev dependency:

npm install react-integration --save-dev

Usage

Given the following directory structure as an example:

• css
• integration
• lib
• node_modules
• test
• package.json
• README.md
• etc

The 'lib' directory will contain the (react) component. It does not necessarily have to be a react component, but that is what is was initially created for.

Integration directory

The 'integration' directory is the one you create to use 'react-integration'. It contains the following files:

• browser.js
• package.json
• server.js

browser.js

'use strict';
 
var React = require('react');
var component = require('../');
 
// .widget is a node you can use to attach `component` to
var widget = document.querySelector('.widget');
 
React.render(React.createElement(component), widget);

package.json

{
  "name": "integration",
  "version": "0.0.0",
  "browser": "./browser",
  "main": "./server",
  "private": true
}

server.js

'use strict';
require('react-integration')(__dirname + '/..');

CSS directory

Contains stylus files (.styl) used to style the component. At this moment only stylus is supported.

In the package.json:

"stylus": "./css/main.styl",

API

require('react-integration') returns a function which takes a path (String) as an argument. The function returns the instance of express.

License

MIT