node package manager

react-app

Application renderer powered by React and Universal Router

React App

React App is a small library powered by React, Universal Router and History that handles routing, navigation and rendering logic in isomorphic (universal) and single-page applications.

Create routes.js file with the list of application routes, where each route is just a plain JavaScript object that has path, action and optionally children properties. For example:

import HomePage from './components/HomePage';
import NewsPage from './components/NewsPage';
import StoryPage from './components/StoryPage';
 
const routes = [
  {
    path: '/',           // www.example.com 
    action() {
      return { title: 'Home', component: HomePage };
    }
  },
  {
    path: '/news',       // www.example.com/news 
    children: [
      {
        path: '/',       // www.example.com/news 
        async action() {
          const resp = await fetch('/api/news');
          const data = await resp.data();
          return { title: 'News', component: NewsPage, props: data };
        }
      },
      {
        path: '/:title', // www.example.com/news/some-title 
        async action({ params }) {
          const resp = await fetch(`/api/news/${params.title}`);
          const data = await resp.data();
          return { title: data.title, component: StoryPage, props: data };
        }
      }
    ]
  },
];
 
export default routes;

For more information visit https://github.com/kriasoft/universal-router

In the client-side code, launch your React app by running:

import { createApp } from 'react-app';
import { createStore } from 'redux';
import routes from './routes';
 
createApp({
  routes,
  context: {
    store: createStore(...) // Create Flux/Redux/Relay store 
  },
  container: document.getElementById('container')
});
import express from 'express';
import { createApp } from 'react-app';
import { createStore } from 'redux';
import routes from './routes';
import Html from './components/Html';
 
const app = express();
 
app.use(createApp({
  routes,
  context: {
    store: createStore(...) // Create Flux/Redux/Relay store 
  },
  template: Html
}));
 
app.listen(process.env.PORT || 3000);

Note: For Node.js v5 and below use var App = require('react-app/legacy').

Copyright © 2016 Kriasoft, LLC. This source code is licensed under the MIT license found in the LICENSE.txt file. The documentation to the project is licensed under the CC BY-SA 4.0 license.


Made with ♥ by Konstantin Tarkus (@koistya) and contributors