Skip to main content

Exercise: React Intro

Objective#

Your objective is to create your first react application with the create-react-app tool, and investigate the starter files you are given.

This project repository will be used for all of the upcoming react exercises

Getting Started#

This is part 1 of TrueCoders' React Exercise Series.

We will create a new react repository that you work in for the duration of the series.

Steps#

React Series Part 1 has multiple exercises.

Exercise 1: Create the Project#

Create a react project with create-react-app

  1. Navigate to your repos/ folder (or other desired place where you keep your projects)
  2. Create a new react project by running npx create-react-app react-project in your terminal

Exercise 2: Open Visual Studio Code#

Open the new react project in Visual Studio Code

  1. Open the app in VSCode.
  2. Take note of the templated file structure. Open some of the files to see what is there before you make any changes.

Exercise 3: Start the React Development Server#

Start the development server to see the rendered output

  1. Start the create-react-app development server by running npm start in your terminal
  2. View the rendered output in the browser
    • Running npm start should open your browser for you, but you can always access your development server by visiting http://localhost:3000 in your browser

Be sure to be at your react-project/ folder in your terminal before running npm start

Exercise 4: Update the App#

Make changes!

  1. Open the src/App.js file
  2. Try to change the paragraph inner html from Edit <code>src/App.js</code> and save to reload. to React is so cool!
    • Keep your eyes on the rendered output in the browser. It changes automatically!
  3. Add the following elements to the content in the App.js file. No specific order or structure required. Just see the elements updated on the DOM with the development server running.
    • a heading 1 element
    • another paragraph element
    • an unordered list with 3 list items

We're going to be spending a lot of time in React, but for now, you've created a new React project with the create-react-app tool, investigated the template source code, started the React development server, and made some initial changes!

Helpful Links#

If you feel stuck, or would like to see the finished code for this exercise to check your work, check out: