> For the complete documentation index, see [llms.txt](https://ga0-2.gitbook.io/seifxr10anz-content/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ga0-2.gitbook.io/seifxr10anz-content/week-19/day-1-react-jsx-components-props/components.md).

# 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ga0-2.gitbook.io/seifxr10anz-content/week-19/day-1-react-jsx-components-props/components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.