Создание приложения для заметок с помощью React и javascript Localstorage.

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

Необходимыми условиями для этого проекта являются:

• Знание CSS, Javascript, React.js
• Установленная последняя версия Node.js

Начало работы

Если у вас установлены npm и Node.js, создайте новое приложение react notes-app. Мы сделаем это с помощью npx create-react-app.

Создание наших компонентов

Сначала мы создадим папку components в каталоге src приложения, в которой будут храниться наши компоненты — Note, Notes и Createnote. Кроме того, в нем будет папка CSS, в которой будут храниться стили нашего приложения.

Хранение необходимых данных

Как текст, который набирается в данный момент, так и список заметок, которые у нас есть в данный момент, должны быть сохранены для того, чтобы их можно было использовать в приложении заметок.
Для этого в нашем файле Notes.js мы импортируем react и useState из react.

import React,{useState} from 'react'

Затем мы используем хук useState для хранения массива заметок и вводимого текста.

    const [notes,setNotes]=useState([])
    const [text,setText]=useState('')

Создание основных процедур приложения для заметок

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

    const updateText=(e)=>{
        setText(e.target.value)
    }

    const saveNote=()=>{
        setNotes((prevState)=>[
            ...prevState , {
                key:uuid(),
                id:uuid(),
                text:text,
            }
        ]);
        setText('');
    }

    const deleteNote =(id)=>{
        const filteredNotes=notes.filter((note)=>{return note.id !== id});
        setNotes(filteredNotes);
    }

В приведенном выше коде

• Функция updateText принимает клавиатурный ввод пользователя и сохраняет его в переменной text, используя хук useState.

• Функция saveNote создает новый объект и добавляет его в существующий массив Notes. Мы создаем ключ и id для объекта, чтобы строить массивы в React и удалять заметку соответственно.
  Они генерируются с помощью uuid v4. Вы можете установить его следующим образом:

npm install uuidv4

И использовать его следующим образом:

import { v4 as uuid } from "uuid";

Параметру text будет присвоено значение text, то есть наш желаемый текстовый котент для заметки. Значение text было установлено пустым, чтобы создать новое содержимое для нашей будущей заметки.

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

Мы хотим, чтобы структура нашего приложения для заметок сначала отображала все сохраненные заметки, а затем отображала поле ввода для создания новой заметки.

 return(
        <div className='Notes'>
            {notes.map((note)=>(
            <Note deleteNote={deleteNote} id={note.id} text={note.text}/>
            ))}
            <Createnote updateText={updateText} saveNote={saveNote} inputText={text} />
        </div>
    )

Прежде всего, мы вызываем метод map для массива notes, заметке передаются реквизиты deleteNote, id и text, которые будут использоваться для выполнения ее функций. Реквизитам id и text передается значение ключа id и ключа text заметки соответственно.

Затем мы включаем наш компонент Createnote и передаем необходимые функции реквизитам updateText и saveNote. text передается в реквизит inputText и используется в компоненте Createnote для обновления значения нашей текстовой области.

Подготовка компонента Note

После того как мы создали общий каркас приложения для заметок, следующая задача — перейти к Note.js и разработать компонент Note, набрав следующее:

import React from "react"


function Note({id,deleteNote,text}){
    return(
        <div className="note">
            <div className="note-body">{text}</div>
            <div className="note-footer">
                <button onClick={()=> deleteNote(id)}>Delete</button>
            </div>
        </div>
    )
}

export default Note

В div note-body содержится содержимое заметки, поэтому ему передается значение text. Помните, что именно это содержимое сохраняется в объекте заметки при сохранении новой заметки.
В note-footer div находится кнопка удаления, которая при нажатии выполняет определенную функцию. Функция вызывает нашу функцию deleteNote, расположенную в Notes.js с id, переданным в качестве параметра.

Создание нашего компонента Createnote

Мы успешно завершили создание структуры нашей заметки, но нам все еще нужна текстовая область для сбора пользовательского ввода и сохранения его в виде новой заметки. В Createnote.js мы добавляем следующее:

import React from 'react'

function Createnote({updateText,saveNote,inputText}){

    return (
        <div className='note' >
            <textarea onChange={updateText} maxLength={100} placeholder='Type Here...' value={inputText} ></textarea>
            <div className='note-footer'>
                <button onClick={saveNote}>Save note</button>
            </div>
        </div>
    )
}


export default Createnote

Весь текст вводится в текстовую область с максимальной длиной 100 символов, значение также установлено на inputText, чтобы текстовая область могла быть очищена после сохранения заметки. Мы добавляем атрибут onChange к textarea, чтобы обновить text в нашем компоненте Notes. В note-footer div содержится кнопка удаления, которая при нажатии выполняет функцию saveNote.
Далее мы включаем счетчик, чтобы пользователь знал, сколько символов еще доступно для ввода.

    const maxLength=100;
    const counter=maxLength-inputText.length;
    return (
        <div className='note' >
            <textarea onChange={updateText} maxLength={100} placeholder='Type Here...' value={inputText} ></textarea>
            <div className='note-footer'>
                <span>{counter}</span>
                <button onClick={saveNote}>Save note</button>
            </div>
        </div>
    )

Хранение заметок с помощью localstorage

Наше приложение для заметок завершено, но мы не хотим потерять сохраненные заметки при закрытии браузера, мы предотвратим это с помощью javascript localstorage и хука useEffect. notes включается в квадратную скобку функции useEffect, чтобы убедиться, что наши заметки сохраняются при каждом рендере, в котором notes обновляется.

    useEffect(()=>{localStorage.setItem('Notes',JSON.stringify(notes))},[notes]);

    useEffect(()=>{const data=JSON.parse(localStorage.getItem('Notes'));setNotes(data)},[]);

Чтобы это работало, useEffect должен быть импортирован из react.

import React,{useState,useEffect} from 'react'

Связывание наших компонентов

Мы создали компоненты Note и Createnote, теперь мы импортируем их в Notes.js, чтобы сделать наше приложение для заметок полностью функциональным.

import Note from './Note'
import Createnote from './Createnote'
import Note from './Note'

Наше приложение еще не отображается, потому что мы все еще не импортировали компонент Notes в App.js. Мы завершаем тело нашего приложения для заметок следующим образом:

import React from 'react'
import './App.css';
import Notes from './components/Notes.js'

function App() {

  return (
    <div className="App">
      <h1>Notes</h1>
      <Notes />
    </div>
  );
}

export default App;

Стилизация нашего приложения

Стили для приложения Notes будут храниться в файле notes.css, расположенном в папке css.

.note{
    height: 250px;
    margin-right: 10px;
    border-radius: 35px;
    width: 30%;
    position: relative;
    display: inline-block;
    vertical-align: top;
    border: 2px solid black;
    margin-bottom: 20px;
    background-color: #f9ce69;
}
textarea{
    outline: none;
    resize: none;
    border: none;
    background: transparent;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 100%;
    max-height: 82%;
    min-height: 82%;
    font-size: 25px;
    line-height: 35px;
    padding: 10px 0 0 10px;
}

.note-body{
    line-height: 35px;
    padding: 10px 0 0 10px;
    font-size: 25px;
    height: 82%;
}


button{
    background-color: #4741a6;
    padding: 10px 15px;
    float: right;
    border: none;
    border-radius: 15px;
    font-size: 15px;
    color: white;

    position: absolute;
    bottom: 10px;
    right: 10px;
}
span{
    color: red;
    padding-left: 10px;
    font-weight: 600;
}

Заключение

В этой статье было показано, как создать простое приложение для заметок, которое сохраняет заметки даже при потере браузера. Кроме того, в ней объясняется, как использовать хуки react для сохранения элементов и автоматического выполнения определенных задач.
Репозиторий Github находится здесь, а живая демонстрация сайта размещена на vercel.