React structure.md

Folder Structure

src
├── components
│   ├── Dropdown
│   │   ├── Dropdown.tsx
│   │   └── dropdown.less
│   └── VerificationModal
│       ├── VerificationSummary
│       │   ├── VerificationSummary.tsx
│       │   └── verificationSummary.less
│       ├── VerificationModal.tsx
│       └── verificationModal.tsx
├── scenes
│   └── Closures
│       ├── ClosureList
│       ├── ClosureShow
│       │   ├── components                            // Sub components which are used by ClosureShow
│       │   |   └── ClosureProgress
│       │   |       ├── ClosureProgress.less
│       │   |       └── closureProgress.less
│       │   └── utils                                 // Your helpers for this component
│       └── Closures.tsx                              // Contains all routes for closures

File structure

# Dropdown.tsx

// Js libraries
import React from 'react';
import * as m from 'shared/services/api/model';

// Style files
import styles from './dropdown.less';

// Typescript shortcut types
import XXX = m.Core.CompanyInfo;

// Interface, const
interface DropdownProps {}
interface DropdownState {}
const lists = []; 

// Stateful component
class Dropdown extends React.Component<DropdownProps, DropdownState> {
  // Class attributes
  state: DropdownState = {
    expand: true,
  };
  
  // React lifecyle methods
  render() {
  }
  
  // Custom methods
  handleClick = () => {
  }
}

// Stateless component
const Dropdown = ({}: DropdownProps) => (
  <div />
);

// or if you want more conditions
const Dropdown = ({}: DropdownProps) => {
  const lang = GeneralLang();
  
  return (
    <div />
  );
};