React

Basic Rules

Naming of Files and Folders

Conventional folders such as models, common, components, or core (which also contain only one word) should be in lowercase.

Conventional files like types.ts, interfaces.ts (which also contain only one word) should be entirely in lowercase.

File names within the component folder, such as style sheets, tests, or the component itself, should be written in UpperCamelCase.

// good

/ models
  interfaces.ts
/components
  /ButtonBase
    /ButtonBase.tsx
    
// bad

/ Models
  Interfaces.ts
/Components
  /button-base
    /index.tsx

Include Only One React Component Per File

Always use camelCase for prop names.

// bad
<Foo
  phone_number={12345678}
/>

// good
<Foo
  phoneNumber={12345678}
/>
Omit the prop value when it is explicitly true. eslint: react/jsx-boolean-value

// bad
<Foo
  hidden={true}
/>

// good
<Foo
  hidden
/>

// good
<Foo hidden />

Always Use TSX Syntax

Do:

// MyComponent.jsx
import React from 'react';

export default function MyComponent() {
  return <div>My Component</div>;
}

Don't:

// MyComponent.Tsx
import React from 'react';

export default function MyComponent() {
  return React.createElement('div', null, 'My Component');
}

Do Not Use Unless Initializing the Application from a Non-TSX File

Do:

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';

ReactDOM.render(<MyComponent />, document.getElementById('root'));

Don't:

// MyComponent.js
import React from 'react';

React.createElement(MyComponent, null);

Avoid Using DOM Component Prop Names for Different Purposes

// bad
<MyComponent style="fancy"/>

// bad
<MyComponent className="fancy" />

// good
<MyComponent variant="fancy" />

But it's possible to extend the props of the surrounding tag that has React, so the parent component can customize the attributes of the same.

import type { HTMLAttributes } from "react";

// child component
export interface Props extends HTMLAttributes<HTMLAnchorElement> {
  variant?: "primary" | "secondary" | "tertiary" | "icon";
}

export default function UiLink({ className, ...props }: Readonly<Props>) {
  return (
    <a href={href}
      {...props}
    >
      <>{props.children}</>
    </a>
  );
}

//parent component

<UiLink variant="primary" href="example.com" className="w-full"/>

Organize Files Related to the Same Component in a Folder

For example, if you have a component called "Carousel," all files related to "Carousel" (such as Carousel.jsx, Carousel.css, Carousel.test.js, etc.) should be in a folder named "Carousel".

If readability and the principle of single responsibility require decomposing the main component into child components and these are only used within that component, create a folder of components that contain components exclusively used by the main component, the same applies for constants, types, interfaces, utils, etc.

Example folder structure:

- src
  - components
    - Carousel
      - Carousel.jsx
      - Carousel.css
      - Carousel.test.js
  	  - constants
	    - utils
			- components
	      - ItemCarousel.jsx
	      - ItemCarousel.css
		     - ItemCarousel.test.js

Always Use camelCase for Prop Names

// bad
<Foo
  UserName="hello"
  phone_number={12345678}
/>

// good
<Foo
  userName="hello"
  phoneNumber={12345678}
/>

Always Define Explicit defaultProps for All Unnecessary Props

// bad
function SFC({ foo, bar, children }) {
return <div>{foo}{bar}{children}</div>;
  }
  SFC.propTypes= {
    foo: PropTypes.number.isRequired,
    bar: PropTypes.string,
    children: PropTypes.node,
  };

// good
function SFC({ foo, bar, children }) {
return <div>{foo}{bar}{children}</div>;
  }
  SFC.propTypes= {
    foo: PropTypes.number.isRequired,
    bar: PropTypes.string,
    children: PropTypes.node,
  };
  SFC.defaultProps= {
    bar: '',
    children:null,
  };