project-task.md

📝 Static React To-Do App

🎯 Objective:

Students will practice creating and combining React components to build a basic static application.

---

🚀 Instructions

Part 1: Set Up the Application

🛠️ Create a New React App:

Use Vite to scaffold a new React project:

npm create vite@latest

Project Name: static-todo-react-app
Framework: React
Variant: JavaScript

---

📦 Install Dependencies

Navigate into the project directory:

cd static-todo-react-app

📦 Install Necessary Dependencies

Run the following command to install all required packages:

npm install

▶️ Start the Development Server

Run the following command to start your local development server:

npm run dev

🌐 Open Your Browser

Navigate to the following URL to view your application:

http://localhost:5173

Part 2: Build the Components

📁 Create a Components Folder

Inside the src directory, create a folder named:

components

✨ Create ToDoList.jsx

Create a functional component called ToDoList.

Inside this component:

• Define an array of static tasks (e.g., "Learn React", "Build a project", "Read documentation").
• Manually add a list:

<ul>
  <li>Learn React</li>
  <li>Build a project</li>
  <li>Read documentation</li>
</ul>

✨ Create Header.jsx

Create a functional component called Header.

Inside this component:

• Render a simple heading:

<h1>My To-Do List</h1>

Part 3: Combine Components in App.jsx

📥 Import Components:

Import the Header and ToDoList components into App.jsx.

🧩 Use Components:

Place the <Header /> at the top of the app.

Add the <ToDoList /> below the header.

---

Part 4: Add Styling

🎨 Update App.css:

Add basic styles to make the app visually appealing.

Center the content using:

text-align: center;

Style the List Items

• Custom bullet points or spacing
• Padding and margin for layout
• Font and color choices

---

Optional Enhancements

• Add hover effects on tasks
• Use a custom font for list text

---

✅ Deliverables

A functional React app that displays:

• A heading that says: My To-Do List
• A static list of tasks:
  • Learn React
  • Build a project
  • Read documentation

---

💡 Example Output

Heading:

My To-Do List

List:

• Learn React  
• Build a project  
• Read documentation