Lesson 1.1
Rebekah Callari-Kaczmarczyk edited this page Feb 8, 2024
·
14 revisions
This lesson will teach you the following:
- Hello React
- Project Setup
- React components
- JSX in React
- Lists in React
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.
- 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
- Vite requires Node.js version 18+, 20+.
- 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!
- 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>
)
- Above the
App()
function, create an empty Array and store it in a variable namedtodoList
- 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:
{}
- 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 ofid
property - inner text content with value of
title
property
-