Полный CRUD на React с ASP.NET Core Web API | Full Stack туториал
CodAffection
0:00 / 0:00
Полный CRUD на React с ASP.NET Core Web API | Full Stack туториал
608 641 просмотр · 6 лет назад
CodAffection
149 тыс. подписчиков
608 641 просмотр · 6 лет назад
🍒 Похожие видео
Создание CRUD-операций с использованием React и Asp.Net Core API: • Asp.Net Core Web API Master Detail CRUD
Приложение-викторина на React с Web API: • Build a React.js Quiz App with Asp.Net Cor...
Любимый всеми способ создания форм React: • React Hook Form - 1. Introduction
Загрузка изображений с помощью React и Web API: • Image Upload in React with Asp.Net Core We...
Аутентификация и авторизация в .Net Core Web API: • User Registration in Asp.Net Core Identity
Angular и .Net Core Web API CRUD: • Asp.Net Core Web API CRUD with Angular
🎉 Рекомендуемые курсы
➤ React и .NET Core API: https://bit.ly/35v8rez
➤ React: https://bit.ly/35pLyZP
➤ React Hook Form: https://bit.ly/3R3vhC2
➤ C#: https://bit.ly/4gc1nWv
📂 Репозиторий GitHub
► http://bit.ly/2TXlO2Y
💌 По вопросам сотрудничества
➤ codaffection@gmail.com
🚶♂️ Подписывайтесь на нас
Facebook: / codaffection
Discord: / discord
Twitter: / codaffection
---
Операции CRUD в React js: вставка, обновление, удаление и извлечение данных реализованы с помощью веб-API Asp.Net Core с нуля.
Прежде всего, мы создали веб-API на Asp.Net Core с использованием SQL Server и Entity Framework. Определили модель базы данных с помощью подхода EF Code First, затем создали контроллер Asp.Net с веб-методами для операций CRUD.
Создали приложение React с помощью пакета create-react-app. Форма разработана с использованием Material-UI.
Реализовали валидацию для каждого элемента управления, а также для всей формы. Веб-API используется во время отправки формы и извлекает
существующие записи после рендеринга приложения. Для управления состоянием мы использовали Redux. В отличие от предыдущих уроков по React, здесь мы создали компонент React с использованием React Hooks.
Обсуждаемые темы:
Создание веб-API в Asp.Net Core с использованием веб-методов CRUD
Разработка форм React с Material UI
Реализация CRUD с помощью Redux
Включение CORS в веб-API
Использование веб-методов API из React
Валидация форм в реальном времени
и т.д.
Используемые инструменты: VS Code, Visual Studio, SSMS, Postman
Обсуждение по времени
___________________
0:02:10 - Определение модели базы данных Asp.Net Core
0:11:12 - Контроллер для CRUD
0:14:56 - Тестирование веб-API с помощью Postman
0:17:47 - Создание приложения React js
0:20:42 - Введение в Redux
0:27:57 - Реализация хранилища, действий и редукторов Redux
0:35:14 - Использование веб-API .Net Core
0:43:05 - Сопоставление данных и действий Redux с компоненты
0:49:07 - Включение CORS в Asp.Net Core
0:53:53 - Интеграция Material UI в приложение React
1:04:48 - Разработка формы с использованием Material UI
1:10:19 - Компонент React Hook с многократно используемым кодом для формы
1:21:12 - Валидация формы
1:32:19 - Действия Redux и редуктор для вставки, обновления и удаления
1:38:07 - Вставка новой записи в БД
1:40:35 - Редактирование записи
1:50:35 - Отображение всплывающего сообщения (Toast)
1:53:32 - Операция удаления
#Reactjs #AspNetCore #CodAffection