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