Share
Explore

w23 MAD 6114 Lab Test 2 THU NOV 9 Creating a React To-Do List App

This TEST is designed to assess your ability to craft and assemble React components, component navigation, and data passing through a hands-on project.
This is an individual TEST.
Your job is to make a TO DO App.

Upload your File to :

⁠
https://www.dropbox.com/request/l5mzvjt65zuMswOTTXdx
⁠
⁠
Make sure that your name and student ID are in the File Name
Also put a TEXT File in your solution directory with your name / ID: ABOUTME.TXT
Hand in format:
VSC:
GitHUB URL : Put this in a text file file StudentName_StudentID.txt
Zip up your project directory: StudentName_StudentID.zip

EXPO / URL
REACT Native
** When finishing: let me SEE!
⁠

Student Lab Learning Guide Workbook

Project Overview: React To-Do List App

Objective:

Create a To-Do List application using React, which illustrates the use of React components, component navigation, and data passing. The app will allow users to add, mark complete, and delete tasks.

Tools and Resources:

Node.js and npm (Node Package Manager)
Visual Studio Code or another code editor of choice
npmjs.com packages, such as create-react-app
React Developer Tools (browser extension)

Lab Tasks:

Task 1: Project Setup

Install Node.js and npm
Ensure that Node.js and npm are installed on the system.
Setting Up the React App
Use npx create-react-app todo-app to create a new React app.
Navigate to the created project directory with cd todo-app.
Run npm start to view the default React app in the browser.

Task 2: Understanding Components

Introduction to JSX and Components
Learn about JSX syntax and how it combines HTML with JavaScript.
Understand the concept of components in React.
Creating Components
Create functional components for the To-Do List app (e.g., TodoList, TodoItem, AddTodo).
Learn about component structure and props.

Task 3: Component Navigation and Data Passing

Component Hierarchies
Understand the parent-child component relationships.
Learn how to pass props from parent to child components.
State Management
Introduction to the useState hook for state management within components.
Explore how state can be lifted from child components to parent components for shared state usage.

Task 4: Building the To-Do List App

Setting up the App Scaffold
Define the layout of the app using created components.
Implement the base styles for the components.
Adding Tasks
Implement the functionality to add new tasks through the AddTodo component.
Use state to manage the list of tasks in TodoList.
Marking Tasks as Complete
Add functionality to toggle the completion status of tasks.
Learn how to handle events in React, such as onClick.
Deleting Tasks
Implement the functionality to delete individual tasks.
Understand the importance of key props in lists.

Task 5: Data Persistence (Bonus)

Using Browser Storage
Use localStorage to save and load the to-do list.
Implement useEffect to handle side effects, such as data persistence.

Task 6: App Styling and Polish

Styling Components
Use CSS to improve the visual appeal of the app.
Learn about conditional rendering for dynamic styles.
Responsive Design
Ensure that the app is responsive and works well on different screen sizes.

Task 7: Testing and Deployment

Testing Components
Write simple tests for the React components using Jest and React Testing Library.
Learn about unit testing and the Test-Driven Development (TDD) approach.
Deploying the App
Deploy the To-Do List app to a hosting platform like GitHub Pages or Netlify.

Conclusion:

After completing the lab tasks, students will have built a fully functional To-Do List React app that demonstrates the core concepts of React components, navigation, and state management. Additionally, students will have gained experience in deploying a React application to production.

Additional Resources:

React documentation:
React Official Documentation
⁠
⁠
npmjs.com Packages:
npm
⁠
⁠
Browser Developer Tools for debugging React applications
⁠

One Possible Solution

Below I will outline a Student Lab Learning Guide for creating a React To-Do List App. This guide is designed to help students learn React components, component navigation, and data passing through a hands-on project.

⁠

Below is an example of how you can structure the components and some basic code snippets for each.

First, ensure that you have Node.js and npm installed, then create a new React app if you haven't already:

Once you have your React app set up, you can proceed to create the following components:
App Component (App.js) The main App component will serve as the container for your To-Do application.
⁠
image.png
⁠
⁠


TodoList Component (components/TodoList.js) This component will display a list of To-Do items.


⁠
image.png
⁠
⁠
TodoItem Component (components/TodoItem.js) A single To-Do item will be represented by this component.

⁠
image.png
⁠
⁠
AddTodo Component (components/AddTodo.js) This component will be used to add new To-Do items.

⁠
image.png
⁠
⁠


Now, you have the basic structure for your To-Do list app with components to list items, add new tasks, mark tasks as complete or incomplete, and delete tasks. You will need to add each component file to the components directory in your React project and import them accordingly in your App.js. After that, you can start your app with npm start and view it in your web browser to begin interactive development.

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.