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.

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

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.