glarivie / redux-scripts

Custom configuration and scripts for create-react-app

redux-scripts

create-react-app with HMR, Redux, SCSS modules and paths aliases without ejecting ! The project also come with react-router-v4, eslint and a standard default template.

How to use

yarn add --global create-react-app
create-react-app demo --scripts-version redux-scripts
cd demo
yarn start

Hot Modules Reload (HMR)

More informations: here !

Aliases

No need to provide primary folder full path, you can use aliases !

import App from 'containers/App'
import { Flex } from 'components'
import browserHistory from '@/browserHistory'

alias	path
@	./src
components	./src/components
containers	./src/containers
actions	./src/actions
...	./src/...

Works only with templates default folders

SCSS Modules

// Component.js
import styles from './Component.scss'

return (
  <div className={styles.container}>
    ...
  </div>
)

/* Component.scss */
.container {
  width: 100%;
}

Generate scoped CSS by adding unique hash after the className. For example the class container become something like container_6YtR12e. This avoid conflicts between components and encourage more readable code.