All have been introduced React environment.
- react
- react-router
- react-helmet-async
- react-hot-loader
- redux
- styled-components
- loadable-components
- express
- workbox
- eslint
- stylelint
- prettier
- jest
- enzyme
- storybook
- webpack
- babel
$ git clone https://github.com/osamu38/react-ssr-starter.git $ cd react-ssr-starter $ npm i $ npm run dev Go to http://localhost:2525/.
$ npm run build $ npm run build:client (Only build client) $ npm run build:server (Only build server) $ npm run build:analyze $ npm run build:client:analyze $ npm run build:server:analyze npm start Go to http://localhost:2525/.
Basically page component is implemented using Functional Component.
pages/home/index.js
import React from 'react'; import { Helmet } from 'react-helmet-async'; import Title from 'components/Title'; import SubTitle from 'components/SubTitle'; import UserList from 'components/UserList'; import { fetchUsers } from 'actions/user'; const HomePage = (props) => { const { state: { user: { userList }, }, } = props; return ( <> <Helmet title="Home" /> <Title>Home Page</Title> <SubTitle>User List</SubTitle> <UserList userList={userList} /> </> ); }; HomePage.loadData = async (ctx) => { const { dispatch, state: { user: { userList }, }, } = ctx; if (!userList.length) { return dispatch(fetchUsers()); } return Promise.resolve(); }; export default HomePage;