Skip to content

Development guide

Clément Roig edited this page Jan 6, 2023 · 9 revisions

Some tips for developing a new feature

  • Code with your browser console opened and fix the React warnings / errors.
  • Add your new translation strings to en.json (see Translation Workflow).
  • Be precise about your component's PropTypes.
  • Don't use // estlint-disable comment without an excellent reason to do so. Moreover, the reason must be explicitly written in a comment before the rule disabling. ESLint is your friend, not your enemy: don't ignore its warnings 😉
  • Use issues and pull requests templates.

File examples (⚠️ to be completed)

Here is a list of files following the best practices in Grottocenter. Don't hesitate to copy them for your own features!

Folder structure

  • actions ➡️ Redux actions
  • components/appli ➡️ complex reusable components, wrapping some graphical components and adding some logic to them (via Hook or Redux for example)
  • components/common ➡️ small, basic, reusable components
  • conf ➡️ configuration files
  • containers ➡️ ⚠️ deprecated old HOC components (use React hook instead of High-Order-Component)
  • helpers ➡️ ⚠️ deprecated not really used anymore, prefer hooks instead of helper if you can
  • hooks ➡️ custom Grottocenter's hooks
  • pages ➡️ complex component displayed as a page in Grottocenter (i.e. the main purpose of an url, taking all the space on the screen)
  • reducers ➡️ Redux reducers

Tools