Lesson 1.1

Overview

This first lesson is an introduction to React. We are going to be setting up our development environment, learning what React components and JSX are and then finally creating a list component.

Instructions

Project Setup

• Create an empty repository in GitHub called "react-todo". It does not matter if include a readme, gitignore, or a license at this time. The vite script will make a gitignore if it is missing.
• Select a working directory on your computer for your project and open that folder with your terminal. Use the command pwd to confirm that you are in the correct location BEFORE you install your project.
• Clone the empty repo into that location. (See general instructions in this wiki)
• Navigate your terminal into the new project directory.
• Create the todo application using the command:

npm create vite@latest . -- --template react

This runs the vite react script which scaffolds a basic React app.

The . specifies that the app should be created in the same directory and the --template specifies what project template to use

• Install all dependencies using the command:

npm install

• Start the project locally using the command:

npm run dev

Once the project starts up, you should see something like this in your terminal:

VITE v5.0.12  ready in 1233 ms

Local:   http://localhost:5173/
Network: use --host to expose
press h + enter to show help

• Copy the link after Local:, paste it in your browser, and hit enter. Your browser window should load a page containing the text:

Vite + React 
count is 0
Edit src/App.jsx and save to test
Click on the Vite and React logos to learn more

⚠️ Some details to note ⚠️

• Vite requires Node.js version 18+, 20+.

Commit project and create working branch

• Commit the installed project
• Push changes to GitHub repo
• Create and checkout a working branch with the name of lesson_1_1
• Publish that branch to GitHub and start coding!

Create the beginnings of the todo list

React Components and JSX

• Open the src/App.jsx file
• Remove the existing JSX from the component
• Create a level-one heading that says "Todo List"
• Create an unordered list (<ul>)

Lists in React

• Above the App() function, create an empty Array and store it in a variable named todoList
• Inside the Array, create at least 3 Objects with the following properties:
  • id: unique identifier (ex. 1, 2, 3)
  • title: summary of the todo item (ex. "Complete assignment")
• Inside your unordered list, insert a JavaScript expression
  • hint: {}
• Inside the JavaScript expression, map over your todoList array
• For each Object in the Array, return a list item (<li>) with the following:
  • key attribute with value of id property
  • inner text content with value of title property