readytotinker/react-semantic.ui-starter

Production-ready, performance-first, template built with React/Redux/React-Semantic-UI/ [READY, BIG UPDATE SOON]

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 the app is cached with Service Workers:

Includes:

• React and Redux
• React-Router v4 + React-Router-Redux v5
• JSON-server - mock db.
• ESDoc - docs generator.
• Redux-thunk and Redux-Devtools-Extension
• Fetch polyfill
• Semantic-ui-react - UI components.
• Store2 - LocalStorage access.
• Webpack 2:
  • Babel (stage-0),
  • HMR, devServer, hotMiddleware,
  • Optimize code with Babel React Optimize,
  • Process CSS with PostCSS, purifycss-webpack and other loaders/plugins
  • Check your code with Eslint and Stylelint (that you can uncomment inside postcss.config.js)
• 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. With tree-shaking unused code never makes it into the final bundle.
• 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

These commands generate the dist folder.

Test:

npm run test # run tests with Jest

Lint:

npm run lint:styles  # lint styles with Stylelint
npm run lint:scripts # lint scripts with ESlint

Docs:

npm run docs # generate docs and `serve`

Nearest future:

• Implement SSR with code-splitting. See React Router docs. This docs say that it's a very hard task. So, maybe let's try to accomplish it? 😈

• Project must be isomorphic. Code must works with React-Native too. I'll be very happy, if you can help me with this task 😉, or just recommend something.

FAQ

Where are static assets?

You can store static assets (images, videos) in /static folder.

Where is manifest.json?

You can find it in webpack_config/config.js

Is SSR available?

It's under active development inside /src/server folder.

How it differs from other starters?

Performance-first. Main purpose - build highly customizable isomorphic(!) skeleton for PWA, with SSR, code-splitting, following best practices.

"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 folder increases in size, it could be refactored to similar structure that implemented in semantic-ui-react.

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 does Auth work?

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

But we can fix this:

1. Create global routing object.
2. Create RouteAuth component that protects child component from unauthorized users.
3. Pass a 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 the function that allows Route to be rendered.
8. Also, there is a handler for auth logic in App container.

How does the built app look?

Like this.

Also:

Have a question? Ask it. 😉

PRs, and issues are welcome 😈

Author

Vladimir Metnew [email protected]

LICENSE

MIT