React.js Codebase — Practices
1 min readSep 23, 2019
- When using ReduxJS, split your Reducer code into smaller methods to avoid huge JSON within your Reducer.
- Use the create-react-app generator to bootstrap your ReactJS app.
- Keep your code DRY. Don’t Repeat Yourself, but keep in mind code duplicate is NOT always a bad thing.
- Avoid having large classes, methods or components, including Reducers.
- Use more robust managers to manage application state, such as Redux.
- Use event synchronizer, such as Redux-Thunk, for interactions with your back end API.
- Avoid passing too many attributes or arguments. Limit yourself to five props that you pass into your component.
- Use ReactJS defaultProps and ReactJS propTypes.
- Use linter, break up lines that are too long.
- Keep your own jslint configuration file.
- Always use a dependency manager with a lock file, such as NPM or yarn.
- Test your commonly accessed code, code that is complex and prone to bugs.
- Write more tests that give more test coverage for your code with a little effort and test code to ensure its proper functioning.
- Every time you find a bug, make sure you write a test first.
- Use function-based components by starting to use React Hooks, a new ReactJS way to create state-full components.
- Use ES6 de-structuring for your props.
- Use conditional rendering.
- User `map()` to collect and render collections of components.
- Use partial components, such as `<>` … `</>`
- Name your event handlers with handle prefixes, such as `handleClick()` or `handleUpdate()`.
- Use `onChange` to control your inputs, such as `onChange={this.handleInputChange()}`.
- Use JEST to test your ReactJS code.
Get Anupam Maurya’s stories in your inbox
Join Medium for free to get updates from this writer.
