react-ssr-starter

All have been introduced React environment.

Features

• preact
• react
• react-router
• react-helmet
• react-hot-loader
• redux
• styled-components
• loadable-components
• express
• workbox
• eslint
• stylelint
• prettier
• flow
• jest
• enzyme
• webpack
• babel

Install

$ git clone https://github.com/osamu38/react-ssr-starter.git
$ cd react-ssr-starter
$ npm i

Run

$ npm run dev

Go to http://localhost:2525/.

Build

$ npm run build
$ npm run build:client (Only build client)
$ npm run build:server (Only build server)

Build and analyze

$ npm run build:analyze
$ npm run build:client:analyze
$ npm run build:server:analyze

Run for production

npm start

Go to http://localhost:2525/.

Adding pages

Basically page component is implemented using React.PureComponent.

src/pages/Home/index.js

/* @flow */

import * as React from 'react';
import Helmet from 'react-helmet';
import Button from 'components/Button';
import Title from 'components/Title';
import SubTitle from 'components/SubTitle';
import UserList from 'components/UserList';
import { fetchUsers as fetchUsersFromServer } from 'actions/user';
import type { PageProps, Dispatch } from 'types';

export default class HomePage extends React.PureComponent<PageProps, *> {
  static loadData(dispatch: Dispatch) {
    return dispatch(fetchUsersFromServer());
  }

  componentDidMount() {
    const {
      user: {
        status: { isFetchedUserList },
      },
      userActions: { fetchUsers },
    } = this.props;

    if (!isFetchedUserList) {
      fetchUsers();
    }
  }

  render() {
    const {
      user: { userList },
      userActions: { logout },
    } = this.props;

    return (
      <div>
        <Helmet title="Home" />
        <Title>Home Page</Title>
        <SubTitle>User List</SubTitle>
        <UserList userList={userList} />
        <Button
          onClick={() => {
            logout();
          }}
          isCenter
        >
          Logout
        </Button>
      </div>
    );
  }
}