Создание Пэт Проекта на React + JavaScript: Трекер Задач

Никита Калашников
Для начинающего React разработчика создание пэт проекта — отличный способ углубить свои знания и навыки. В этой статье мы предлагаем идею для пэт проекта — создание трекера задач. Мы подробно рассмотрим шаги по развертыванию и созданию проекта, а также приведем примеры кода.
Идея Проекта: Трекер Задач
Трекер задач — это приложение, которое позволяет пользователям создавать, редактировать и удалять задачи. Пользователи могут отмечать задачи как выполненные и фильтровать задачи по статусу. Это классический проект, который охватывает основные концепции React, включая состояние, обработку событий и взаимодействие с пользователем.
Шаги по Развертыванию и Созданию Проекта
1. Установка и Настройка Проекта
Для начала нам понадобится создать новый проект с помощью Create React App.
1npx create-react-app task-tracker
2cd task-tracker
3npm start
2. Создание Компонентов
App Component
В src/App.js
создадим базовую структуру нашего приложения.
1import React, { useState } from 'react';
2import TaskList from './components/TaskList';
3import AddTask from './components/AddTask';
4
5function App() {
6 const [tasks, setTasks] = useState([]);
7
8 const addTask = (task) => {
9 setTasks([...tasks, task]);
10 };
11
12 const deleteTask = (id) => {
13 setTasks(tasks.filter(task => task.id !== id));
14 };
15
16 return (
17 <div className="App">
18 <h1>Task Tracker</h1>
19 <AddTask addTask={addTask} />
20 <TaskList tasks={tasks} deleteTask={deleteTask} />
21 </div>
22 );
23}
24
25export default App;
Task Component
Создадим компонент для отдельной задачи в src/components/Task.js
.
1import React from 'react';
2
3function Task({ task, deleteTask }) {
4 return (
5 <div className="task">
6 <h3>
7 {task.text}
8 <button onClick={() => deleteTask(task.id)}>Delete</button>
9 </h3>
10 </div>
11 );
12}
13
14export default Task;
AddTask Component
Создадим компонент для добавления новой задачи в src/components/AddTask.js
.
1import React, { useState } from 'react';
2
3function AddTask({ addTask }) {
4 const [text, setText] = useState('');
5
6 const onSubmit = (e) => {
7 e.preventDefault();
8
9 if (!text) {
10 alert('Please add a task');
11 return;
12 }
13
14 addTask({ text, id: Math.floor(Math.random() * 10000) });
15 setText('');
16 };
17
18 return (
19 <form onSubmit={onSubmit}>
20 <div>
21 <label>Task</label>
22 <input
23 type="text"
24 placeholder="Add Task"
25 value={text}
26 onChange={(e) => setText(e.target.value)}
27 />
28 </div>
29 <input type="submit" value="Save Task" />
30 </form>
31 );
32}
33
34export default AddTask;
3. Стилизация Компонентов
Добавим простые стили в src/App.css
.
1.App {
2 text-align: center;
3}
4
5.task {
6 background: #f4f4f4;
7 margin: 10px;
8 padding: 10px;
9 border: 1px solid #ccc;
10}
11
12button {
13 background: red;
14 color: white;
15 border: none;
16 padding: 5px 10px;
17 cursor: pointer;
18}
4. Дополнительный Функционал
Отметка Задач как Выполненные
Добавим функционал для отметки задач как выполненных. Для этого изменим компонент Task
.
1import React from 'react';
2
3function Task({ task, deleteTask, toggleComplete }) {
4 return (
5 <div className={`task ${task.completed ? 'completed' : ''}`}>
6 <h3>
7 {task.text}
8 <button onClick={() => toggleComplete(task.id)}>Complete</button>
9 <button onClick={() => deleteTask(task.id)}>Delete</button>
10 </h3>
11 </div>
12 );
13}
14
15export default Task;
И добавим соответствующий метод в компонент App
.
1const toggleComplete = (id) => {
2 setTasks(tasks.map(task =>
3 task.id === id ? { ...task, completed: !task.completed } : task
4 ));
5};
5. Заключение
Мы создали простой, но функциональный трекер задач на React, который охватывает основные концепции работы с состоянием и компонентами. Это отличный старт для начинающего разработчика, позволяющий понять, как работает React и как строить интерактивные веб-приложения.
Этот проект можно расширить, добавив такие функции, как фильтрация задач, сохранение данных в локальное хранилище или даже подключение к внешнему API для хранения задач на сервере.
Создание таких пэт проектов поможет вам лучше понять React и JavaScript, а также развить навыки, которые будут полезны в реальных проектах.