React-Semantic.UI-Starter

Out-of-box:

DEMO: You can find it here

What is it?

Production-ready, performance-first, optimized, robust, fully-featured boilerplate/example for your new Progressive Web App.

Lighthouse result - you can find it here

SPOILER: 97/100. It might be better/worse in your browser.

DOMContentLoaded, and etc:

When app is cached with Service Workers:

Includes:

• React and Redux
• React-Router v4(!) + React-Router-Redux v5(!)
• JSON-server - mock db.
• Redux-thunk and Redux-Devtools-Extension
• Fetch polyfill
• Semantic-ui-react - UI components.
• Store2 - LocalStorage access.
• Webpack 2:
  • babel (stage-0),
  • HMR, devServer, hotMiddleware,
  • better code optimization with Babel React Optimize,
  • Remove unused css with purifycss-webpack
• Jest and Enzyme - awesome libraries for testing.
• why-did-you-update and React-Addons-Perf for better performance optimization.
• Lodash - is a dependency of Semantic-ui-react, but with tree-shaking you import in bundle only code that you use.
• Offline-plugin, webpack-manifest-plugin and preload-webpack-plugin for your next progressive app.
• And more tools for building and testing...

Usage

Install:

git clone https://github.com/Metnew/react-semantic.ui-starter.git
cd react-semantic.ui-starter && rm -rf .git  
npm install

Run:

npm run dev # run app in dev mode
npm run db  # run mock db for app(from another process)

Build:

npm run build # build app
npm run build:demo # build with process.env.BUILD_DEMO = true

It generates dist folder.

Test:

npm run test # run tests with Jest

FAQ

Where is manifest.json?

You can find it in webpack_config/config.js

Is SSR available?

It's under active development inside /server folder.

How it differs from other starters?

Performance-first.
Main purpose - build highly customizable skeleton for PWA, with SSR, following best practices.

Is it official starter from semantic-ui-react ?

No, (currently no, but maybe... 😉).

"You have a components folder and containers folder..and in the container you have another components folder?"

Components inside containers/**/components are components that are required by container.

For example, Dashboard(container) has DashboardComponent(component). You can think about DashboardComponent as "Isolated component", it isn't used in app anywhere except own parent-container.

Components in components are components that:

1. Don't have own logic and connection with state (as opposite to containers)
2. Aren't "isolated".(!)

As your app's components will increase in size, it can be refactored to similar structure that currently implemented in - semantic-ui-react.

JSON-server? Why?

Maybe it will be useful for some purposes in your project.

Where are tests?

There are tests for actions and for reducers.
Each reducer/action has own folder, where you can find:

1. Reducer/action itself.
2. Tests for it.

How to write tests?

You can find action testing example here.
It uses redux-mock-store.

How Auth works?

Migration from React-Router v3 to v4 may cause some problems.
There is no onEnter props in Route component.

So, we can solve it that way:

1. Implement global routing object.
2. Implement RouteAuth component that protects child component from unauthorized users.
3. Pass function that checks is user allowed to visit route as prop in every RouteAuth component.
4. When RouteAuth renders it calls that function.
5. As authCheck function can call redux store, we can access redux's state before Route is rendered.
6. Profit!!!!!
7. We have access to redux state in function that allows Route to be rendered.
8. Also, there is an additional handler for auth logic in App container.

How built app looks?

Like this.

Also:

Unstable branch with latest features.

Have a question? Ask it. 😉

PRs, and issues are welcome 😈

Author

Vladimir Metnew [email protected]

LICENSE

MIT