Create React App v2 with modifications.
- Typescript
- Redux, reselect & redux-observable
- Sentry
- Jest together with @testing-library
- Cypress
- Prettier & eslint based on Airbnb config (with some modifications)
- Lazy load router routes
- CSS modules with Sass
- react-helmet
- Service worker
- Absolute paths
- Portals
- Lodash
- reselect
- classnames
Recommended node version is defined in .nvmrc
.
yarn install
- Install packagesyarn start
- Start development server on port 8080yarn build
- Build project to the build folderyarn serve
- Serve the build folder on port 9090yarn analyze
- Analyzes build JavaScript bundles using the source mapsyarn jest:run
- Run application with Jestyarn jest:watchAll
- Watch files for changes and rerun all tests when something changes with Jestyarn cypress:open
- Open Cypress test runneryarn cypress:run
- Run Cypress tests to completionyarn cypress:start
- Start development server together withcypress:open
yarn cypress:ci
- Continuous integration together withcypress:run
yarn prettier:report
- Report any prettier issuesyarn prettier:fix
- Fix any prettier issues. Prettier is added to eslint, so we recommend to runyarn eslint:fix
yarn eslint:report
- Report any eslint issuesyarn eslint:fix
- Fix any eslint issues
You should look at a component as its own lifecycle. Everything about it should be wrapped in the same folder, where the folder name is the components name, and then return itself. This is the structure and files that could/should be included:
.
βββ components
β βββ ...
β βββ Example
β β βββ Example.module.scss # Styling
β β βββ Example.test.tsx # Testing
β β βββ Example.tsx # Component
β β βββ index.ts # Exports component
β β ...
β βββ index.ts # Exports every component within the folder
βββ ...
Since React 16.8 we have a new way of writing components and you should adapt to this. So skip class components and use hooks instead.
Use Lighthouse to make sure the application has a good Auditing Performance.
Using ducks-modular-redux with a small modification, just skip to prepend your constants with my-app
.
The service worker is transformed into a component.
Why? Because we want to be able to inject a "New content is available" modal where it's possible to force reload the page.
Without this modal the user has to force reload the page themself or close all tabs with the current page.
The application should be created with a Mobile First architecture. This is very important, so make sure to respect it.
Styling folder is based on ITCSS architecture. Colors, font sizes, spacings etc. are defined in _variables.scss
, so make sure to use these. This will make the application scalable and consistent.
Specific component styling should not be created within the styling folder. Instead it should be a .scss
file that's a sibling to the component, look at Component lifecycle above for better understanding.
A grid system is defined in _grid.scss
and works very well with _gutters.scss
. The grid and gutter system uses BEM methodology.
Make sure to use the mixin within _respond-to.scss
when you're styling for various breakpoints. Breakpoints are then defined in _variables.scss
. Follow this and the application will be consistent.
All reusable font styling should be appended in the $font-styles
map within _variables.scss
. This way elements can share styling without having to rewrite it every time and it's easy to make global changes. Read description of usage in _variables.scss
above the definition of $font-styles
. So is it okay to add background-color: #123456;
to an element within this $font-styles
map? No. It should only contain fundamental text and font styling.
You must create custom environment variables beginning with REACT_APP_
. Any other variables except NODE_ENV
will be ignored to avoid accidentally exposing a private key on the machine that could have the same name.
Supported browsers are defined in .browserslistrc
together with IE11 polyfills in ./src/index.tsx
.
You can learn more in the Create React App documentation.