Good Practices and Conventions of React Project

Folder Structure

1. Flat Structure
Simpler, but less organized if we have lots of component-specific files like css, test files

src
└── components
   └── Toolbar.tsx
   └── Toobar.test.tsx  // jest test file
   └── Toobar.scss/css  // stylesheet file
   └── MenuItem.tsx
   └── Avatar.tsx
   └── UserEditForm.tsx
└── containers
   └── HomeScreen.tsx
   └── Dashboard.tsx
   └── UserProfile.tsx

2. Deeper Structure with one component as a folder, which can contain both the index.tsx or jsx file and its related css/scss file. Within the components folder, PascalCase components to represent something like this:
More organized especially if we have multiple component-specific files but more complex

src
└── components
  └── Toolbar
      └── index.tsx
  └── MenuItem
      └── index.tsx
  └── Input
      ├── __tests__
      |   └── Input.test.tsx // jest unit tests for "index.tsx"
      ├── index.tsx // all required code/styles to be exported
      └── styles.scss // styles required by "index.tsx"
└── containers
  └── Dashboard
      └── index.tsx
  └── UserProfile
      └── index.tsx

Group Folders

1. By the level/granularity of the functions

src
└── components
   └── Toolbar.tsx
   └── Toobar.test.tsx  // jest test file
   └── Toobar.scss/css  // stylesheet file
   └── MenuItem.tsx
   └── Avatar.tsx
   └── UserEditForm.tsx
└── containers
   └── HomeScreen.tsx
   └── Dashboard.tsx
   └── UserProfile.tsx

2. By the app structures

src
└── appframe
    └── Toolbar.tsx
	  └── Toobar.test.tsx  // jest test file
	  └── Toobar.scss/css  // stylesheet file
		└── MenuItem.tsx
		└── HomeScreen.tsx
└── dashboard
	  └── Chart.tsx
	  └── ControlForm.tsx
	  └── DashboardFrame.tsx

Extensions

1. VSCode Spell Checker

2. VSCode TypeScript Linter

3. VSCode Copilot

Naming

1. Main folder: smallcases

2. File Names:
• For non-component files, camelCase or kebab-case is common.
• For component files, stick with PascalCase to match the component names

3. Component Names: PascalCase

4. snake-case or camelCase for css (stylesheets)
⇒ camelCase for CSS modules why? bundlers (like Webpack) don't support snake-case imports

// snake-case
import "./styles.css";
<input className="snake-case" type="text" value="" onChange={this.handleChange} />

// camel-case
import { camelCaseClassName } from "./styles.css";
<input className={camelCaseClassName} type="text" value="" onChange={this.handleChange} />

5. TypeScript Types and Interfaces: Prefix interfaces with an I, like IProps or IState, to distinguish them from classes and other types3Links to an external site.

6. Event Handlers: Start the names with handle, such as handleClick or handleInputChange.

7. State Variables: Use descriptive names that reflect their purpose, like isLoading or userList.

8. Props: Be descriptive and clear. For example, instead of data, use userData or profileData.

9. Hooks: For custom hooks, use the use prefix, like useAuth or useFormInput.

10. Avoid default exporting an anonymous function:

// don't do this. It will show a bunch of vague <_default /> in enzyme tests
export default () => (
  <p>Anonymous Function</p>
);

CI/CD

1. run npm run lint every time before you commit (or as a pre-commit github action)

2. run tests?