React.JS + Google Firebase!
В рамках курса по изучению библиотеки React JS, мы создадим приложение для заказа бургеров в сети ресторанов Hot Burgers! С помощью приложения можно будет в реальном времени управлять стоимостью и ассортиментом меню.
Приложение будет включать компоненты меню, форму заказа и панель администратора. Наши данные будут храниться в базе данных Google Firebase и обновляться в режиме реального времени!
Система авторизации позволит регулировать доступ к системе управления меню.
Чему вы научитесь?
Для кого этот курс?
- Создавать приложение на React.JS с нуля
- Cоздавать компоненты React, используя JSX синтаксис
- Использовать модули Javascript
- Использовать новые фичи Javascript ES6 при написании кода
- Создавать и управлять сосотоянием компонентов
- Передавать данные между компонентами
- Использовать объект LocalStorage в браузерах
- Создавать маршрутизацию с помощью React Router 4
- Обрабатывать данные из форм
- Использовать хук useState
- Использовать возможности базы данных Google Firebase
- Создавать систему авторизации
- Развертывать приложение на хостинге (Netlify и Now)
- и другие...
Основные темы курса:
- Этот курс подойдет всем, у кого есть начальные знания Javascript и кто хочет их улучшить
- Начинающие разработчики, которые хотят перейти от верстки к написанию фронтенда
- Разработчики, которые привыкли использовать jQuery и хотят начать использовать нативный Javascript
- Wordpress разработчики, которым интересно начать использовать React
Содержание:
- Компоненты. Говоря о React, нельзя избежать обсуждения концепции компонентов. Компоненты в React — это основной строительный блок для создания фрагментов HTML-кода, подходящих для повторного использования.
- JSX. Это — синтаксическое расширение JavaScript, которое позволяет создавать компоненты, используя возможности HTML и JavaScript.
- Стилизация компонентов. Стилизация позволяет придать компонентам привлекательный внешний вид (используем препроцессор Stylus).
- Свойства и обмен данными в приложении. Свойства используются для передачи данных между компонентами.
- Состояние. Механизмы состояния компонентов используются для хранения данных в приложении и для управления ими.
- Обработка событий. События позволяют наладить интерактивные взаимоотношения с пользователями приложений.
- Методы жизненного цикла компонентов. Эти методы позволяют разработчику влиять на различные события, происходящие с компонентами.
- Взаимодействие с внешними API. Будем загружать данные из внешних API с использованием протокола HTTP.
- Использование форм в React. Создадим несколько форм для добавления и редактирования бургеров в меню.
- React Хуки (hooks). Данное нововведение появилось в React версии 16.8. Хуки позволяют использовать состояние и другие возможности React JS без написания классов. В данном курсе мы мы изучим, как работает хук useState.
- 27 Видео с пошаговыми инструкциями в HD качестве
- + 2 Бонусных видео по размещению готового проекта на популярных хостингах React приложений: Netlify и Vercel.
- Весь исходный код для нового и готового приложения (файлы и скрипты)
- Доступ в закрытый Telegram канал, где можно задать вопрос и обсудить решения
Василий Муравьев
Работаю frontend разработчиком в курпнейшем ритейлере России X5 Retail Group. В свободное время участвую в сторонних проектах в качестве full stack разработчика, где использую React, Node.js + Express и MongoDB.
Занимаюсь созданием курсов в рамках моей платформы stackdev.ru, где стараюсь сфокусироваться на практике и решении самых актуальных задач. Стремлюсь передать накопленный опыт и показать, что начать путь разработчика никогда не поздно!
Скрытый текст. Доступен только зарегистрированным пользователям.Нажмите, чтобы раскрыть...
Новые складчины | страница 18
Категории
Страница 18 из 34

![[IMG]](proxy14p.php?image=https%3A%2F%2Fi122.fastpic.org%2Fbig%2F2023%2F1227%2F9a%2F5f26e78338c3694dba5c5920d84b399a.jpg&hash=780ff137220df94b1cc3dc100e13d1d1&v=4)
![[IMG]](proxy14p.php?image=https%3A%2F%2Fi.postimg.cc%2Fvmp3gy6c%2FStepik-Jetpack-Compose.png&hash=4ef5f6c672a6427f445e78c4ea433cee&v=4)
![[IMG]](proxy14p.php?image=https%3A%2F%2Fi.postimg.cc%2FKzVKZT6y%2FAhillary-How-to-Code-Web3-Python.png&hash=51a13f15b7f84e9f103e48b7ab02c980&v=4)
![[IMG]](proxy14p.php?image=https%3A%2F%2Fi.imgur.com%2Fz7mlBxH.png&hash=db5a62687084dedbab3d370a47d712f0&v=4)