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

Разработчик

Для начинающего React разработчика создание пэт проекта — отличный способ углубить свои знания и навыки. В этой статье мы предлагаем идею для пэт проекта — создание трекера задач. Мы подробно рассмотрим шаги по развертыванию и созданию проекта, а также приведем примеры кода.

Идея Проекта: Трекер Задач

Трекер задач — это приложение, которое позволяет пользователям создавать, редактировать и удалять задачи. Пользователи могут отмечать задачи как выполненные и фильтровать задачи по статусу. Это классический проект, который охватывает основные концепции React, включая состояние, обработку событий и взаимодействие с пользователем.

Шаги по Развертыванию и Созданию Проекта

1. Установка и Настройка Проекта

Для начала нам понадобится создать новый проект с помощью Create React App.

npx create-react-app task-tracker
cd task-tracker
npm start

2. Создание Компонентов

App Component

В src/App.js создадим базовую структуру нашего приложения.

import React, { useState } from 'react';
import TaskList from './components/TaskList';
import AddTask from './components/AddTask';

function App() {
  const [tasks, setTasks] = useState([]);

  const addTask = (task) => {
    setTasks([...tasks, task]);
  };

  const deleteTask = (id) => {
    setTasks(tasks.filter(task => task.id !== id));
  };

  return (
    <div className="App">
      <h1>Task Tracker</h1>
      <AddTask addTask={addTask} />
      <TaskList tasks={tasks} deleteTask={deleteTask} />
    </div>
  );
}

export default App;

Task Component

Создадим компонент для отдельной задачи в src/components/Task.js.

import React from 'react';

function Task({ task, deleteTask }) {
  return (
    <div className="task">
      <h3>
        {task.text} 
        <button onClick={() => deleteTask(task.id)}>Delete</button>
      </h3>
    </div>
  );
}

export default Task;

AddTask Component

Создадим компонент для добавления новой задачи в src/components/AddTask.js.

import React, { useState } from 'react';

function AddTask({ addTask }) {
  const [text, setText] = useState('');

  const onSubmit = (e) => {
    e.preventDefault();

    if (!text) {
      alert('Please add a task');
      return;
    }

    addTask({ text, id: Math.floor(Math.random() * 10000) });
    setText('');
  };

  return (
    <form onSubmit={onSubmit}>
      <div>
        <label>Task</label>
        <input 
          type="text" 
          placeholder="Add Task" 
          value={text} 
          onChange={(e) => setText(e.target.value)} 
        />
      </div>
      <input type="submit" value="Save Task" />
    </form>
  );
}

export default AddTask;

3. Стилизация Компонентов

Добавим простые стили в src/App.css.

.App {
  text-align: center;
}

.task {
  background: #f4f4f4;
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}

button {
  background: red;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

4. Дополнительный Функционал

Отметка Задач как Выполненные

Добавим функционал для отметки задач как выполненных. Для этого изменим компонент Task.

import React from 'react';

function Task({ task, deleteTask, toggleComplete }) {
  return (
    <div className={`task ${task.completed ? 'completed' : ''}`}>
      <h3>
        {task.text} 
        <button onClick={() => toggleComplete(task.id)}>Complete</button>
        <button onClick={() => deleteTask(task.id)}>Delete</button>
      </h3>
    </div>
  );
}

export default Task;

И добавим соответствующий метод в компонент App.

const toggleComplete = (id) => {
  setTasks(tasks.map(task => 
    task.id === id ? { ...task, completed: !task.completed } : task
  ));
};

5. Заключение

Мы создали простой, но функциональный трекер задач на React, который охватывает основные концепции работы с состоянием и компонентами. Это отличный старт для начинающего разработчика, позволяющий понять, как работает React и как строить интерактивные веб-приложения.

Этот проект можно расширить, добавив такие функции, как фильтрация задач, сохранение данных в локальное хранилище или даже подключение к внешнему API для хранения задач на сервере.

Создание таких пэт проектов поможет вам лучше понять React и JavaScript, а также развить навыки, которые будут полезны в реальных проектах.

Консультация

Оставьте заявку на консультацию

    О проекте

    Расскажите о проекте, чтобы я мог подготовить предварительное предложение

      Написать в телеграм