react-basics

Objective

By completing this project, students will demonstrate:

creating and using React components
passing data with props
managing state with useState
handling button clicks and form input
rendering lists from arrays
showing content conditionally
building a simple controlled form

Project overview

This project helps students practice the basic concepts of React:

• Components
• Props
• State
• Events
• Lists
• Conditional rendering
• Forms

1. Create a profile section

Add:

• a Header
• a ProfileCard
• a Footer

The ProfileCard should show:

• name
• short bio
• favorite subject or hobby

Use props to make the component reusable.

2. Add an interactive message

Use useState to store a message.

Add a button that changes the message when clicked.

3. Build a task list

Add:

• an input field
• a button
• a list of tasks

When the user submits a task:

• the task is added to the list
• the input clears
• the task is displayed on the page

4. Add conditional rendering

Show a message when there are no tasks yet.

Example:

• “No tasks yet”

5. Add clear button

• add a second button to clear the message

Final Check

Your app should include:

• reusable components
• props
• state
• button interaction
• list rendering
• form input
• conditional rendering