https://github.com/co2-git/reacted-express
Express middleware to render React components
https://github.com/co2-git/reacted-express
Last synced: about 1 year ago
JSON representation
Express middleware to render React components
- Host: GitHub
- URL: https://github.com/co2-git/reacted-express
- Owner: co2-git
- Created: 2016-01-16T10:44:57.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-03-23T23:18:00.000Z (about 10 years ago)
- Last Synced: 2025-02-01T16:23:17.054Z (over 1 year ago)
- Language: JavaScript
- Size: 8.79 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
reacted-express
===
React rendering server-side using Express
# Install
```bash
npm install -s reacted-express
```
# Usage
```js
// 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 (
Hello { this.props.person }
);
}
}
// 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.
```html
Test React App
Loading
window.reactProps = /* props */
```
```js
// ...
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
```js
app.use(renderReact(App, (req, res) => {}, { send : false }));
app.use((req, res, next) => {
req.reactedExpress.rendered
});
```