https://github.com/archakov06/react-beginner-projects

https://github.com/archakov06/react-beginner-projects

Last synced: 5 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/archakov06/react-beginner-projects
• Owner: Archakov06
• Created: 2022-06-14T18:26:33.000Z (about 4 years ago)
• Default Branch: counter
• Last Pushed: 2024-08-10T02:53:21.000Z (almost 2 years ago)
• Last Synced: 2025-03-14T07:09:12.670Z (over 1 year ago)
• Language: HTML
• Size: 628 KB
• Stars: 169
• Watchers: 9
• Forks: 330
• Open Issues: 17
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Проекты для начинающих на ReactJS

Все проекты разработаны для бесплатного курса на канале [Archakov Blog](https://www.youtube.com/c/ArchakovBlog)

Каждый проект хранится в отдельной ветке.

## Счётчик

![1660249082356](https://user-images.githubusercontent.com/12086860/184235207-2d20299a-0b9a-40e6-acf7-be582f6ecbfe.png)

**🌿 Ветка**: `counter`

**👀 Что изучим?**

1. Что такое состояние (state)

2. Хук useState

3. Как при клике на кнопку вызывать функцию

## Модальное окно

![1660249510674](https://user-images.githubusercontent.com/12086860/184235807-bfb5d74b-68dc-4903-8b15-e18f6427fcc2.png)

**🌿 Ветка**: `modal`

**👀 Что изучим?**

1. Условный рендер

2. Как делать анимированное модальное окно

3. Как передавать в модально окно контент (children)

4. Как передавать пропсы

## Quiz (опросник)

![1660249609940](https://user-images.githubusercontent.com/12086860/184236063-9f807f93-f6a4-4577-9a12-443ff1d3fd43.png)

**🌿 Ветка**: `quiz`

**👀 Что изучим?**

1. Поэтапный рендер контента

2. Прогрессбар

3. Передача пропсов для рендера результата опроса

## Список гостей (пользователей)

![1660249789449](https://user-images.githubusercontent.com/12086860/184236601-2c8d94bf-105c-4b48-982c-65a6ed4f8c51.png)

**🌿 Ветка**: `users`

**👀 Что изучим?**

1. Работа с хуком useEffect

2. Отправка запроса на бэкенд с помощью fetch и рендер этих данных

3. Скелетон с помощью библиотеки `react-content-loader`

4. Поиск пользователей

5. Рендер списка пользователей

6. Spread-оператор

7. Добавление/удаление пользователей из массива приглашений

8. Отображение информации о загрузке контента

## Конвертер валют

![1660250017350](https://user-images.githubusercontent.com/12086860/184237245-dd26fc7e-1b84-4490-b9cf-3d40a4ded550.png)

**🌿 Ветка**: currency-converter

**👀 Что изучим?**

1. Работа с хуком useEffect

2. Получение списка курса валют из отдельного API 

3. Конвертация одной валюты в другую и наоборот (без бэкенда)

## Коллекция фотографий

![1660250202173](https://user-images.githubusercontent.com/12086860/184237707-4810b1d8-f20b-40cf-93ea-37d2051b87ba.png)

**🌿 Ветка**: `photos`

**👀 Что изучим?**

1. Фильтрация коллекций с помощью категорий

2. Поиск коллекций

3. Пагинация

4. Получение, пагинация через бэкенд

5. Отображение информации о загрузке контента