DO NOT PUSH TO MASTER
CREATE BRANCH AND PUSH TO BRANCH, SEND MERGE REQUEST
Start dev server
npm start
Production Build
npm run build
src
├── components # all partial components
├── pages # all top level pages (Redux tree will be connected to these)
└── utils # any utility functions/classes
-
Try not to use
scss
orsass
. -
Create a separate css file for each react component and place them in the same directory. Eg.
components ├── ... ├── my-component.js └── my-component.css
-
Try to use locally scoped css for components. Locally scoped css rules won't affect anything other than the markup inside the component.
-
To make a css file locally scoped, use the format
*.modules.css
for the file name. Eg.components ├── ... ├── my-component.js └── my-component.module.css # css rules will be locally scoped for my-component.js
-
Import css directly into your component files and let webpack do the work.
// my-component.js ... import styles from './my-component.module.css' ... render(){ // inside the render method return( ... <div className={styles.someclass}> ... <div> ... ) }
/* my-component.module.css */ ... .someclass{ ... color: red; ... }
- If your route components are top-level pages or contains a lot of code then
lazyload
them. - Use the
utils/asyncCompoment
function to dynamically load the component. Eg.import asyncComponent from './utils/asyncComponent' // import SomePage from './pages/somepage' // INSTEAD of this import Spinner from './components/spinner' // optional loader component that can be used as a placeholder until the main component is loaded const SomePageImport = () => import('./pages/somepage') // postpone the import const SomePage = asyncComponent(SomePageImport,/*OPTIONAL*/Spinner) ... ... render(){ // inside our render function return ( ... <Route path="somepath" component={SomePage} /> // lazyloaded route ... ); }