JavaScript required
We’re sorry, but Coda doesn’t work properly without JavaScript enabled.
Gallery
Donkey Development Guide
Share
Explore
Gallery
Donkey Development Guide
Project Overview
Workflows
Developer Flow
Adding New Features
Feature Requirements Document (Sample)
Syncing Design & Code
Design Guide
Style guide
Components
Exports
Coding guide
Folders structure
Coding Practices
Styling
Naming Practices
Commenting Practices
Github & Code Review Practices
Components
Resources
Coding guide
Naming Practices
General Naming
Use context naming where we think of the name as a combination of his self name and higher containing folders.
Examples
// Good
Templates > Profile.tsx
// Bad
Templates > ProfileTemplate.tsx
Naming Components, hooks & functions
Component folder names should be PascalCase e.g
CardImage
,
HeaderWithInfo
,etc
Component files should be named index.tsx (so we can import them shortly).
Hooks name should be camelCase e.g
useIsomorphicEffect
,
useTabs
, etc
Functions for example helper functions and event handler function will also be camelCase e.g
waitFor
,
calculateRoi
, etc
Prop names and state variables should be camelCase.
Examples:
// Good
Navbar/index.tsx
// Bad
Nabar/Navbar.tsx
Naming Props
Give props clear and meaninful names so a developer that don’t know the system will understand what is there purpose.
Examples:
// Good
desktop={6} mobile={12}
// Bad
xl={4} l={6} sm={12}
General Naming
Examples
Naming Components, hooks & functions
Examples:
Naming Props
Examples:
Gallery
Share
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
Ctrl
P
) instead.