zihluwang
861852961f
These files were already out of step with the project's Prettier config before this branch of work; running `pnpm format` finally swept them up. No semantic changes. Kept separate from the functional commits so the reformatting does not bury them in diff noise.
48 lines
2.1 KiB
Markdown
48 lines
2.1 KiB
Markdown
---
|
|
title: Frontend Development Standards
|
|
tags:
|
|
- frontend
|
|
- react
|
|
- standards
|
|
- best-practice
|
|
author:
|
|
name: Zihlu Wang
|
|
email: real@zihluwang.me
|
|
---
|
|
|
|
## Dependency Management (pnpm)
|
|
|
|
- **Strictness**: Leverage pnpm's strict dependency management to ensure a more deterministic `node_modules` structure
|
|
and efficient disk space usage.
|
|
- **Workspaces**: When using a monorepo approach, configure pnpm workspaces to streamline dependency management across
|
|
multiple frontend packages.
|
|
- **Auditing**: Regularly audit frontend dependencies for known vulnerabilities using `pnpm audit`.
|
|
|
|
## API Communication (Axios)
|
|
|
|
- **Axios Instance**: Create a centralised Axios instance for API calls to apply common configuration (base URL,
|
|
headers, interceptors).
|
|
- **Interceptors**: Use Axios interceptors to:
|
|
- Add authentication tokens to outgoing requests.
|
|
- Handle global error responses (e.g., display a notification for `401 Unauthorized`).
|
|
- Log requests/responses in development environments.
|
|
- **Error Handling**: Centralise API error handling in Axios interceptors or custom utility functions to provide
|
|
consistent user feedback.
|
|
|
|
## React and Component Standards
|
|
|
|
- **Function Components & Hooks**: Prefer function components with React Hooks over class components for new
|
|
development.
|
|
- **Props**:
|
|
- Define `interface` or `type` for component props to ensure type safety.
|
|
- Destructure props at the component entry point for clarity.
|
|
- **State Management (Redux)**:
|
|
- Use Redux Toolkit for efficient, boilerplate-reduced Redux development.
|
|
- Use `createSlice` to organise Redux logic into "slices" (feature-specific reducers, actions, and selectors).
|
|
- Follow the "ducks" pattern or "slices" approach to co-locate Redux logic.
|
|
- **Component Composition**: Break down complex UIs into smaller, reusable, single-responsibility components.
|
|
- **Ant Design**:
|
|
- Leverage Ant Design components for consistent UI/UX.
|
|
- Use CSS-in-JS solutions to consistently customise Ant Design themes and styles across the application if needed.
|
|
- **Accessibility**: Design and implement components with web accessibility (a11y) in mind from the start.
|