# Introduction

![](https://1035673192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YgCpe4o5l7qYTBd%2F-LAU8lK5X2hiAKpQnJzE%2F-LAU8tGcF-DeXUnXt782%2Fefalogo.png?generation=1524162342205601\&alt=media)

## React Client Side Application

### Application Name: Workout Log

#### React, React-strap, React-Router-Dom,

Through this react application build we will explore how to pass data up and down through the components we will write. We will learn CRUD (Create, Read, Update, and Delete) functionality through the lense of react. In this application we will be utilizing the node back-end that we have created in previous lessons.

For this application we will be using a already created api that we are sending the data to. So that isn't something that we will be getting into. That's because we want to stay within the scope of this application.

The application will be an activity log for our workouts. This activity log will be able to track workouts, we can see our previous workouts, edit them (just incase we made a mistake), and then delete them.

### Topics we are going to cover

* React functional and class components 
* React class component state 
* Routing the application with React Router 
* Passing props to child components
* Sending data in a React Application

### Assumptions

Having a fundamental understanding of react is important for this application. An understanding of how data is sent through api requests. The cli tool `create-react-app` should be installed for this application, if it's not walkthrough the steps [here](https://reactjs.org/docs/add-react-to-a-new-app.html#create-react-app).

### Housekeeping

For this application build we will be using Visual Studio code, you can download it [here](https://code.visualstudio.com/)

When installing npm packages we will be using Windows Powershell, the commands for the shell will be similar for Mac OSX Terminal.

The version of npm that we are using for this application is 5.7.1. It is currently a stable version of npm, your version might vary.


---

# Agent Instructions: 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://eleven-fifty-academy.gitbook.io/react-workoutlog/master.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.