7. Pure components and storybook

Owned by Denis Dovganyuk
Aug 08, 2024
1 min read

This file was copied from the packages/webapp/src/stories/docs folder. Its accuracy as of August 8, 2024 has not been verified

Pure components (all components under webapp/src/component directory) can't use or modify global variables (import history from '../history' useDispatch useSelector), can't make network request (The use of GoogleLoginButton or GoogleMap components), and can't use any components under webapp/src/container directory.

| Resources | | --------- | | Official storybook tutorial | | Traversy React tutorial | | Official React tutorial | | CSS cheat sheet | | flexbox cheat sheet | | CSS grid generator | | material-ui styling solution |

Steps for a backend - frontend story from a data flow perspective

  • Create knex migration to create/modify tables in database

  • Create objection models

  • Endpoints and empty controllers

  • Backend jest unit testing

  • Implement controllers

  • Create authorization/validation middlewares

  • Run tests and make sure everything passes

  • Create pure frontend components in storybook

  • res.data normalizer, redux slice, redux selectors to hold and access the data

  • Redux saga for get/post/put/patch request

  • Container component to connect saga actions/selector with pure components

  • Connect Route component with container components with react router

  • Manual testing