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