---
# System prepended metadata

title: FE Style Guide

---

# FE Style Guide

## File Structure
* File name should match component name
* One component per file
* util file names should be written in `camelCase`
* component file names should be written in `PascalCase`
* Components used more than once should be in a folder containing:
    * index.ts:
        ```javascript
        export { default } from './ComponentName';
        ```
    * Styled comonents should be in file called ComponentName.styled.ts

## React
* Function component > class component
* boolean props should ideally be prefixed with is or has e.g. `isSmall`, `hasInstagram`
* variable and function names should be written in `camelCase`
* component and type names should be written in `PascalCase`
* shared constant name should be written in `SCREAMING_SNAKE_CASE`
* Don't mutate props or state directly

## Typescript
* Files with JSX must have the `.tsx` file extension
* components with props should have an interface with any types not imported from a types file
    Example:
    ```typescript
    interface Props {
      isSmall?: boolean;
    }

    const ComponentName = (props: Props) => {
    ```
* components can import prop types from a types file
    Example:
    ```typescript
    import { SharedProps } from '../types';

    const ComponentName = (props: SharedProps) => {
    ```  
* prop types can be combined as well
    Example:
    ```typescript
    import { SharedProps } from '../types';
    
    interface Props {
      isSmall?: boolean;
    }

    const ComponentName = (props: Props & SharedProps) => {
    ```  