Read AirBNB style guide
Specific notes
- https://github.com/airbnb/javascript#naming--self-this
- https://github.com/airbnb/javascript#naming-conventions
- https://github.com/airbnb/javascript#es6-object-shorthand
- https://github.com/airbnb/javascript#destructuring
- https://github.com/airbnb/javascript#properties
- Use fetch API for requests with a polyfill
- Use polyfill.io https://cdn.polyfill.io/v3/ for all polyfills
- Avoid mixing jQuery or any dom manipulation based library with React - mixing paradigms ends up causing more issues
- Keep functions small and reusable ( better for teams working in GIT )
- Keep classes small and reusable ( better for teams working in GIT )
- Keep files small ( better for teams working in GIT )
- Organise code in a modular fashion. Folder/File structures should correspond to a structural TYPE.
- Avoid using procedural programming in class methods
- Choose one state management system (and/or) the Hooks API ( Context API or an external store )
- Avoid using the DOM attributes of any kind to store or pass state
- https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html#should-i-keep-data-in-custom-attributes
- Avoid mutating data - use immutable data structures and tools
- Avoid loops - usually this leads to mutation - use array methods such as map, filter, reduce, concat etc
- Avoid state calculations in components - aim to provide all that is necessary to component to render
- Restrict context and state management to top/high level components as much as possible
- Keep components as small and dumb as often possible to promote reusability and testability.
- Opt for stateless functional components in most cases - easier to test and promotes seperation of concerns.
- Avoid requests from within components - this makes testing difficult.
- Use object spread operator in functional components to extract relevant properties
- Pass only objects which are needed to low level child components
- Use mock functions to generate mock data. A stateless component should be able to render a default view with zero external prop input.
- Perform all relevant state calulations in your listeners/handlers/actions so that components have all the state they need to render correctly without the component having to manipulate state
- make http requests within your actions/reducers
- handle http responses in actions/reducers
- opt for a system which allows partial state update
- return a new data object for the partial state update
- Use webpack proxy server where possible in dev environments
- Seperate dev data from your source code and inject the data into your app via your state manager, or via mock end points, or via webpack proxy server, or via webpack define
- Have separate deployment branches for each environment eg env/dev env/stage env/prod
- master is the source of truth
- create feature branches off master
- merge to dev or stage to develop or test from your feature branch
- when complete merge your feature branch to master
- merge master to env/prod
- create builds in env/dev env/stage env/prod
- never merge dev, stage, or prod into master
- never merge dev to stage or stage to dev etc
- only merge feature/fix branches to environment branches