React Service Component
npm install react-serviceReact Service Component allows run services on client an server sides
[![NPM version][npm-image]][npm-url]
[![Downloads][downloads-image]][npm-url]
[![Build Status][travis-image]][travis-url]
App.js
``javascript
import React, { Component } from 'react';
import withService from 'react-service';
const service: postId => fetch(https://jsonplaceholder.typicode.com/posts/${postId})
.then(response => response.json());
@withService(service, { mapParams: props => props.post })
export default class App extends Component {
render() {
const { data: { loading, result, error } } = this.props;
if (loading && !result) {
return
{result.body}
client.js
`javascript
import React from 'react';
import { hydrate } from 'react-dom';
import { importData } from 'react-service';
import App from './App.js';// Restore service data
importData(window.__SERVICE_DATA__);
render( , document.getElementById('app'));
`server.js
`js
import 'isomorphic-unfetch';
import React from 'react';
import { renderToString } from 'react-dom/server';
import Express from 'express';
import { exportData } from 'react-service';
import App from './App.js';const PORT = process.env.NODE_PORT || 9090;
const app = Express();
app.get('*', async (req, res) => {
try {
const app = ( );
const data = await fetchServices(app);
const content = renderToString(app);
const html =
;
res.status(200).send(html);
} catch (e) {
console.error(e.stack);
res.status(500).json(e.message);
}
});app.listen(PORT, () => {
console.log(
Server started http://localhost:${PORT});
});
``
[downloads-image]: https://img.shields.io/npm/dm/react-service.svg
[npm-url]: https://www.npmjs.com/package/react-service
[npm-image]: https://img.shields.io/npm/v/react-service.svg
[travis-url]: https://travis-ci.org/3axap4eHko/react-service
[travis-image]: https://img.shields.io/travis/3axap4eHko/react-service/master.svg