Как создать приложение со списком дел с помощью React

Когда-нибудь чувствовали, что ваш список дел строит козни против вас? Возможно, пришло время уравнять шансы — создать собственное приложение для управления делами на React. 🦸‍♂️ Давайте создадим его вместе, и кто знает? К концу вы, возможно, даже вычеркнете пункт «изучить React» из своего списка (и «откладывать дела на потом», но не будем забегать вперёд).

Шаг 1: Начните с основ — или как подружиться create-react-app

Прежде чем вы сможете справиться со своими задачами, вам нужно будет справиться со своим терминалом:

npx create-react-app my-todo-app
cd my-todo-app
npm start

Поздравляю! Вы только что запустили новый React-проект — свежее, чем моя утренняя чашка чая. ☕️

Шаг 2: Управление состоянием — ведь даже у задач есть проблемы с доверием

Хук useState в React — это как сверхнадежный друг, который держит ваши планы под контролем.

import React, { useState } from 'react';

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

Теперь «задачи» — это ваш всезнающий список, а «входные данные» — это тот самый тихий голосок, нашептывающий вам следующую блестящую идею (или напоминающий вам купить молока).

Шаг 3: Добавление задач — цифровой эквивалент заметок

Давайте добавим функцию, которая позволит пользователям отправлять задачи:

const addTask = () => {
  if (input.trim()) {
    setTasks([...tasks, input]);
    setInput('');
  }
};

И поле ввода:

<input 
  value={input}
  onChange={e => setInput(e.target.value)}
  placeholder="What needs doing?"
/>
<button onClick={addTask}>Add</button>

Это настолько просто, что даже ваша кошка могла бы добавить «сон» в этот список. (На самом деле, она, скорее всего, так и сделает.)

Шаг 4: Отображение списка дел или «Мама, посмотри, я продуктивен!»

Превратите эти задачи в реальность:

<ul>
  {tasks.map((task, idx) => (
    <li key={idx}>{task}</li>
  ))}
</ul>

Каждая новая задача — это крошечное цифровое конфетти выполненного задания.

Шаг 5: Удаление задач — иногда вы просто меняете свое решение

Иногда задача требует быстрого выхода. Добавьте кнопку «Удалить»:

const removeTask = idxToRemove => {
  setTasks(tasks.filter((_, idx) => idx !== idxToRemove));
};

И обновим рендер:

<ul>
  {tasks.map((task, idx) => (
    <li key={idx}>
      {task} <button onClick={() => removeTask(idx)}>Delete</button>
    </li>
  ))}
</ul>

Вуаля! Теперь вы можете без зазрения совести отправить «чистый гараж» в цифровую бездну.

Шаг 6: Отпразднуйте — вы только что создали приложение для управления делами!

Вы разобрались с хуками, укротили состояние и создали что-то действительно полезное (вот тебе и прокрастинация!). React делает логику пользовательского интерфейса увлекательной — даже затягивающей. А теперь можно добавить локальное хранилище, сроки выполнения или эмодзи единорогов. Почему бы и нет? Инновации — это всего лишь одна функция.

Помните, каждый большой проект начинается с одной задачи. Иногда эта задача — «создать приложение со списком дел на React». Вперёд, отмечайте!

Удачного программирования. И не забудьте добавить пункт «сделать перерыв» в свой новый список дел. Вы это заслужили. 🚀