reacted-express

1.0.8 • Public • Published

reacted-express

React rendering server-side using Express

Install

npm install -s reacted-express

Usage

// Your React component you want to render server-side
// components/app.jsx
import React from 'react';
 
export default class App extends React.Component {
  render () {
    return (
      <h1>Hello { this.props.person }</h1>
    );
  }
}
 
// In your express file
 
// Use reacted express as a middleware in your express file
 
import renderReact from 'reacted-express';
 
// ...
 
app = express();
 
// Renders App component as a HTML view
 
app.use('/', renderReact(App, { person : 'Joe' }));
 
// Voila!
 
// ...

Inject a React component into a HTML source

Sometimes you want to inject your main component into a HTML source.

<!-- index.html -->
<!doctype html>
<title>Test React App</title>
<!-- This is the section you want to replace -->
<section>Loading</section>
<!-- Where the back-end props are copied -->
<script>window.reactProps = /* props */</script> 
 
// ...
 
app = express();
 
 
// Will render the source of index.html
// ... and replace 'Loading' by the HTML of MyComponent
 
app.use(renderReact(App, { person : 'Jessie' }, {
  inject : {
    into : 'index.html',
    where : 'Loading',
    // where to copy props
    props : '/* props */' // will output { "person" : "Jessie" }
  }
}));
 
// ...
 

Pass props to client

app.use(renderReact(App, (req, res) => {}, { send : false }));
 
app.use((req, res, next) => {
  req.reactedExpress.rendered
});

Readme

Keywords

none

Package Sidebar

Install

npm i reacted-express

Weekly Downloads

0

Version

1.0.8

License

ISC

Last publish

Collaborators

  • francoisv