https://address-book-react.herokuapp.com/
Q: are we using React Suspense or React Lazy feature?
A: No, it's a great feature though. Unfortunately, React Suspense is not support for Server Side Rendering at the moment you can refer to this doc https://reactjs.org/docs/code-splitting.html
We are using react ^16.3.0. You might want to read this (React v16.3.0: New lifecycles and context API) before starting playing around with this boilerplate.
git clone [email protected]:tagraha/address-book-react.git
cd address-book-react
npm installat this point make .env file on your root directory. you can copy it from .env_example file. after that you can continue run npm script below to start development environtment.
npm run developopen up your browser and navigate to localhost:1337
npm run build
npm startnpm run testNotice the /shared folder. that's where the DemoApp is located; inside /container folder. For the folder name, why is it called shared? because it will be used for compiling 2 bundles. Server side and Client side. shared folder is containing redux, components, container, and helper/utils. now let's take a look for container folder, shall we?
The main DemoApp is located in /container/DemoApp/index.js; we can define our initial metadata, css & js files there. and we can define all the website route there. it'll looks like something like this
<div className="main-app-container">
<Switch>
<Route exact path="/" component={PageHome} />
<Route exact path="/setting" component={PageSetting} />
<Route exact path="/about" component={PageAbout} />
<Route component={PageError404} />
</Switch>
</div>Notice that the default website route (/) is rendering PageHome Component. here's the content of PageHome Component
class PageHome extends PureComponent {
render() {
return (
<Fragment>
<Helmet>
<title>Home</title>
</Helmet>
<div className="homepage-wrapper">
<div className="fixed-wrapper">
<div className="search-wrapper">
<FilterInput />
</div>
</div>
<UsersCard />
</div>
</Fragment>
);
}
}
export default PageHomethere are no state and props on PageHome component because it's a container level file. the container shouldnt have any state or props in order to avoid unnecessary re-rendering/re-painting the whole page if there's any trivial state/props change.
you can configure like disabling SSR mode, renaming service worker file etc with value.js file. here's the the quick look of the file
const values = {
clientConfigFilter: {
// This is here as an example showing that you can expose variables
// that were potentially provivded by the environment
welcomeMessage: true,
// We only need to expose the enabled flag of the service worker.
serviceWorker: {
enabled: true,
},
// We need to expose all the polyfill.io settings.
polyfillIO: true,
// We need to expose all the htmlPage settings.
htmlPage: true,
},
// The host on which the server should run.
host: EnvVars.string('HOST', 'localhost'),
// The port on which the server should run.
port: EnvVars.number('PORT', 1337),
// The port on which the client bundle development server should run.
clientDevServerPort: EnvVars.number('CLIENT_DEV_PORT', 7331),
welcomeMessage: EnvVars.string('WELCOME_MSG', 'Hello world!'),
// Disable server side rendering?
disableSSR: false,
browserCacheMaxAge: '365d',
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent