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;
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent