Перейти к содержимому

Полный 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