Создать приложение для заметок с React

Введение

В этом проекте мы создадим простое приложение для заметок с использованием React. Приложение позволит пользователям добавлять, редактировать и удалять заметки. Мы разобьем разработку на несколько этапов, обеспечивая, чтобы каждый этап соответствовал определенным требованиям и добавлял важные функции.

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

Создавать новый проект React с помощью команды Create React App
Строить функциональные компоненты React для создания пользовательского интерфейса
Управлять состоянием с использованием хука useState React
Добавлять и управлять заметками в приложении
Реализовывать функции добавления, редактирования и удаления заметок
Обрабатывать взаимодействия пользователя и события в компонентах React
Стилизовать приложение React с использованием CSS
Разрабатывать базовое приложение CRUD (Create, Read, Update, Delete)
Структурировать и организовать проект React
Создавать простой, отзывчивый пользовательский интерфейс для приложения для заметок

🏆 Достижения

После завершения этого проекта вы сможете:

Настраивать новый проект React
Создавать и управлять компонентами React
Использовать хуки React, такие как useState, для управления состоянием компонента
Обрабатывать ввод пользователя и отправку форм в приложении React
Передавать данные и функции между родительскими и дочерними компонентами с использованием props
Создавать отзывчивые и интерактивные пользовательские интерфейсы в React
Реализовывать базовое хранение и манипуляцию данными в приложении React
Структурировать и организовать файлы кода в проекте React
Использовать CSS для стилизации компонентов React
Дебажить и устранять неполадки в приложениях React
Следить за лучшими практиками при создании приложения React

Настройка проекта

Требования:

Установка зависимостей в новом проекте React.

Функциональность:

Инициализация проекта с необходимыми зависимостями и базовой структурой проекта.

Шаги:

Откройте терминал и перейдите в папку проекта:
```
cd notes-app
```
Вам нужно выполнить эту команду в каталоге project.
Установка зависимостей в проекте:
```
npm install
```
После завершения установки создается папка node_modules; если она не существует, это означает, что установка не удалась.

Создание компонента Note

Требования:

Создать компонент Note, представляющий отдельную заметку.
Компонент Note должен отображать содержимое заметки, а также предоставлять кнопки для редактирования и удаления.

Функциональность:

Отображать заголовок и текст заметки.
Предоставлять кнопки для редактирования и удаления заметки.

Шаги:

Внутри папки src создайте новый файл с именем Note.js.
Реализуйте компонент Note следующим образом:

import React from "react";

const Note = ({ note }) => {
  return (
    <div className="note">
      <h3>{note.title}</h3>
      <p>{note.text}</p>
      <button>Edit</button>
      <button>Delete</button>
    </div>
  );
};

export default Note;

✨ Проверить решение и практиковаться

Создание компонента App и состояния

Требования:

Создать компонент App, который будет управлять заметками и их состоянием.
Инициализировать состояние для хранения массива заметок.
Реализовать функции для добавления, удаления и редактирования заметок.

Функциональность:

Хранить массив заметок.
Добавлять новые заметки.
Удалять заметки.
Редактировать заметки.

Шаги:

В папке src откройте файл App.js.

Импортируйте хук useState в начале файла:

// App.js
import React, { useState } from "react";
import "./App.css";
import Note from "./Note";

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

// App.js
function App() {
  const [notes, setNotes] = useState([]);
  const [newNote, setNewNote] = useState({ title: "", text: "" });

  const addNote = () => {
    // TODO: Реализовать функцию addNote
  };

  const deleteNote = (id) => {
    // TODO: Реализовать функцию deleteNote
  };

  const editNote = (id, newText) => {
    // TODO: Реализовать функцию editNote
  };

  return <div className="App">{/* Содержимое App располагается здесь */}</div>;
}

✨ Проверить решение и практиковаться

Реализация функциональности добавления заметки

Требования:

Реализовать функцию addNote для добавления новых заметок в состояние.
Убедиться, что заметки имеют заголовок и текст.

Функциональность:

Добавлять новые заметки в состояние.
Очищать поля ввода после добавления заметки.

Шаги:

Реализовать функцию addNote:

// App.js
const addNote = () => {
  if (newNote.title && newNote.text) {
    const newId = Date.now().toString();
    setNotes([...notes, { ...newNote, id: newId }]);
    setNewNote({ title: "", text: "" });
  }
};

В своем JSX использовать обработчики onChange для захвата значений ввода и обновления состояния:

// App.js
return (
  <div className="App">
    <h1>Приложение для заметок</h1>
    <div className="форма_для_заметки">
      <input
        type="text"
        placeholder="Заголовок"
        value={newNote.title}
        onChange={(e) => setNewNote({ ...newNote, title: e.target.value })}
      />
      <textarea
        rows="4"
        cols="50"
        placeholder="Текст"
        value={newNote.text}
        onChange={(e) => setNewNote({ ...newNote, text: e.target.value })}
      />
      <button onClick={addNote}>Добавить заметку</button>
    </div>
  </div>
);

✨ Проверить решение и практиковаться

Реализация функциональности удаления заметки

Требования:

Реализовать функцию deleteNote для удаления заметки из состояния при нажатии кнопки "Delete".

Функциональность:

Удалять заметку из состояния при нажатии кнопки "Delete".

Шаги:

Реализовать функцию deleteNote:

// App.js
const deleteNote = (id) => {
  const updatedNotes = notes.filter((note) => note.id !== id);
  setNotes(updatedNotes);
};

Передать функцию deleteNote в качестве свойства компоненту Note, чтобы разрешить удаление заметки.

// App.js
<div className="App">
  <div className="список_заметок">
    {notes.map((note) => (
      <Note key={note.id} note={note} onDelete={deleteNote} onEdit={editNote} />
    ))}
  </div>
</div>

✨ Проверить решение и практиковаться

Реализация функциональности редактирования заметки

Требования:

Реализовать функцию editNote для обновления текста заметки при нажатии кнопки "Edit".

Функциональность:

Отображать текст заметки в редактируемом текстовом поле.
Обновлять текст заметки при нажатии кнопки "Save".

Шаги:

Реализовать функцию editNote:

// App.js
const editNote = (id, newText) => {
  const updatedNotes = notes.map((note) =>
    note.id === id ? { ...note, text: newText } : note
  );
  setNotes(updatedNotes);
};

Обновить компонент Note для обработки редактирования:

// Note.js
import React, { useState } from "react";
const Note = ({ note, onDelete, onEdit }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [editedText, setEditedText] = useState(note.text);

  const handleEdit = () => {
    setIsEditing(true);
  };

  const handleSave = () => {
    onEdit(note.id, editedText);
    setIsEditing(false);
  };

  return (
    <div className="заметка">
      <div className="заголовок_заметки">
        <h3>{note.title}</h3>
        <button onClick={() => onDelete(note.id)}>Delete</button>
      </div>
      {isEditing ? (
        <>
          <textarea
            rows="4"
            cols="50"
            value={editedText}
            onChange={(e) => setEditedText(e.target.value)}
          />
          <button onClick={handleSave}>Save</button>
        </>
      ) : (
        <p>{note.text}</p>
      )}
      {!isEditing && <button onClick={handleEdit}>Edit</button>}
    </div>
  );
};

✨ Проверить решение и практиковаться

Стилизация (App.css)

Требования:

Применить базовую стилизацию к приложению для создания визуально привлекательного интерфейса.

Функциональность:

Стилизовать компоненты приложения для улучшения пользовательского опыта.

Шаги:

Создайте файл App.css и примените базовую стилизацию к компонентам вашего приложения. Используйте предоставленный CSS-код для стилизации приложения.

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  max-width: 800px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.header {
  background-color: #343a40;
  color: #fff;
  padding: 20px 0;
  text-align: center;
  font-size: 32px;
  margin-bottom: 20px;
  border-radius: 10px;
}

.note-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.note-form input[type="text"],
.note-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: none;
  border-bottom: 2px solid #007bff;
  background-color: transparent;
  font-size: 16px;
  transition: border-bottom 0.3s;
}

.note-form input[type="text"]:focus,
.note-form textarea:focus {
  border-bottom: 2px solid #0056b3;
  outline: none;
}

.note-form button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.note-form button:hover {
  background-color: #0056b3;
}

.note-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.note {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 300px;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}

.note:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.note-header h3 {
  margin: 0;
  font-size: 24px;
  color: #007bff;
}

.note-actions {
  display: flex;
  gap: 10px;
}

.note-actions button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.note-actions button:hover {
  background-color: #0056b3;
}

✨ Проверить решение и практиковаться

Запуск приложения

Для запуска вашего React Notes App:

Откройте терминал или командную строку.
Убедитесь, что вы находитесь в корневой директории проекта (где находится файл package.json).
Запустите сервер разработки:
```
npm start
```
Теперь вы должны увидеть базовое React-приложение, запускающееся в вашем браузере на порту 8080. Мы будем использовать это базовое приложение для создания нашего Notes App.
Эффект страницы выглядит следующим образом:

✨ Проверить решение и практиковаться

Резюме

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