09 - React Basics

Part 1: Components, Props, and State

Create a small React application that displays and updates a list. You will build at least two custom components that use props to influence their appearance.

Setup Instructions

  1. On the command line, navigate to the course respository on your computer (csc336-fall2025). Next, create a new React project using Vite: 
    npm create vite@latest
    Name it `09-react-basics and make sure you make it a `react` project and that you are using `javascript` (none of the other options will work for us).
  2. Move into the project folder: 
    cd 09-react-basics
  3. Install dependencies: 
    npm install
  4. Start the development server: 
    npm run dev
  5. Open the project in your code editor.

App Setup

Open src/App.jsx and remove all the default JSX. Start with:

import { useState } from "react";

function App() {
  return (
    <div>
      {/* Build your UI here */}
    </div>
  );
}

export default App;

Your Tasks

1. Create a List Stored in State

Inside App, create state that holds an array of items:

const [items, setItems] = useState([
  { text: "Example Item", important: true }
]);
Customize what your list of items are. For example:

2. Display the List

Use map() to loop through the list and display each item:

{items.map((item, index) => (
  <ListItem
    key={index}
    text={item.text}
    important={item.important}
  />
))}

You need to implement this ListItem component.

3. Add New Items

Create an input and button so the user can add items:

const [inputValue, setInputValue] = useState("");

function handleAdd() {
  setItems([...items, { text: inputValue, important: false }]);
  setInputValue("");
}
You will need to add the input and button in the same place you put the items.map.

4. Create Two Custom Components with Props

Component #1 — ListItem.jsx

Have the ListItem look different in some way based on the item itself.

Component #2 — Up to you

Create another component that is reused at least twice. It could be a part of the ListItem.

5. Customize with CSS

Edit App.css or create new styles. Make it look your own.

Part 2: Routing and API Integration

In this part, you will add routing to your application and fetch data from an external API using useEffect.

1. Install React Router

First, install the routing library:

npm install react-router-dom

2. Set Up Routing

Modify your App.jsx to use React Router. You'll need at least three routes:

Note: you'll need to move the list of items from Part 1 into a new component.

See this routing example from class for an example of routing setup.

3. Create a Component with useEffect and API Integration

Create a new component that:

Important: You cannot use the Pokemon API (pokeapi.co) that was used in the class example. Choose a different public API. Some suggestions:

See RandomPokemon.jsx for an example of using useEffect with an API (remember to use a different API!).

Build and Publish Your Site

npm run build

This creates a folder named dist.

Copy Your Build Into Your Course Website

  1. Edit the index.html file inside of the dist directory by adding a ./ to the src property links on the script and link elements (e.g. src="./assets/index-DhduZZiG.js")
  2. Copy the entire dist folder from your React project.
  3. Paste it into the csc336-fall2025 root directory.
  4. Rename the folder to: 
    09-react-basics-live

Commit and Push your project

It should be visible by going to:

https://<your-github-username>.github.io/csc336-fall2025/09-react-basics-live

Example Projects From Class with Comments

Part 1 Examples

Part 2 Examples