React - это простой в использовании фреймворк JavaScript, который позволяет нам создавать клиентские приложения.
В этой статье мы рассмотрим, как создать приложение для карточек с помощью React и JavaScript.
Создать проект
Мы можем создать проект React с помощью приложения Create React.
Для его установки запускаем:
npx create-react-app flashcard
с NPM для создания нашего проекта React.
Нам нужен uuid
, чтобы мы могли легко создавать уникальные идентификаторы для элементов наших карточек.
Чтобы добавить его, запускаем:
npm i uuidv4
Создайте приложение Flashcard
Чтобы создать приложение для карточек, мы пишем:
import { useState } from "react"; import { v4 as uuidv4 } from "uuid"; export default function App() { const [item, setItem] = useState({}); const [items, setItems] = useState([]); const add = (e) => { e.preventDefault(); const { question, answer } = item; const formValid = question && answer; if (!formValid) { return; } setItems((items) => [ ...items, { id: uuidv4(), ...item } ]); }; const deleteItem = (index) => { setItems((items) => items.filter((_, i) => i !== index)); }; return ( <div className="App"> <form onSubmit={add}> <div> <label>question</label> <input value={item.question} onChange={(e) => setItem((item) => ({ ...item, question: e.target.value })) } /> </div> <div> <label>answer</label> <input value={item.answer} onChange={(e) => setItem((item) => ({ ...item, answer: e.target.value })) } /> </div> <button type="submit">submit</button> </form> {items.map((item, index) => { return ( <div key={item.id}> <b>question</b> <p>{item.question}</p> <b>answer</b> <p>{item.answer}</p> <button onClick={() => deleteItem(index)}>delete</button> </div> ); })} </div> ); }
У нас есть состояния item
и items
, созданные с помощью хука useState
.
Затем у нас есть функция add
для добавления элемента в items
.
В этой функции мы вызываем e.preventDefault()
для отправки формы на стороне клиента.
Затем мы проверяем, установлены ли question
и answer
.
Если да, то мы вызываем setItems
, чтобы добавить элемент в массив items
с помощью обратного вызова.
Обратный вызов получает существующее значение items
и возвращает новый массив с добавленным к нему новым элементом.
Функция deleteItem
вызывает setItems
с обратным вызовом, который возвращает массив items
без записи с заданным index
.
В форме для свойства onSubmit
задано значение add
, так что add
запускается, когда мы нажимаем кнопку отправки.
Входы имеют реквизиты value
и onChange
, поэтому мы привязываем введенное значение к свойствам.
Мы передаем обратный вызов setItem
, чтобы установить для свойств значение e.target.value
, которое имеет введенное значение.
Ниже мы преобразуем items
в элементы.
Нам нужно установить для свойства key
уникальный идентификатор, чтобы React мог идентифицировать каждую запись.
У него также есть кнопка, которая вызывает deleteItem
с помощью index
, когда мы нажимаем на нее.
Заключение
Мы можем легко создать приложение для карточек с помощью React и JavaScript.
Больше контента на plainenglish.io