How to write highly readable code - 10 coding style tips
22 November, 2022
18
18
3
Contributors
Thoughtful diagram
Tip 1: Add comments
Tip 2: Use a linter
Tip 3: Review your code before creating a pull request
Tip 4: Split your code into multiple functions
Tip 5: Create multiple files instead of one big file
Tip 6: Be careful while naming your files
Tip 7: Use HOCS (High-Order-Components)
AuthGuard
component checks if the user is logged in, if not logged in, it will render null instead of the component.withAuthGuard
HoC looks like this:Tip 8: Folderize your components properly
•
- components
- Breadcrumb.js
- CollapsedSeparator.js
- Input
- index.js
- Input.js
- utils.js
- focusManager.js
- Card
- index.js
- Card.js
- CardDivider.js
- Button.js
- Typography.js
•
- components
- Breadcrumb
- index.js
- Breadcrumb.js
- CollapsedSeparator.js
- Expander.js
- BreadcrumbText.js
- BreadcrumbHotdog.js
- BreadcrumbFishes.js
- BreadcrumbLeftOvers.js
- BreadcrumbHead.js
- BreadcrumbAddict.js
- BreadcrumbDragon0814.js
- BreadcrumbContext.js
- Input
- index.js
- Input.js
- utils.js
- focusManager.js
- Card
- index.js
- Card.js
- CardDivider.js
- Button.js
- Typography.js
- Breadcrumb
Tip 9: Put things in order
1.
2.
3.
4.
5.
import * as
6.
import './<some file>.<some ext>'
Tip 10: Use a coder formatter
Conclusion
web
cleancode
development
develevate
howto