Создание Пэт Проекта на 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, а также развить навыки, которые будут полезны в реальных проектах.