├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.js ├── index.js └── index.scss /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Проекты для начинающих на ReactJS 2 | 3 | Все проекты разработаны для бесплатного курса на канале [Archakov Blog](https://www.youtube.com/c/ArchakovBlog) 4 | 5 | Каждый проект хранится в отдельной ветке. 6 | 7 | ## Счётчик 8 | ![1660249082356](https://user-images.githubusercontent.com/12086860/184235207-2d20299a-0b9a-40e6-acf7-be582f6ecbfe.png) 9 | 10 | **🌿 Ветка**: `counter` 11 | 12 | **👀 Что изучим?** 13 | 1. Что такое состояние (state) 14 | 2. Хук useState 15 | 3. Как при клике на кнопку вызывать функцию 16 | 17 | ## Модальное окно 18 | ![1660249510674](https://user-images.githubusercontent.com/12086860/184235807-bfb5d74b-68dc-4903-8b15-e18f6427fcc2.png) 19 | 20 | **🌿 Ветка**: `modal` 21 | 22 | **👀 Что изучим?** 23 | 1. Условный рендер 24 | 2. Как делать анимированное модальное окно 25 | 3. Как передавать в модально окно контент (children) 26 | 4. Как передавать пропсы 27 | 28 | ## Quiz (опросник) 29 | ![1660249609940](https://user-images.githubusercontent.com/12086860/184236063-9f807f93-f6a4-4577-9a12-443ff1d3fd43.png) 30 | 31 | **🌿 Ветка**: `quiz` 32 | 33 | **👀 Что изучим?** 34 | 1. Поэтапный рендер контента 35 | 2. Прогрессбар 36 | 3. Передача пропсов для рендера результата опроса 37 | 38 | ## Список гостей (пользователей) 39 | ![1660249789449](https://user-images.githubusercontent.com/12086860/184236601-2c8d94bf-105c-4b48-982c-65a6ed4f8c51.png) 40 | 41 | **🌿 Ветка**: `users` 42 | 43 | **👀 Что изучим?** 44 | 1. Работа с хуком useEffect 45 | 2. Отправка запроса на бэкенд с помощью fetch и рендер этих данных 46 | 3. Скелетон с помощью библиотеки `react-content-loader` 47 | 4. Поиск пользователей 48 | 5. Рендер списка пользователей 49 | 6. Spread-оператор 50 | 7. Добавление/удаление пользователей из массива приглашений 51 | 8. Отображение информации о загрузке контента 52 | 53 | ## Конвертер валют 54 | ![1660250017350](https://user-images.githubusercontent.com/12086860/184237245-dd26fc7e-1b84-4490-b9cf-3d40a4ded550.png) 55 | 56 | **🌿 Ветка**: currency-converter 57 | 58 | **👀 Что изучим?** 59 | 1. Работа с хуком useEffect 60 | 2. Получение списка курса валют из отдельного API 61 | 3. Конвертация одной валюты в другую и наоборот (без бэкенда) 62 | 63 | ## Коллекция фотографий 64 | ![1660250202173](https://user-images.githubusercontent.com/12086860/184237707-4810b1d8-f20b-40cf-93ea-37d2051b87ba.png) 65 | 66 | 67 | **🌿 Ветка**: `photos` 68 | 69 | **👀 Что изучим?** 70 | 1. Фильтрация коллекций с помощью категорий 71 | 2. Поиск коллекций 72 | 3. Пагинация 73 | 4. Получение, пагинация через бэкенд 74 | 5. Отображение информации о загрузке контента 75 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "counter", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.4", 7 | "@testing-library/react": "^13.3.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.1.0", 10 | "react-dom": "^18.1.0", 11 | "react-scripts": "5.0.1", 12 | "sass": "^1.52.3", 13 | "web-vitals": "^2.1.4" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-beginner-projects/583a1673121bffb594b3f60afa21911c96f52467/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-beginner-projects/583a1673121bffb594b3f60afa21911c96f52467/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-beginner-projects/583a1673121bffb594b3f60afa21911c96f52467/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import './index.scss'; 2 | 3 | function App() { 4 | return ( 5 |
6 |
7 |

Счетчик:

8 |

0

9 | 10 | 11 |
12 |
13 | ); 14 | } 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const root = ReactDOM.createRoot(document.getElementById('root')); 6 | 7 | root.render( 8 | 9 | 10 | , 11 | ); 12 | -------------------------------------------------------------------------------- /src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 4 | 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | background-color: #edf6f9; 8 | } 9 | 10 | .App { 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | height: 100vh; 15 | text-align: center; 16 | 17 | h1 { 18 | color: #000; 19 | font-size: 7rem; 20 | margin: 0; 21 | margin-bottom: 20px; 22 | 23 | &.plus { 24 | color: #2a9d8f; 25 | } 26 | &.minus { 27 | color: #e63946; 28 | } 29 | } 30 | 31 | h2 { 32 | font-size: 2rem; 33 | margin: 0; 34 | color: #556581; 35 | } 36 | 37 | button { 38 | background: transparent; 39 | border: 2px solid transparent; 40 | text-align: center; 41 | font-size: 22px; 42 | border-radius: 15px; 43 | padding: 10px 25px; 44 | cursor: pointer; 45 | margin: 0 10px; 46 | transition: all 0.05s ease-in-out; 47 | 48 | &.minus { 49 | background-color: #e63946; 50 | color: #fff; 51 | box-shadow: 0 4px 0 darken(#e63946, 10%); 52 | border: 1px solid darken(#e63946, 15%); 53 | } 54 | 55 | &.plus { 56 | background-color: #2a9d8f; 57 | color: #fff; 58 | box-shadow: 0 4px 0 darken(#2a9d8f, 10%); 59 | border: 1px solid darken(#2a9d8f, 15%); 60 | } 61 | 62 | &:hover { 63 | transform: translateY(-2px); 64 | } 65 | 66 | &:active { 67 | transform: translateY(2px); 68 | box-shadow: none; 69 | } 70 | } 71 | } 72 | --------------------------------------------------------------------------------