Создание Интернет-магазина на React.js + Redux + Деплой c API с нуля
React.js и Redux – это мощные инструменты для создания динамических веб-приложений. В этой статье мы рассмотрим, как создать интернет-магазин с использованием React.js и Redux, а также как выполнить деплой с API с нуля.
Шаг 1: Установка необходимых инструментов
Для начала работы нам понадобится установить Node.js, npm и создать новый проект с помощью Create React App. Для этого выполните следующие команды:
$ npm install -g create-react-app
$ npx create-react-app my-store
$ cd my-store
$ npm install redux react-redux
Шаг 2: Создание компонентов интернет-магазина
Теперь мы можем создать различные компоненты для нашего интернет-магазина, такие как меню, каталог товаров, корзина покупок и т.д. Мы также можем использовать Redux для управления состоянием приложения.
Шаг 3: Настройка взаимодействия с API
Для того чтобы получать данные о товарах, ценах и другой информации, нам необходимо настроить взаимодействие с API. Мы можем использовать библиотеку axios для выполнения HTTP-запросов и получения данных с сервера.
Шаг 4: Деплой приложения с API на сервер
Последний шаг – это развертывание нашего приложения на сервере вместе с API. Мы можем использовать различные платформы, такие как Heroku или AWS, для размещения нашего интернет-магазина и его API.
Заключение
С использованием React.js и Redux мы создали динамический интернет-магазин, а затем успешно развернули его на сервере с API. Теперь наш магазин готов к использованию и привлечению клиентов.
Готовый код – https://github.com/tamkovich-yana/stuff
Макет – https://www.figma.com/file/7itpNsHVP5LPUpK4ENDYkv/Shop?node-id=0%3A1&t=i8nKSaWzeNTqTOnX-0
Документация API – https://fakeapi.platzi.com/en/rest/introduction
29:37 Help meeee – мать успокойся хахахахаха😂😂😂😂
Я сделал это! Спасибо за практику!
"Урок не про стили"
Верстка это стили! Надо писать код вместе со стилями
спасибо, буду ждать версию с Typescript-ом
SUPER👏
nice bro
не показывает че-то сприте свгшки
<use xlinkHref={`${process.env.PUBLIC_URL}/sprite.svg#search`} />
в публик паке нехватал path to sprite.svg. решил спсибо ласкаА
Было здорово, чтобы я нифига не учил, а вы на работу вместо меня ходили.
Навеяло комментами😅
У меня почемуто через этот FAKE API уже другие данные идут, можно как-то исправить?
холосо)))
Дорогая Яна, если что-то не импортируется, поставьте курсор в конце слова и нажмите на ctrl и пробел.
bim bim bum bum 😀 easy
Огромное спасибо за урок! А что касается SEO оптимизации.. Будет ли такой сайт виден для поисковых систем?
SHELKUNCHIK
2:27:33
Люблю умных людей. Спасибо за видео 🥰.Хочу так же быстро писать коды🙄…❤
Привет, крутой контент пилишь! Подскажи пожалуйста по возможности почему приходит products товары без картинок и в Categories пустой контейнер ?
Выводит Предупреждение: Каждый ребенок в списке должен иметь уникальный "ключевой" реквизит.
и Проверьте метод рендеринга Sidebar
Сравнивал с твоими исходниками, все тоже)
44:23 неверно
Видос о том как девушка записывает на видео проект, сделанный собой раннее, только на видео практически без объяснений. Потому что ей солнышко посветило и она решила побыстрее записать видос и свалить.
вот что я скажу… на первый срок прежде чем смотреть поставлю сразу лайк) когда будет время смотрю ролик сначала и + коммент