celestinocortez/react-prime

A starter kit to create comprehensive React apps with Redux and Styled-Components.

React Prime

---

Quick start

Use create-react-prime for easy install.

npx create-react-prime my-app
cd my-app
npm start

Features

• TypeScript
• React
• Redux
• Redux Thunk to handle async actions
• React Router
• Styled-Components
• Workbox for offline support and caching
• Webpack for bundling
• Redux Dev Tools for next generation DX (developer experience).
• ESLint to maintain a consistent code style
• Refer to package.json for more details

NPM Scripts

• Start develop server: $ npm start
• Create production build: $ npm run build
• Start server: $ npm run server
• Remove build folder: $ npm run clean
• Run ESLint: $ npm run lint
• Run webpack-bundle-analyzer: $ npm run analyzer

Deployment

Make sure all modules are installed: $ npm install

Create a build for production, this will add a /dist folder to the root with all bundles. $ npm run build

Run the server file to start server: $ npm run server

For production we recommend to use PM2 to run the server with advanced process management.

Development Workflow

Components

The components are separated in Modules and Common. Modules are bundled components which depend on each other. Common components are components that are self-contained and can be used through the entire app.

Ducks

We make use of the Ducks pattern for Redux, that means that the actionTypes, actions and reducers are bundled together in an isolated module.

Redux DevTools

To use de Redux DevTools install the Redux DevTools extension from the chrome webstore.