#1: React Sneakers - создаем простой интернет-магазин (junior)

Проверка качества звука без поп-фильтра, тестирование звука от 1 до 3 раз. Теперь нет компьютера, и теперь с поп-фильтром.

Разработка интернет-магазина на базе React Сегодня мы разработаем интернет-магазин с использованием React с минимальным количеством внешних библиотек. Мы провели опрос, и большинство людей проголосовали за то, чтобы я сделал верстку, так что именно на этом мы сегодня сосредоточимся. Кроме того, мы обсудим хранение продуктов отдельно от основного сервера с использованием бесплатного сервиса под названием Mog API.

Упрощенный подход к обучению для начинающих Этот курс разработан специально для начинающих, которые хотят узнать о React без предварительного опыта. Он охватывает базовые задачи, такие как создание простых приложений, таких как react pizza или twitter clone, и направлен на то, чтобы объяснить все простыми словами, не углубляясь в сложную терминологию или технологии.

Разработка проекта Проект начинался с простой дизайнерской идеи, но затем развился в создание более упрощенной версии интернет-магазина специально для начинающих. Выбор в пользу React Pizza был сделан для того, чтобы угодить тем, кто новичок в React и хочет более легкого процесса обучения.

Функциональность веб-сайта Веб-сайт будет включать такие функции, как добавление товаров в корзину, просмотр приобретенных товаров и внедрение слайдера в эстетических целях. Кроме того, в этом курсе не будет группировки при добавлении продуктов с помощью React Pizza.

Обработка заказов и хранение данных После нажатия кнопки "Оформить заказ" данные будут отправлены на сервер, где они хранятся в базе данных. Это позволяет пользователям без авторизации просматривать историю своих покупок в любое время, извлекая данные с сервера.

Дизайн проекта и ресурсы будут легко доступны через Telegram-канал. Материалы курса не будут загружены в Patreon, но они будут доступны в Telegram-канале после окончания курса. Планируется увеличить активность в Telegram.

Создание контента и структура курса В видео обсуждается процесс создания контента для курса, включая проведение опросов и планирование структуры. В нем также упоминаются предстоящие курсы, специально разработанные для начинающих.

Концепции дизайна и курсы повышения квалификации В этой главе рассматриваются такие концепции дизайна, как дизайн пользовательского интерфейса, разработка интерфейсов, разработка серверной части и многое другое. В ней подчеркивается намерение создавать контент, подходящий для разработчиков всех уровней.

Объявление о проекте наставничества В заключительной главе объявляется о проекте наставничества, включающем в себя несколько проектов, разрабатываемых под руководством наставника. Спикер выражает благодарность зрителям, обсуждая личный опыт на собеседованиях при приеме на работу.

Переговоры с серпантином Обсуждаем дегустацию вин и даем советы, соглашаясь максимум на 4 урока после перерыва на воду. Монитор будет размером 35 дюймов для офисного использования.

Взаимодействие со зрителями Признавая ожидания зрителей в отношении контента, отвечая на вопросы о вкусах и личных запросах, выражая при этом трудности с поддержанием разговоров в чате.

Сосредоточение внимания на завершении проекта Обязуясь сконцентрироваться на проекте, ни на что не отвлекаясь, до конца трансляции, обещая в это время ответить на вопросы аудитории.

В конце эфира поблагодарила всех за поддержку и содействие.

Мы начинаем новый проект в качестве младших разработчиков. Мы начнем с работы над дизайном, а затем перейдем к кодированию. Я сосредоточусь на быстром решении части кодирования, не объясняя ее подробно.

Создаем проект React для обучающих программ YouTube. Упорядочиваем файлы и папки, чтобы начать создание проекта.

Чтобы запустить проект React, перейдите на официальный веб-сайт React. Выберите русский язык и получите доступ к документации на русском языке для получения подробной информации о том, как работает React.

Чтобы создать проект React, на вашем компьютере должен быть установлен Node.js. JavaScript необходим компьютеру для понимания и работы с любым проектом React или JavaScript. Это все равно, что нуждаться в переводчике для понимания таких языков, как итальянский, французский или немецкий.

Для установки Node.js вы можете перейти на официальный сайт и загрузить рекомендуемую версию. После загрузки запустите программу установки и следуйте инструкциям, не нажимая никаких дополнительных кнопок.

Запуск терминала в Windows для работы над проектом - это простой процесс установки. После установки вы можете получить доступ к консоли и использовать ее как инструмент для выполнения команд и проверки установленных версий.

Использование терминала Windows для работы над проектом. Для удобства перейдите в папку, где хранятся проекты React, и создайте новый проект React.

Создание проекта React с помощью NPX В терминале Windows мы используем 'npx' для создания проекта React. Важно находиться в нужном каталоге перед запуском команды. 'NPX' похож на 'NPM', но он временно устанавливает программы или библиотеки и используется для создания проектов React.

Установка зависимостей и запуск проекта "NPX" загружает временные инструменты, необходимые для создания нового проекта React. После загрузки он устанавливает дополнительные зависимости, необходимые для тестирования проекта. Как только все будет установлено, вы можете начать писать код во вновь созданной папке приложения React.

Для написания проектов React рекомендуется использовать Visual Studio Code. После его установки вы можете открыть проект в VS Code и начать писать код, используя встроенный в него терминал. Это позволяет удобно работать с проектами React.

Настройка проекта После установки проекта команды будут работать нормально. Проект включает в себя исправление Джейсона и некоторые другие настройки для библиотек и версий этих библиотек. Важно знать, что он просто настраивает ваш проект с помощью установок библиотек, скриптов, командных строк программ, дополнительных настроек для других программ.

Использование Gid Ignore Gid ignore позволяет исключить ненужные папки при отправке файлов в GitLab. Это помогает эффективно управлять загрузкой файлов без отправки нежелательных файлов или папок.

Внутри проекта "Reactor Ski" - это обычный CSS-стиль с некоторым количеством JavaScript и HTML-кода, а также тестов. Эти стили создаются в этой папке вместе с JavaScript и HTML-кодом.

Запуск проекта React предполагает открытие консоли, использование сочетаний клавиш для отображения терминала и ввод команд для запуска проекта. Использование "npm" вместо "npx" объясняется тем, что оно временно устанавливает дополнительные программы для загрузки и запуска.

Видео знакомит с проектом React и побуждает зрителей свободно изучать его. В нем подчеркивается важность понимания JavaScript, особенно функций ES6, таких как инструкции импорта/экспорта и функции стрелок.

Понимание импорта в JavaScript Импорт в JavaScript - это процесс получения чего-либо и использования этого в файле, например, импорт компонентов React. Это не просто волшебная вещь; нам нужно понять, что означает "импорт", прежде чем использовать его.

Импорт компонентов React При импорте React мы берем его из определенной папки и сохраняем его код в переменной. Это позволяет нам использовать импортированный код без необходимости каждый раз вручную копировать и вставлять большие фрагменты кода.

Понимание JSX и рендеринга JSX - это синтаксическое расширение для JavaScript, которое выглядит как HTML, но преобразуется в обычный JavaScript. В React вы можете написать код, используя JSX, для создания компонентов, которые затем отображаются как HTML-элементы на странице.

Магия импорта логотипа SVG в JS Импорт файла логотипа SVG в React позволяет использовать его в качестве переменной и размещать там, где это необходимо, без указания прямой ссылки. Это упрощает процесс включения изображений в современные фреймворки, такие как React.

Реагируйте на экспорт и импорт В React процесс экспорта-импорта позволяет обмениваться кодом между файлами. Используя "экспорт" в файле, код становится доступным для импорта в другие файлы. Это позволяет повторно использовать функции и переменные в разных частях проекта.

Визуальный рендеринг с помощью React С помощью React изменения, внесенные в код, мгновенно отражаются на веб-странице без необходимости обновлять ее вручную. Эта функция рендеринга в реальном времени позволяет легко увидеть немедленные результаты при написании или модификации кода.

Удаление ненужных файлов и сосредоточение внимания на важных, таких как index.js, App.js и styles.css. Код JavaScript в проекте React работает иначе, чем обычный JavaScript.

Установка препроцессора Sass Sass - важный препроцессор, который делает написание CSS-кода намного более удобным и масштабируемым. Чтобы установить его, используйте команду "npm install", чтобы добавить специальную библиотеку для использования Sass в вашем проекте React.

Устранение неполадок при установке В процессе установки могут возникнуть задержки или ошибки из-за проблем с подключением к Интернету или проблем с провайдером. Важно обеспечить стабильное подключение к Интернету и устранить любые потенциальные проблемы с сетью в процессе установки.

Установка Sass и React При установке Sass важно указать версию, используя "npm install sass@1.4.0". После установки проверьте, работает ли проект, перезагрузив его с новой библиотекой.

Использование SCSS в проекте После успешной установки SASS вы сможете использовать его функции, такие как вложение элементов и применение стилей к определенным компонентам в вашей HTML-структуре.

Понимание основ интерфейсной разработки Начиная с основ интерфейсной разработки, мы фокусируемся на добавлении логики в наш макет. Объясняем, что важно понимать дизайн, прежде чем внедрять код.

Анализ элементов и компонентов дизайна Изучение элементов дизайна, таких как заголовки, ползунки, кнопки и повторяющиеся карточки. Подчеркивание важности повторного использования компонентов для повышения эффективности кодирования.

Реализация HTML-структуры и CSS-классов Демонстрация того, как реализовать структуру HTML с использованием divs и spans при создании классов для стилизации. Обсуждение стратегий эффективной организации классов CSS.

Важность использования осмысленных имен классов в React во избежание путаницы и конфликтов с зарезервированными ключевыми словами. Подчеркивает важность четких соглашений об именовании для лучшей читаемости и понимания кода.

Создание контура логотипа Чтобы создать путь к логотипу, я импортирую изображение логотипа в свой проект и сохраню его в папке "public". Затем я укажу путь для доступа к логотипу без использования "public". Это гарантирует, что React сможет правильно найти и отобразить изображение.

Добавление значков После создания пути к логотипу я добавлю значки, импортировав их в свой проект. Эти значки будут сохранены в формате SVG и названы соответствующим образом для удобства использования в моем приложении.

Работа с SVG В этой главе мы узнаем, как использовать значки в Endji. Есть два способа использовать значки: во-первых, проверяя их размер и цвет; во-вторых, используя код из эскиза и применяя его напрямую.

Оптимизация классов CSS Эта глава посвящена оптимизации классов CSS для лучшего повторного использования. Создавая вспомогательные классы с определенными стилями, разработчики могут повторно использовать их в разных элементах, не повторяя каждый раз одни и те же стили.

Введение в макрос-CSS Спикер представляет пакет npm "macro-css" и объясняет процесс его установки. Он упоминает, что ему пришлось написать специальный код для повседневных повторяющихся стилей, что привело его к созданию пакета npm для этого.

Преимущества использования макросов-CSS Спикер обсуждает преимущества использования macro-css, такие как сокращение повторений при написании похожих классов и повышение удобства стилизации. Он подчеркивает, что это не предназначено для рекламы, а скорее направлено на упрощение разработки CSS.

Применение макросов-CSS в проектах Спикер демонстрирует, как он интегрирует macro-css в свой проект, очищая избыточный код и применяя предопределенные классы из библиотеки. Он показывает примеры эффективного использования этих предопределенных классов в HTML-элементах.

Стиль "Макро-изирования" с помощью Macro-CSS В этой главе докладчик демонстрирует, как он упрощает задачи стилизации с помощью macro-css, удаляя ненужные определения классов из отдельных компонентов и централизуя их с помощью предопределенных макросов, таких как "очистить". Кроме того, он настраивает значения отступов непосредственно в HTML-тегах вместо того, чтобы определять их отдельно в CSS-файлах.

Установка шрифтов Теперь мы можем установить русские шрифты, используя код шрифта. Давайте посмотрим, какой шрифт здесь используется, а затем используем его в нашем дизайне. У нас есть два варианта подключения стилей напрямую или по ссылке.

Способы подключения шрифта Существует два способа подключения шрифтов: один - путем импорта их непосредственно в файл, а другой предпочтительнее по ссылке из внешних источников, таких как Google Fonts. Второй способ обеспечивает лучшую производительность и кэширование ресурсов.

Экспорт изображений и настройка размеров Процесс экспорта четких изображений с помощью кнопок без установки определенных размеров. Размер установлен равным 133x112 пикселей для согласованности.

Оформление текста и кнопок Настройка стиля текста путем преобразования его в верхний регистр, изменения размера шрифта и выравнивания кнопки по центру.

Создание компонентов карты Разработка компонентов карточки с использованием простых методов, таких как теги div, с заданными стилями, такими как цвет фона и радиус границы.

Общий доступ к проекту на GitHub Поделитесь проектом со всеми дизайнерами, чтобы расширить их рынок сбыта. Установите Git и напишите команды для клонирования или загрузки репозитория. Внес изменения в репозиторий и поделился ссылкой в чате.

Предстоящий пост о дизайне Готовлюсь к публикации бесплатного материала, доступного без подписки, в том числе для начинающих. Будет доступен за пределами Patreon.

Проблемы кастомизации Настройка макета требует времени и усилий, но визуально это непривлекательно. Несмотря на то, что я хотел сделать макет сам, мне пришлось выбрать готовый из-за большого спроса.

Создание контента и рекомендации по курсу Создание контента для разных аудиторий, таких как John, Senora, Celeron, включает в себя сложные темы. Лучшие курсы - на React и Twitter, потому что они хорошо ориентированы на местных разработчиков.