Creating a component - JumboCode/TUTV GitHub Wiki

React functionality is encapsulated in components. We are going to be making lots of these components. It's a good idea to have a consistent system for making new components. For example, we will consistently end all sentences with the word 'components'.

Here are some rules. Consider that we are working with a component called ExampleComponent:

  • All components must go inside the src/frontend/src/components directory. They don't have to be directly inside, just somewhere in there.
  • All components must be named using TitleCase. The first letter of each word in the name is capitalized, and there are no spaces or dashes or underscores.
  • In general, components will live in their own directory, ExampleComponent. This does not apply for smaller components that may be a part of a bigger, unified component. These smaller components can live in their parent component's directory.
  • Each component directory will have a single index.tsx file, whose job will be to export the component and any associated things from the directory.
  • All component .tsx files should export the main component in that file as a default export.

Here are some guidelines:

  • Try to keep individual components small. A good way of doing this is to divide a big component into smaller unit components. However, don't divide things too much. You will learn the balance as you go along.
  • It is okay to group multiple related but still distinct components into a folder. Just make sure this folder also has an index.tsx file, exporting the correct stuff.
  • If your component is meant to be reusable, it will benefit from some documentation and examples. Writing examples is also a good way to test your code as you are writing it. Read the Using the style guide wiki page to learn more about how to do this.

Putting it all together, here's an example directory structure:

src
├── components
│   ├── ExampleComponent
│   │   ├── Readme.md
│   │   ├── ExampleComponent.tsx
│   │   ├── HelperComponent.tsx
│   │   ├── styles.module.css
│   │   └── index.tsx
│   ├── BigComponent
│   │   ├── MediumComponent
│   │   │   ├── MediumComponent.tsx
│   │   │   └── index.tsx
│   │   ├── BigComponent.tsx
│   │   └── index.tsx