Создание приложения для заметок с помощью 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.

Оцените статью
devanswers.ru
Добавить комментарий