Package Exports

react-app

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-app) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

Getting Started

Step 1: Routing

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

Step 2: Client-side rendering

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')
});

Step 3: Server-side rendering (optional)

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').

React Starter Kit — Isomorphic web app boilerplate (Node.js/Express, React.js, GraphQL)
Babel Starter Kit — JavaScript library boilerplate (ES2015, Babel, Rollup)
React Static Boilerplate — Generate static websites from React components with Webpack
Universal Router — Isomorphic router for web and single-page applications (SPA)
Membership Database — SQL database boilerplate for web app users, roles and auth tokens

Get in Touch

#react-starter-kit on Gitter
@koistya on Codementor

License

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

react-app