Aaron's Style Guide
  • Intro
    • Strong opinions, loosely held
  • at a glance
    • Preferred Tech Stack (Current)
  • Starting a new project
    • Setup
      • Editor / IDE setup
        • General
        • Snippets
        • Linting
          • ESLint (.eslintrc.json/.cjs)
        • Formatting
          • Prettier (.prettierrc)
        • TS Config (tsconfig.json)
        • Other Project Setup
          • React Compiler
      • Browser setup
        • React Developer Tools
      • Command Line setup
        • Aliasing (.zshrc)
    • Misc Tools
  • frontend
    • Overview
    • Basic Guidelines
      • JavaScript
      • React
      • TypeScript
    • Naming
      • Extensions
      • Folders/Directories
      • Filenames
      • Declarations
    • Our Systems
      • Overview
      • Pages
        • File-based routing
        • "Route" folder
      • Components
        • Overview
        • UI Libraries
          • MUI
        • StorybookJS
      • State Management
        • General State Strategy
        • Client Global State
        • Server Global State
      • Data Fetching & API
        • "api object"
        • "Router" folder
      • Forms
      • Charts
      • Tables
    • Additional
      • Styling
      • Helpful websites/tools
    • // TODO
      • Component Architecture
      • Component Structure
      • Creating a New Component
    • 🥳 Onboarding
    • 👩‍🏫 Learning Resources
      • JavaScript
      • React
        • General
        • Performance
        • Rule of Hooks
      • TypeScript
      • (Global) State Management
        • General
        • Zustand vs Jotai
        • Zustand vs RTK
      • Charting Libraries
      • StorybookJS
      • NextJS
        • TypeScript
      • Other
  • api
    • Overview
    • HTTP Methods
    • Endpoints
    • Query Params
    • Request & Response
    • Database Relationship Types
    • Additional Topics
      • Rate Limiting
    • 💻 Examples
    • 👩‍🏫 Learning Resources
  • backend
    • Rails
      • Topics
      • File Setups
        • Routes (routes.rb)
        • Schema (schema.rb)
        • Models (models/x.rb)
        • Controllers (x_controller.rb)
          • Controller Actions
            • :index
            • :show
            • :create
            • :update
            • :destroy
          • Controller Concerns
            • :index
              • QueryParamsProcessor
          • Other Information
            • Multi-table Data Retrieval via Single Frontend Request
      • Database Tables
        • Roles / Permissions
      • 👩‍🏫 Learning Resources
        • Ruby on Rails (Rails)
  • database
    • Overview
    • 👩‍🏫 Learning Resources
      • Other info
        • Side Project Databases
  • Dev ops
    • Overview
    • 👩‍🏫 Learning Resources
Powered by GitBook
On this page
  • General
  • "Component folder"
  1. frontend
  2. Naming

Folders/Directories

PreviousExtensionsNextFilenames

Last updated 3 months ago

General

kebab-case

  • ~/pages/project/..

  • /folder/folder-with-multiple-words/..

"Component folder"

kebab-case

  • ~/components/component-name/component-name.tsx

  • ~/components/component-name/index.ts

Learn more about the "component folder" here.