[Udemy] Проект React.js и Firebase — проект ReactJS 18, Firebase 9 (Саханд Гавидел)
НОВЫЙ проект React.js 18 и Firebase 9 .
Создайте клон Realtor (недвижимость), используя React js 18, Firebase 9, Tailwind CSS 3 и React router 6.
Лучший курс для изучения React.js, Firebase и Tailwind CSS для создания веб-сайта по недвижимости. В этом совершенно новом курсе вы узнаете, как создать клон риелтора, используя ReactJS версии 18, Firebase версии 9 и Tailwind CSS версии 3.
Добро пожаловать в проект, в котором вы создадите и развернете приложение-клон риелтора, используя новейшую версию React, Firebase и CSS Tailwind. Вы узнаете, как разработать профессиональный веб-сайт и развернуть его в Интернете, чтобы вы могли поделиться им со своими друзьями и потенциальными клиентами или добавить в свое портфолио. В этом совершенно новом проекте мы собираемся создать потрясающий новый раздел со списком, настраиваемые категории, адаптивный дизайн, карточки со списками, страницы аренды и продажи и, самое главное, страницы со списками, где вы можете увидеть карту и слайдер изображений. Клон Realtor — лучшее современное полнофункциональное приложение для недвижимости, которое вы можете найти на данный момент. Создав это единственное веб-приложение, вы получите знания, необходимые для создания любого веб-сайта, использующего операции CRUD, включая создание, чтение, обновлять и удалять в ответ, используя базу данных Firebase Firestore. Вы собираетесь учитьсяFirebase auth для полной аутентификации и узнайте, как зарегистрироваться или войти в систему пользователей, используя имя пользователя и пароль и Google oAuth. Кроме того, мы собираемся добавить функцию забытого пароля с помощью аутентификации Firebase, чтобы пользователи могли получать электронное письмо со ссылкой для смены пароля.
Вы сможете разработать этот веб-сайт, используя самые востребованные сегодня технологии, такие как react.js, Firebase, tailwind CSS и всего пару других зависимостей, таких как leaflet и swiper js. Мы собираемся добавить карту с помощью пакетов листовок и использовать API геолокации Google для преобразования адресов в значения широты и долготы. Мы собираемся узнать, как использовать последнюю версию Swiper.js, чтобы добавить потрясающий слайдер изображений. Вы узнаете, как использовать реакцию toastifyпакет для создания красивых и настраиваемых уведомлений. И, как и все современные веб-сайты, вы собираетесь создать красивый компонент счетчика и использовать его на всех страницах, требующих эффектов загрузки. Мы узнаем, как создать повторно используемый компонент, такой как карточка со списком, которую мы можем использовать в разных частях веб-сайта.
Посмотрев этот курс, вы создадите все с нуля. Мы начнем с простого, а затем перейдем к более сложным темам по мере создания этого приложения. вы узнаете, как реагировать на функциональные компоненты и их повторное использование, реагировать на структуру файлов и папок. Вы изучите важные события реагирования, такие как прослушиватели событий onChange и onSubmit. Мы собираемся научиться использовать хуки реакции useEffect и useState для управления состояниями и извлечения данных из базы данных Firestore. Кроме того, вы узнаете, как создавать маршруты, использовать хуки useParams и useNavigate с помощью реактивного маршрутизатора.последняя версия версии 6. Мы собираемся работать над созданием частных маршрутов и пользовательских перехватчиков для защиты важных страниц, таких как страница профиля пользователя. Вы достигнете мастерства, используя Tailwind CSS версии 3, и узнаете, как стилизовать проект с помощью Tailwind CSS, в том числе как добавлять пользовательские классы. И, наконец, мы собираемся развернуть веб-сайт в Vercel, чтобы иметь возможность поделиться им с другими или добавить в свое портфолио.
Вам может быть интересно, каковы предварительные условия для создания такого удивительного веб-сайта. Вам просто нужно немного знать HTML CSS и JavaScript, это было бы здорово.
Меня зовут Саханд, и у меня более 15 лет опыта программирования.
Я буду вашим инструктором и отвечу на любые ваши вопросы в разделе комментариев.
Чему вы научитесь:
- Создайте проект React js с нуля
- Используйте аутентификацию Firebase для полной аутентификации
- Используйте Firebase Firestore для хранения и извлечения данных
- Узнайте, как зарегистрироваться/включить пользователей, используя имя пользователя/пароль и Google oAuth, используя аутентификацию Firebase.
- Добавить функцию забытого пароля с помощью аутентификации Firebase
- Работайте с последними версиями, такими как React js 18, Firebase 9 и Tailwind CSS 3.
- Изучите операции CRUD, включая создание, чтение, обновление и удаление с помощью Firebase Firestore.
- Узнайте, как реагировать на маршрутизатор версии 6 (последняя версия), чтобы создавать маршруты, получать параметры и перенаправлять
- Узнайте, как создавать страницы и маршруты в проекте реагирования
- Узнайте, как использовать react toastify для создания приятных уведомлений
- Научитесь создавать приватный маршрут и настраиваемый хук для защиты страницы профиля пользователя.
- Узнайте, как создать красивый спиннер и загрузчик
- Изучите важные прослушиватели событий реагирования, такие как onChange и onSubmit.
- Создайте повторно используемый компонент, такой как карточки со списками
- Создайте слайдер изображений, используя последнюю версию Swiper js
- Добавьте карту на страницу с помощью листовок и реагируйте на пакеты листовок
- Узнайте, как выполнить развертывание в Vercel
- Изучите API геолокации Google и как преобразовать адрес в широту и долготу.
- Узнайте, как использовать Tailwind CSS 3 для оформления проекта React.
- Изучите хуки реакции useEffect и useState
- Базовые знания HTML, CSS и JavaScript
Для кого этот курс:
- Разработчики React, которые хотят иметь портфолио проекта
Курс на русском языке (машинный перевод)
Оригинальный курс на английском языке здесь
https://privatelink.de/?https://www.udemy.com/course/reactjs-firebase-project/