Writing code to build apps is not enough, the code should be as beautiful as your app. As a team in neoG Camp, we review each other's code and learn good practices to structure them.
Value bombs begin. Grab a coffee, please😊 BASIC-
- Is your app responsive?
- put all .css in a single folder
- more than 2-3 files, put in folders
- Does the project have a Readme file with instructions on how to run locally and other useful info?
- Does the code run without errors?
- Does the codebase use eslint? If not, why?
NAMING-
- In React, name the file as the React component in that file (without a hyphen in the filename)
- no need to write 'handler' in function name -> verb+noun works -> industry standards. -> no duplicate name in fileNames
- Do filenames have consistent casing and extension?
- Do variables/functions/modules have consistent casing?
- Do variables/functions/modules have descriptive names?
CODE-
- Remove commented out code -> unnecessary description
- Remove the console. logs (unless you have strong motivation why you need it).
- make many files with small code -> different files for context, reducer, etc.
- avoid multiple if-else blocks, instead use ternary
ES6-
- Can you use a spread/rest operator?
- prefer const instead of let -> no vars
- Be consistent in your usage of the arrow function
- Are you using lodash, ES6 / old-fashioned Javascript for data transformations? Be consistent.
- Use destructuring assignment for arrays and objects.
REACT-
- If possible, split up React components to reduce duplication. React components should be small and follow the single responsibility principle.
- Minimize logic in the render method -> put it in helper methods
- Destructure props.
- Use functional components for components that don’t use state
- Good convention -> Use double quotes white importing from react -> import React from "react"
continue in comments -> if more? Were these helpful mates???
Experienced developers, looking forward to your comments to learn more good conventions -> would be helpful for the community 🥰.
Edit: More add-ons from other developers on the same.
Armendra Singh :
👉🏻 Try to decouple functions that can be used at multiple places. Eg: Date formatting functions etc.
👉🏻 Grouping imports. a) Open source together. b) Different directories together. c) same directories together.
👉🏻 Is code formatted? Basically checking if Prettier is used or not.
👉🏻 Don't hardcode strings. use a constant file and reference it from the file.it makes refactoring easy at a later stage if required.
👉🏻 if it's typescript, checking the types of variables. Trying to avoid using 'any' and Create types that make sense for that variable.
👉🏻 If possible declaring hooks as early as possible in the component.
👉🏻 Not creating a fat Pull request. Trying to create smaller PRs.
Dhaval Mehta :
👉🏻 You should have separate config files for different things such as firebase, prettier, eslint
👉🏻 In the "src" folder you should create a "components" folder where all your components reside. Each component should have its relevant JSX & CSS files
👉🏻 If some variables are used in multiple places throughout the application then they should be kept in a separate "constants.js" file. And whenever you need to use any variable just import this file in that component
👉🏻 And don't add packages without any prior research.
Gaurav M. :
👉🏻 Add .gitignore file in the repo to avoid unnecessary files to fill up GitHub space.
👉🏻 Hide secret/credentials in .env file but don’t commit in GitHub. E.g. create react app give default .env but the variable name must start with REACTAPP
👉🏻 Try to write formatted code by adding editor config file and Let prettifier do their job.
Vishva kakadiya :
Write common functions in the utils folder. In case using Axios or any third party lib, make a separate service for that and import instance for further usage 💯
Rahul Gupta:
Use npm run build > buildLog, this command will add the build log file in the root directory and you can check all your unused variables and warnings over there. Also, take a look at vulnerabilities at the time of deployment this command will help you to check out your vulnerabilities count so that you can minimize it.
Keep an eye on this space, will keep adding more 🤗