В первой части видео мы продолжаем разработку приложения для управления контактами на React. В этом уроке мы создадим основы интерфейсов для всех добавленных ранее компонентов. Вы увидите, как мы создаем визуальные элементы и настраиваем базовую структуру нашего проекта. Мы добавим стилизованные кнопки, создадим компоненты для работы с контактами и организуем их в проекте. Это видео идеально подходит для начинающих разработчиков, которые хотят научиться создавать приложения на React и понимать, как структурировать проект.
Ключевые моменты видео:
1. Создание интерфейсов:
Начнем с добавления кнопок и базовых визуальных элементов в компоненты.
2. Работа с компонентами:
Добавим кнопки в компоненты RemoveAllContact и GeneralContact.
3. Копирование и настройка кода:
Скопируем готовый код в компоненты FavoriteContacts и AddRandomContact и настроим их.
4. Создание компонента Contact: Добавим базовый код и стилизацию.
5. Настройка компонента ContactIndex: Создадим классовый компонент, настроим управление состояниями и добавим стилизацию для адаптивной верстки.
6. Импорт компонентов: Настроим импорт компонентов и их вызов в коде.
7. Добавление компонентов на страницу: Добавим компоненты на страницу и настроим их визуальное отображение.
8. Просмотр результатов: Проверим, как отображается страница после всех изменений.
Во второй части видео, мы продолжаем работу над приложением ContactOPedia на React, сосредотачиваясь на создании формы для добавления новых контактов. Мы покажем, как настроить базовый интерфейс компонента AddContact с использованием элементов ввода и кнопок, стилизованных с помощью Bootstrap. Эта часть видео идеально подходит для тех, кто хочет узнать, как создавать и стилизовать формы в React.
Ключевые моменты второй части видео:
Настройка компонента AddContact: Начнем с создания формы для ввода информации о новых контактах.
Добавление полей ввода: Создадим поля ввода для имени, email и номера телефона с помощью JSX и стилизуем их с использованием классов Bootstrap.
Создание кнопки для добавления контакта: Добавим кнопку для подтверждения ввода данных и стилизуем её.
Базовая визуализация: Покажем, как отображается форма ввода на странице после добавления всех элементов.
Подготовка к управлению состояниями: Обсудим следующий шаг - добавление управления состояниями в React для сохранения списка контактов.
Скидка по ссылке к первой части курса React + Redux www.udemy.com/...
Скидка по ссылке ко второй части курса React + Redux www.udemy.com/...
Ранний доступ к первой части продвинутого курса по React, Redux, TypeScript и API на ASP.NET по ссылкеwww.udemy.com/... с паролем "REST_API"
Ранний доступ ко второй части продвинутого курса по React, Redux, TypeScript и API на ASP.NET по ссылке www.udemy.com/... С паролем FrontEnd1
Расширенная поддержка по закрытой подписке www.udemy.com/...
Ранний доступ к третьей части курса с API на ASP.NET www.udemy.com/... с паролем "REST_API"
Негізгі бет Пример создания структуры страницы и интерфейса компонента для ввода данных в React
Пікірлер: 1