Reapt
A complete React Redux starterkit, configured with Webpack
- ReactJS
- Redux
- Webpack 4
- Babel 7
- Stylus
- HMR
- Code Splitting with React.lazy & React.Suspense
- Code Formatter (Prettier)
- Legacy & modern browser output build
- Eslint configured extended with Airbnb style guide & support for prettier
- Jest & Enzyme Configured
- Automatically lint & format code, when committing it. [Husky/Lint-Staged]
- Progressive Web App
Init
Install Project :
yarn setup---> Remove git repository, install dependencies, and set package.json infos
Available command lines
yarn start // Start dev server
yarn build // Compile Project
yarn build:srv // Compile Project && Launch server for testing new build
yarn test // Execute tests with Jest
yarn test:watch // Execute tests with Jest an watch mode
yarn test:coverage // Generate coverage report based on the tests
yarn commit // Run Commitizen to write beautiful commits
yarn release // Run standard-version which generate changelog from commits names and increment release version
yarn post-release [branch] // Push to remote branch with tags
Also, you can use this command to speed up your workflow :
yarn mk [action] <component name || array of components> [options]It use mk-react-comp without global install. Full details and documentation on the webpage
React
| React Default Components | Description |
|---|---|
| React-intl | Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations. |
| React Modal | React Modal Component |
| React Notification | React Notification Component |
| React Carousel | React Carousel Component |
| React-simple-dropdown | Non-prescriptive React.js dropdown toolkit |
| Redux-form | The best way to manage your form state in Redux |
| React-Paginate | A ReactJS component to render a pagination |
| React Sticky | Sticky component for awesome React apps |
| Redux Persist | Persist and rehydrate a redux store |
| React Helmet | A document head manager for React |
| React Loadable | A higher order component for loading components with dynamic imports |
Style Helper
| Function / Class | Description | |
|---|---|---|
| Alignments | flexbox(value = row) | Add display: flex & flex-direction: $direction |
| justify(value = center) | Add justify-content: $value | |
| align(value = center) | Add align-items: $value | |
| center(direction = row) | Add all previous functions for perfect center alignment | |
| wrap(wrap = wrap) | change flex wrap | |
| Fonts | truncate() | Truncate text on a single line |
| truncateMulti(font-size, line-height, lines-to-show) | Truncate text on multilines | |
| font-size(value) | Remify font-size | |
| Hidden | .hidden | Simple display: none |
| Shadow | shadowDepth(n) | Add box-shadow on different depth level (0 to 5, 0 being 'none') |
| Hoverable | hover(bgColor, textColor, darkenValue = 12%) | Define BG / text color and add darken color on :hover |
| hoverText(textcolor, darkenValue = 12%) | Define text color and add darken color on :hover | |
| shadowHover(depth = 1, hoverDepth = 3) | Add box-shadow, and stronger box-shadow on :hover | |
| Radius | radius(value) | Set border-radius on element |
Next
- [ ] Add unit tests
- [ ] Create CLI tool to choose between React or NextJs