Scribd
Upload
4 views2 pages

Assignment 01 React Basics

This document outlines an assignment focused on React basics, including key concepts like components, props, and event handling. It provides step-by-step instructions to create a Task Manager project with components for adding and displaying tasks. The assignment emphasizes the use of custom components, state management, and styling within the React application.

Uploaded by

Vidushan Prabash
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views2 pages

Assignment 01 React Basics

This document outlines an assignment focused on React basics, including key concepts like components, props, and event handling. It provides step-by-step instructions to create a Task Manager project with components for adding and displaying tasks. The assignment emphasizes the use of custom components, state management, and styling within the React application.

Uploaded by

Vidushan Prabash
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

📝

Assignment 01 React Basics


Objective:

The objective of this document is to clarify the following concepts in React:

Components

Arrow Functions

Exports and Imports (Modules)

Spread and Rest Operators

Destructuring

JavaScript Array Functions like map and splice

Data passing through props

Splitting Components into Multiple Components

Child-to-Parent Component Communication (Bottom-up)

Listening to Events and working with Event Handlers

Create a new React project called Task Manager, follow these steps:

1. Create a component folder inside the src folder. Inside the component folder,
create another folder called UI .

2. Inside the UI folder, create a custom button component called Button . Pass the
name of the button and the onClick method through props. For example:

<Button name='Add Task' onClick={onSubmit}></Button>

i. Inside the component folder, create an AddTask component. Inside that


component, create a text input field and use the previously created custom
button to add a task.

Assignment 01 React Basics 1


ii. Also inside the component folder, create a TaskList component to display the task
list.

iii. Create a separate component to display a single task called ListItem , and use it
inside the TaskList component.

iv. The ListItem component should contain a span or lable to display the task
name and a delete button to remove a particular task. You can reuse the Button
component created in Q2.

v. Inside the App component, add the AddTask and TaskList components.

vi. Create functions to add and remove tasks inside the App component. Also,
manage the state of the list inside the App component.

vii. Pass all the required data and functions through props.

viii. Style the components appropriately.

Component structure is given below

Assignment 01 React Basics 2

You might also like