> For the complete documentation index, see [llms.txt](https://aaron-mota.gitbook.io/aarons-style-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aaron-mota.gitbook.io/aarons-style-guide/frontend/overview.md).

# Overview

A mostly reasonable approach to React, TypeScript, and JSX

**Purpose:** to provide a foundation for consistency and expectation within the codebase, allowing for efficient and effective code readability, understandability, and maintainability.

***

This style guide is mostly based on the standards that are currently prevalent in React/JavaScript, although some conventions may still be included or prohibited on a case-by-case basis. Influences from:

* [AirBnB Style Guide](https://github.com/airbnb/javascript/blob/master/react/README.md)
* [StackOverflow Thread](https://stackoverflow.com/questions/43973199/file-naming-conventions-in-reactjs)
* ...

***

### Table of Contents <a href="#table-of-contents" id="table-of-contents"></a>

1. [Basic Rules](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/overview#basic-rules) (high level JS, React, TypeScript rules/guidelines)
2. [Naming](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/naming) (folders, files, functions, variables, ...)
3. [Project](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/project) (architecture, structure, "router" folders (CRUDing data), "route" folders (pages)
4. [Component](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/component) (architecture, structure, ...)
5. [Workflow](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/workflow) (creating a new PR, rebasing a PR, etc.)
6. [Config/Tooling](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/config-tooling) (things to improve DX, make you more efficient, etc.)
7. [UI Library](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/ui-library) (using MUI, StorybookJS)
8. [👩‍🏫 Learning Resources](https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/learning-resources) (helpful videos for FE/React-related concepts)