# "React"ing to the Front-End

Our front-end uses React. Why?&#x20;

* Because dividing our codebase into multiple components makes things easy to maintain and understand.
* We wanted to learn a new technology and see how far it took us.
* Literally every employer wants you to learn it.

Here are our main components, their descriptions, and their props.

## Components

### HomePageComponent

| \~          | \~                                                     |
| ----------- | ------------------------------------------------------ |
| Description | Our container component - the root of the application. |
| Children    | **NavBarComponent**, **Route**                         |
| Props       |                                                        |

### **NavBarComponent**

| **\~**      | \~                                                                             |
| ----------- | ------------------------------------------------------------------------------ |
| Description | The horizontal navigation bar component that has **Links** to other components |
| Children    | **Links**                                                                      |
| Props       | None                                                                           |

### **MemeCardComponent**

| **\~**      | \~                                                                                                                                                                              |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Description | The most important component in the application. This is where the majority of the API calls are made and most of the processing is done. This is also where you see the memes. |
| Children    | **FavoriteButtonComponent**                                                                                                                                                     |
| Props       | None                                                                                                                                                                            |

### FavoriteButtonComponent

| \~          | \~                                                                  |
| ----------- | ------------------------------------------------------------------- |
| Description | The button on each image card used to save the image as a favorite. |
| Children    | None                                                                |
| Props       | imageURL                                                            |

### FavoriteComponent

| \~          | \~                                                   |
| ----------- | ---------------------------------------------------- |
| Description | The main view for all of the user's favorited memes. |
| Children    | None                                                 |
| Props       | None                                                 |

### CustomFavoriteComponent

| \~          | \~                                                                      |
| ----------- | ----------------------------------------------------------------------- |
| Description | Allows the user to submit their own imageURL to be saved as a favorite. |
| Children    | None                                                                    |
| Props       | None                                                                    |
