Module 0: Application Setup

In this module we will walk through creating a React application and start planning out the project's structure.

Step 1. Create React App & Install Packages

Let's start by creating a new React application through the CLI(command line interface) tool create-react-app. If create-react-app isn't installed on your computer, go back to the introduction chapter, and the download link is located there.

In your terminal type the following:

create-react-app workoutlogclient

By using create-react-app, we allow the react CLI to create a starter application for us consisting of a couple of files and folders:

  • Public - This folder has the only html file we will need, the index.html. We'll make a few slight changes in this file.

  • Src - This folder has our React code and components. We will be spending most of our time in this folder, creating new components.

  • .gitignore - This file has folder and files that we omit from being read by Git.

  • package.json/package-lock.json - These two folders have our external dependencies and libraries that we need for this application. Also some metadata for our application.

  • README.md - This file is markdown that allows us to include additional information about our project for other developers. This file should be changed as you continue to develop your application.

With creating an application using create-react-app, React automatically initializes the Git repository for us.

Open the application in Visual Studio code, and let's start our clean up in the next step.

Step 1.5 Installing Packages

We need some additional packages installed to make our application work! Go ahead and type the following in your terminal:

npm install react-router-dom reactstrap bootstrap --save

Step 2. Remove template code

We need to remove the code that came with the initial creation of the application so that we start off with a blank slate. Please remove the following:

  1. Open up the src folder in the application.

  2. Remove the App.test.js file. This is a testing file that we won't be using. Testing is an amazing practice, but it's just out of scope of this application build.

  3. Remove the logo.svg file. This is the spinning atom that is on the initial start page.

  4. Remove some of the code that is located in the App.js file so that the file looks like this:

  1. Removed the import for the App.css file. Adding code to that file is out of the scope of this build. However, we can re-add the import later on if you'd like to work with the App.css file.

Step 3. Run the Application

Go ahead and run your application. In your terminal run:

npm start

You should see a page with nothing on it, and no errors!

In the next module we will add our first component. Let's try a challenge first.

Challenge: Change the title of your application

For this challenge we want to change the title of the webpage

Here is what it currently looks like:

the title should look like this:

PreviousIntroductionNextModule 1: New Component

Last updated