Archakov Blog's video: 1: React Pizza - for junior

Начинаем долгожданный курс по React Pizza (интернет-магазин) уже сегодня, в 19:00 (МСК). ❤️ Поддержка: — Patreon: https://www.patreon.com/archakovblog — Донаты: https://www.donationalerts.com/r/archakov_blog После длительной паузы, решил, что пора уже выпускать новый контент. Попробуем реализовать интернет-магазин в реальном времени. Данный курс подойдёт для начинающих ReactJS-разработчиков (опыт от 2-ух месяцев). Я буду объяснять с нуля, как разработать полноценный фронтенд на ReactJS с подгрузкой данных от сервера и переходами по страницам. Буду объяснять подробно, чтобы понял даже человек с 47 хромосомами. 📝 Полный стек: - ReactJS - Redux (библиотека для хранения данных на клиентской части) - redux-thunk (доп. библиотека для Redux. Асинхроные действия). - React Router (библиотека для реализации переходов без перезагрузки страницы). - Axios (библиотека для отправки AJAX-запросов) - json-server (для хранения пицц на фейковом сервере) Ссылка на исходник: https://github.com/Archakov06/react-pizza Ссылка на вёрстку: https://github.com/Archakov06/react-pizza-html Ссылка на дизайн: https://www.figma.com/file/wWUnQwvRDWBfPx1v1pCAfO/React-Pizza 00:00 Самое начало 08:25 - Начало 09:37 - Описание курса 11:22 - Сценарий курса 13:41 - Разбор макета 18:53 - Live пример(https://dodopizza.ru/) 20:45 - Про опыт разработки с нуля 21:55 - Github репозиторий(https://github.com/Archakov06/react-pizza-html) 22:53 - Начало проекта 23:08 - Для чего нужен Node.js 24:42 - Для чего нужен Webpack 25:08 - Установка Node.js(https://nodejs.org/en/download/) 27:42 - Проверяем, что Node.js установлен(node -v) 28:41 - Git + GitBash(https://git-scm.com/downloads) 29:26 - Что такое npx 30:35 - Создание проекта через npx(npx create-react-app react-pizza) 31:30 - Почему без TypeScript'a 32:10 - Установка VSCode(https://code.visualstudio.com/) 32:55 - Разбор CRA проекта 37:25 - NPM vs Yarn(https://yarnpkg.com/getting-started/install) 54:00 - Чистим проект 55:50 - Что такое StrictMode в React 1:00:15 - Что такое JSX 1:02:45 - Как работает JSX 1:06:42 - Virtual DOM 1:07:33 - React Plain Objects(https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html) 1:09:21 - Преимущества Virtual DOM 1:15:49 - React-верстка 1:19:14 - Перенос верстки 1:22:45 - Prettier(https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) 1:28:47 - Добавляем SCSS(yarn add node-sass || npm install node-sass) 1:29:23 - Опционально: Достаем настройки CRA проекта(yarn eject || npm run eject)(ответ на вопрос про PostCSS в React'e) 🔗 Следите за обновлениями и информацией в: — Telegram-канале: https://t.me/archakov_im — VK: https://vk.com/archakov_im — Личном блоге: https://archakov.im — GitHub: https://github.com/Archakov06 — Моё резюме: https://career.habr.com/archakovim