Рубрики
Без рубрики

Mern Stack Todo Application [Frontend]

Мы будем создавать приложение Frontend для нашего бэкэнд -приложения. Прежде чем мы получим … Tagged с WebDev, React, Beginters, JavaScript.

Мы будем создавать приложение Frontend для нашего бэкэнд -приложения.

Прежде чем мы начнем

Читайте часть 1: Создание бэкэнда

В части-1, мы

  • Инициализированный бэкэнд с использованием npm и установил необходимые зависимости
  • Настройка Mongodb база данных
  • Настройте сервер, используя Node.js и Express.js
  • Создана база данных схема определить СДЕЛАТЬ
  • Созданы маршруты API в Создать , Читать , Обновление и Удалить сделать

В этой части, мы будем

  • Установите наш фронт, используя Создать-реакт-приложение
  • Создайте компоненты для чтения всего TODO, создания TODO и обновления TODO

Перед началом работы с частью 2

  • Храните содержимое части-1 в папке с именем сервера и создайте папку для клиента

Структура папок будет выглядеть примерно так

.
└── mern-todo
    ├── server
    └── client

Часть 2: Создание фронта

1. Инициализация нашего проекта

Мы инициализируем Create-React-App в Клиент папка. Запустите следующую команду из терминала, но убедитесь, что вы находитесь в Клиент папка.

npx create-react-app .

Анкет В вышеупомянутой команде относится к Текущая папка Анкет Это установит наше приложение React в текущую папку вместо установки приложения в другую папку.

2. Установка требуемых зависимостей

В папке клиента установите следующие зависимости

npm i node-sass axios react-router-dom

Узел-sass : позволяет использовать sass вместо CSS Аксиос : Чтобы сделать вызовы API в Бэкэнд React-Router-Dom : Для маршрутизации между страницами

Клиент папки Package.json должен выглядеть примерно так.

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.1",
    "node-sass": "^6.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": ["react-app", "react-app/jest"]
  },
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

3. Очистка папки SRC

  • Удалить логотип.svg
  • Удалить импорт из App.js
  • Удалить следующее из App.js

  logo
  
Edit src/App.js and save to reload.

  
    Learn React

и поместите следующий заполнитель. Мы поместим фактический код позже.

Hello, World!

  • Удалить index.css файл и удалите соответствующий импорт из index.js

  • Переименовать App.css Файл в App.scss и изменить соответствующий импорт в App.js

  import "./App.scss" //updated

  • Запустить npm start Анкет Open http://localhost: 3000 и он должен отображать Привет, мир!

  • Скопируйте и вставьте стили из Здесь и вставьте его в App.scss файл.

Теперь мы готовы начать создавать фронтальное приложение.

4. Создание компонентов

.
├── node_modules
├── public
├── src <---------- we are here
│   ├── App.js
│   ├── App.scss
│   ├── App.test.js
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock

Создать Компоненты Папка внутри SRC папка и добавьте следующие файлы

  • CreateTodo.jsx
  • Showtodolist.jsx
  • UpdateTodo.jsx

После добавления этих файлов структура папок будет выглядеть примерно так

.
├── node_modules
├── public
├── src
│   ├── components
│   │   ├── createTodo.jsx
│   │   ├── showTodoList.jsx
│   │   └── updateTodo.jsx
│   ├── App.js
│   ├── App.scss
│   ├── App.test.js
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock

я. Прочитайте все тодо

.
├── node_modules
├── public
├── src
│   ├── components
│   │   ├── createTodo.jsx
│   │   ├── showTodoList.jsx <-- we are here
│   │   └── updateTodo.jsx
│   ├── App.js
│   ├── App.scss
│   ├── App.test.js
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock

Во -первых, мы создадим Showtodolist Компонент, чтобы прочитать все документы, которые мы создали в предыдущей части при тестировании бэкэнд.

  • Импорт USESTATE и Использоватьэффект крючки от реагировать
  • Импорт Axios от Аксиос

В Showtodolist Функциональный компонент будет иметь состояние сделать , мы возьмем документы из базы данных и сохраним их в штате Тодо Анкет

Мы будем использовать Axios отправить Получить Запросите на бэкэнд, чтобы получить документ. При получении данных мы будем хранить данные в Тодо используя SettoDo и зарегистрировать данные. Если мы получим ошибку, мы тоже это зарегистрируем.

Мы сделаем запрос получить из Использоватьэффект Хук, так как мы хотим, чтобы данные загружались, когда страница загружается.

Мы будем использовать Todocard компонент для отображения содержимого Тодо Анкет Мы будем использовать карта итерация над Тодо и передать содержимое Todocard который будет отображать содержимое каждого документа TODO.

Содержимое Showtodolist.jsx Файл должен выглядеть примерно так

Мы будем импортировать Showtodolist компонент в App.js файл

Содержимое App.js Файл должен выглядеть примерно так

Теперь начните сервер что мы встроили в часть 1

npm run dev

Теперь начните Клиент боковое применение

npm start

Open http://localhost: 3000 в вашем браузере И он должен отображать все документы TODO, которые были извлечены из базы данных.

II Создать новый тодо

.
├── node_modules
├── public
├── src
│   ├── components
│   │   ├── createTodo.jsx <-- we are here
│   │   ├── showTodoList.jsx
│   │   └── updateTodo.jsx
│   ├── App.js
│   ├── App.scss
│   ├── App.test.js
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock

Чтобы создать новый документ, мы отправим Пост Запрос на наш сервер Используя Axios.

  • Импорт USESTATE Крюк реагировать
  • Импорт Ссылка от Реактивная маршрута-дома
  • Определите функцию Handlechange это получит входные данные
  • Определите функцию Handlesubmit это отправит Пост запрос на сервер
  • Объявить данные используя USESTATE крючок со следующим JSON
{
  "title": "",
  "description": ""
}

В Handlechange Метод мы обновим данные Когда вход изменяется. Мы позвоним setData () и объявить функцию стрелки внутри, которая скопирует содержимое предыдущих данных, если они существуют. В этом e.target.name будет название элемента ввода, который будет иметь либо Название или Описание Анкет

В Handlesubmit метод

  • Позвоните e.preventdefault () Чтобы предотвратить перезагрузку страницы при нажатии кнопки «Отправить».
  • Отправить Пост Запрос на сервер с помощью данных. Если данные были успешно отправлены на сервер, сбросьте состояние данные

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

iii. Обновить app.js

.
├── node_modules
├── public
├── src
│   ├── components
│   │   ├── createTodo.jsx
│   │   ├── showTodoList.jsx
│   │   └── updateTodo.jsx
│   ├── App.js <-------------- we are here
│   ├── App.scss
│   ├── App.test.js
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock

Прежде чем мы сможем использовать CreateToDo Компонент нам нужно обновить App.js файл.

  • Импорт Browserrouter и Маршрут от Реактивная маршрута-дома
  • Импорт CreateToDo компонент из Компоненты/CreateTodo
  • Создать Маршрут Для домашней страницы / и пройти Showtodolist составная часть
  • Создать Маршрут Для создания нового Todo /create-todo
  • Оберните Маршрут S внутри Browserrouter

После внесения изменений App.js Файл должен выглядеть примерно так

Поскольку мы не добавили кнопку, чтобы перейти к http://localhost: 3000/create-todo Вы можете ввести это в своем браузере, чтобы проверить CreateToDo составная часть.

iv Добавление ссылки для перемещения в/create-todo на showtodolist.jsx

.
├── node_modules
├── public
├── src
│   ├── components
│   │   ├── createTodo.jsx
│   │   ├── showTodoList.jsx <-- we are here
│   │   └── updateTodo.jsx
│   ├── App.js
│   ├── App.scss
│   ├── App.test.js
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock
  • Импорт Ссылка от Реактивная маршрута-дома
  • Обернуть кнопка Внутри Ссылка ярлык

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

v. Создание компонента UpdateTodo для отправки запроса на обновление

.
├── node_modules
├── public
├── src
│   ├── components
│   │   ├── createTodo.jsx
│   │   ├── showTodoList.jsx
│   │   └── updateTodo.jsx <-- we are here
│   ├── App.js
│   ├── App.scss
│   ├── App.test.js
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock
  • Импорт USESTATE от реагировать
  • Импорт Axios от Аксиос

UpdateTodo Компонент будет иметь 3 реквизита

  • _i d
  • Handleclose
  • обработано

UpdateTodo.jsx Файл может выглядеть примерно так.

VI Добавление метода для удаления TODO

.
├── node_modules
├── public
├── src
│   ├── components
│   │   ├── createTodo.jsx
│   │   ├── showTodoList.jsx <-- we are here
│   │   └── updateTodo.jsx
│   ├── App.js
│   ├── App.scss
│   ├── App.test.js
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock

Мы сделаем следующие изменения в Showtodolist.jsx

  • Определите функцию HARDLEDELETE это отправит Удалить запрос на сервер. Эта функция понадобится _ id документа, чтобы удалить документ из базы данных. Это также обновит массив Тодо с отфильтрованным массивом.
  • Пройти HARDLEDELETE Метод как опора к Todocard
  • Обновление Todocard компонент, чтобы иметь параметр обработка
  • Добавить Onclick Событие для кнопки Удалить и пройти HARDLEDELETE метод

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

VII. Добавление компонента UpdateTodo в showtodolist.jsx

.
├── node_modules
├── public
├── src
│   ├── components
│   │   ├── createTodo.jsx
│   │   ├── showTodoList.jsx
│   │   └── updateTodo.jsx <-- we are here
│   ├── App.js
│   ├── App.scss
│   ├── App.test.js
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock

Нам нужно добавить следующие изменения в Showtodolist.jsx

  • Импорт UpdateTodo компонент из UpdateTodo.jsx
  • Объявить Open используя USESTATE Крюк со значением по умолчанию ложный Анкет Значение Open будет либо Верно или ЛОЖЬ . Мы условно проведем UpdateTodo составная часть. Если Редактировать Кнопка нажимается на любой из Todo, затем мы установим Open к Верно Когда UpdateTodo компонент будет отображаться.
  • Объявить id используя USESTATE крюк. _id документа TODO, который будет обновлен, будет сохранен. Это будет передано как опора для UpdateTodo составная часть.
  • Объявить Обновление используя USESTATE крюк. Это будет использоваться для извлечения всех документов TODO из базы данных. Каждый раз, когда документ Todo был обновлен, тогда Обновление изменится между истинный и ЛОЖЬ
  • Определите функцию HANDEDIT Анкет Он обновит состояние id с _id документа и обновите состояние Open к Верно Анкет UpdateTodo компонент будет отображаться.
  • Определите функцию HandleUpdate . Это будет инвертировать состояние Обновление Если TODO был обновлен пользователем. Инвертирование состояния вызовет Использоватьэффект Крюк, чтобы обновить Тодо множество.
  • Определите функцию Handleclose . Нам нужно это, чтобы закрыть UpdateTodo составная часть. Это установит id к пустой строке и установить Open к ложный Анкет

Обновите Todocard составная часть

  • Пройти HANDEDIT функционировать на Todocard составная часть.
  • Пройти HANDEDIT Опора в Редактировать кнопка.

После внесения вышеупомянутых изменений код будет выглядеть примерно так

Вы можете увидеть весь код для Часть 2 в GitHub

Оригинал: “https://dev.to/mritunjaysaha/mern-stack-todo-application-frontend-j7b”

Читайте ещё по теме: