# Components

The basic unit you'll be working with in React is a Component. Components are pieces of our application that we define once and can reuse throughout. A core part of React's philosophy is to break everything up into smaller pieces. You can think of a component as a small piece of a webpage that has a singular purpose. It can be as little as a single field or as big as a sidebar containing other components. Yes, components can hold other components! In fact, you should strive to have lots of small components that you can nest within each other.

Unlike UI frameworks like Bootstrap that come with predefined components out of the box, React does not. React allows you to decide what constitutes a component and then provides the framework for you to add the required HTML, CSS, and JS to create them. So instead of creating a few large files, you will organize your web app into small, reusable components that encapsulate their own content, presentation, and business logic.

**Thinking in Components**

Take for instance an example of a train station schedule. There are elements that repeat themselves and essentially perform the same function.

![](https://i.imgur.com/ztlOSgY.png)

These Components, much like the HTML used to render them, can be structured into various nested Components.

![](https://i.imgur.com/kSBWuJt.png)

Notice the structure of how the various components are nested:

```
- TubeTracker
  - Network
    - Line
  - Predictions
    - DepartureBoard
      - Trains
```

* `TubeTracker` contains the application and will render 2 main elements: `Network` and `Predictions`
* `Network` displays each line on the network and renders a `Line` for each line that it contained in it's dataset
* `Line` displays a single station on a line
* `Predictions` controls the state of the departure board and renders `DepartureBoard`
* `DepartureBoard` displays the current station and platforms and renders a `Train` for each one in its dataset
* `Trains` displays the trains due to arrive at a platform

**Component Rules & Conventions**

_Rules (Component Specific)_

* They must be defined with an uppercase first letter.
* They must return some form of UI (user interface).

_Best Practices_

* Use PascalCase for both the Component name and its file name.
* Each Component should be in its own file.
* Each Component should reference its own CSS.
