❤
npm
Sign UpSign In

react-service

5.0.0 • Public • Published

React Service Component

React Service Component allows run services on client an server sides

NPM version Downloads Build Status

Usage

App.js

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 <div>Loading...</div>;
    }
    if (error) {
      return <div>{error}</div>;
    }
    return (
      <div>
        <h1>{result.title}</h1>
        <p>{result.body}</p>
      </div>
    );
  }
}

client.js

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(<App post={1} />, document.getElementById('app'));

server.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 = (<App post={1} />);
    const data = await fetchServices(app);
    const content = renderToString(app);
    const html = `<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="app">${content}</div>
<!-- Transfer data -->
<script>window.__SERVICE_DATA__ = ${exportData(data)}</script>
</body>
</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}`);
});

License

The MIT License Copyright (c) 2017-2018 Ivan Zakharchenko

Readme

Keywords

Package Sidebar

Install

npm i react-service

Repository

github.com/3axap4eHko/react-service

Homepage

github.com/3axap4eHko/react-service#readme

Weekly Downloads

28

Version

5.0.0

License

MIT

Unpacked Size

168 kB

Total Files

10

Last publish

Collaborators

  • 3axap4ehko
Try on RunKit
Report malware