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

В первой части этого видео мы шаг за шагом создадим новый проект на React.. Вы узнаете, как создать проект, настроить структуру файлов и папок, скопировать необходимые компоненты и стили из предыдущего проекта, а также настроить базовые компоненты.
Основные темы, рассмотренные в первой части видео:
1.Создание нового проекта на React:
- Создание новой папки для проекта и инициализация проекта с помощью команды `npx Create-React-App ...`.
- Удаление ненужных файлов, созданных по умолчанию, и настройка структуры проекта.
2. Копирование файлов из предыдущего проекта:
- Копирование файлов `Header.jsx` и `Index.js` из предыдущего проекта.
- Копирование файла `index.html` из папки `public` и настройка доступа к библиотеке Bootstrap для стилизации.
3. Настройка компонентов и файлов:
- Удаление лишних файлов и компонентов.
- Настройка файла `Index.js` для подключения компонента Header.
- Изменение заголовка для нового проекта.
4. Запуск проекта:
- Изменение текущей директории на новую папку проекта и запуск проекта с помощью команды `npm start`.
- Обновление заголовка страницы и проверка работы проекта.
5. Подготовка к дальнейшему развитию проекта:
- Введение в дальнейшие планы по развитию проекта и изучение новых методов и подходов в разработке приложений на React.
Во второй части видео, мы подробно разберем структуру проекта, организацию папок и файлов, а также продемонстрируем, как можно оптимизировать их расположение.
Ключевые моменты второй часит видео:
Введение в проект: Как будет выглядеть приложение после завершения.
Создание компонентов: Разделение приложения на компоненты, такие как AddContact, RemoveAllContact, и другие.
Организация файлов и папок: Оптимизация структуры проекта, создание папок Layout и Components.
Перенос файлов: Корректный перенос файлов и настройка импортов.
Создание корневого компонента: Создание и настройка корневого компонента ContactIndex.Jsx.
Работа с дочерними компонентами: Добавление и использование дочерних компонентов для создания списков контактов.
Решение проблем: Исправление ошибок с импортом и настройка путей к ресурсам.
Почему это важно:
Первая часть видео поможет вам понять основные шаги при создании нового проекта на React, а также покажет, как использовать предыдущие наработки для ускорения процесса разработки. Вы научитесь правильно настраивать структуру проекта и подготавливать его к дальнейшему развитию.
Вторая часть видео, идеально подходит для тех, кто хочет научиться создавать и структурировать приложения на React, а также для тех, кто ищет практическое руководство по созданию приложения по управлению контактами на React.

Скидка по ссылке к первой части курса React + Redux https://www.udemy.com/course/reactjs-...

Скидка по ссылке ко второй части курса React + Redux https://www.udemy.com/course/redux-re...

Ранний доступ к первой части продвинутого курса по React, Redux, TypeScript и API на ASP.NET по ссылкеhttps://www.udemy.com/course/api-aspn... с паролем "REST_API"

Ранний доступ ко второй части продвинутого курса по React, Redux, TypeScript и API на ASP.NET по ссылке https://www.udemy.com/course/react-re... С паролем FrontEnd1

Расширенная поддержка по закрытой подписке https://www.udemy.com/course/reactjs-...