Этот курс посвящен разработке интернет-магазина на основе библиотеки React JS. Магазин будет обладать всеми необходимыми функциями: отображением товаров, формированием корзины, редактированием и фильтрацией товаров и многим другим.
Введение в React JS
React — JavaScript-библиотека для управления содержимым веб-страниц, разработанная Facebook в 2013 году. Она является одной из самых популярных технологий для создания веб-приложений. React позволяет создавать гибкие, функциональные и удобные компоненты сайта. Компонентом может быть любая часть сайта: форма регистрации, блок с информацией, несколько input-полей и т.д. React обеспечивает быстрый и удобный формат взаимодействия с компонентами, обрабатывая действия пользователя на стороне клиента более структурировано, чем обычный JavaScript.
Необходимые знания
Для успешного освоения курса необходимы хорошие знания HTML и CSS. Также потребуются минимальные знания JavaScript: работа с массивами, циклами, условиями, функциями. Курс не рассчитан на абсолютных новичков в React; предполагается наличие минимального опыта работы с этой библиотекой. Рекомендуется базовый курс по React (ссылка доступна на сайте [а эти прагер точка ком](а эти прагер точка ком)).
Настройка среды разработки
Установим среду разработки и создадим шаблонный проект. В качестве редактора кода можно использовать любую удобную программу; в данном курсе используется Visual Studio Code.
Установка Node.js и npm
Необходимо установить Node.js с официального сайта. После установки вы получите доступ к пакетному менеджеру npm (и npx).
Создание и настройка проекта
- Откройте Visual Studio Code и терминал.
- Перейдите в нужную директорию (например, cd Downloads).
- Создайте проект командой npx create-react-app shop.
- Откройте папку shop в Visual Studio Code. Удалите ненужные файлы:
- Файлы, связанные с Git (если Git не используется).
- Файлы из папки public, кроме index.html.
- Лишний код из index.html, оставив основную HTML-структуру.
- В папке src: удалите все файлы, кроме App.js, index.js, и index.css.
- Удалите все стили из index.css.
- В App.js оставьте только <div>Your app</div>.
Запуск проекта
Выполните в терминале команду npm start. Запустится локальный сервер, и на странице localhost:3000 отобразится текст «shop».
В этом уроке мы подготовили среду разработки и создали пустой шаблон проекта. В следующих уроках начнём разработку интернет-магазина.