Introduction

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.

Housekeeping

For this application build we will be using Visual Studio code, you can download it here

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.