Тотальный React 🤘

Ресурс для изучения React.js и связанных с ним технологий на русском языке 🇷🇺

Последнее обновление: 14.06.2021 - добавил руководство по Workbox

• 📃 Вопросы для подготовки к собеседованию. Версия 1
• 📃 Вопросы для подготовки к собеседованию. Версия 2
• 📝 Шпаргалки по React, Jest, Redux и лучшие практики по React
• 📝 React и TypeScript
• 📝 Шпаргалка React + TypeScript
• 📝 Выдержки из определений типов для React (TypeScript)

• 📝 Шпаргалка по хукам
• 📝 Шпаргалка по Create React App
• 📃 Руководство по React Router
• 📃 Руководство по Redux Toolkit
• 📃 Руководство по Recoil
• 📃 Руководство по React Query
• 📃 Руководство по React Transition Group
• 📃 Руководство по React Spring
• 📝 Шпаргалка по Styled Components

• 📃 Руководство по GraphQL
• 📃 Руководство по Workbox
• 📝 Шпаргалка по Express API
• 📃 Руководство по Mongoose
• 📃 Руководство по Socket.IO
• 📝 Шпаргалка по Webpack
• 📝 Шпаргалка по HTML5-тегам
• 📝 Шпаргалка по JS-методам для работы с DOM
• 📝 Шпаргалка по Axios
• 📝 Шпаргалка по JSON Server
• 📝 Шпаргалка по JSON Web Token
• 📝 Шпаргалка по Markdown
• 📝 Шпаргалка по Google Spreadsheet

Проекты

• 🔗 Пример использования Apollo Server, Apollo Client, GraphQL и React для создания блога
• 🔗 Пример использования Socket.io и React для создания чата
• 🔗 Пример реализации подписки на обновления с помощью React, Netlify Functions и Google Sheets

Пользовательские хуки

• Несколько примеров
• Awesome React Hooks
• react-use
• @react-hook
• beautiful-react-hooks

Что называется "battle tested" React-компоненты

• Несколько примеров
• Curated List of React Components & Libraries - большая коллекция компонентов и библиотек для React
• emoji-mart - компонент с эмоджи
• react-beautiful-dnd - компоненты для реализации перетаскивания и бросания
• react-burger-menu - меню, навбар
• react-circular-progressbar - компонент для создания прогресса в виде круга
• react-copy-to-clipboard - компонент для копирования текста в буфер обмена
• react-error-boundary - предохранитель
• react-filepond - компонент для отправки файлов
• react-icons - компоненты-иконки
• react-google-recaptcha
• react-lazyload - ленивая загрузка компонентов
• react-loader-spinner - индикатор загрузки
• react-responsive - использование медиа-запросов в компонентах
• react-search-input - инпут для поиска
• react-timeago - компонент для форматирования даты и времени с поддержкой русского языка
• react-virtualized - рендеринг только видимых элементов списка

Источники и полезные ссылки

Экосистема React

• React
• React Native
• React Router
• Redux
• Redux Toolkit
• Recoil
• React Query
• Gatsby
• Next
• Create React App
• Styled Components
• React Transition Group
• React Spring

CSS-фреймворки для React

• Material UI
• React Bootstrap
• Reactstrap
• Semantic UI React
• Ant Design
• React Toolbox
• Shards React
• Tailwind CSS

• React Hook Form - работа с формами
• Formik - альтернатива react-hook-form
• React Table - работа с таблицами
• React Leaflet - работа с картой
• Resharts - визуализация данных
• React Snap - предварительный рендеринг страниц для SPA

Node.js

• Node.js
• Документация Node.js с примерами кода
• Node.js: лучшие практики
• npm
• yarn
• Express
• Mongoose
• Mongo Atlas/Cloud
• Sequalize - ORM для работы с Postgres, MySQL, MariaDB, SQLite и Microsoft SQL Server
• Prisma - ORM "нового поколения" для работы с MySQL, PostgreSQL и SQLite
• GraphQL
• Postman - сервис для тестирования API

TypeScript

• TypeScript
• TypeScript Handbook
• Рекомендуемый tsconfig.json

Другое

• ECMAScript 2022 Language Specification
• V8 JavaScript Engine
• Google Fonts
• FontAwesome
• FlatIcon
• FreeIcons
• PngTree
• PngImg
• Webpack - сборщик модулей
• Socket.IO - библиотека для создания приложений, работающих в режиме реального времени
• Mirage.js - библиотека, позволяющая тестировать API на клиенте
• Mailtrap - сервис для тестирования отправки электронных писем
• Статус-коды HTTP
• HTML-эмодзи
• Классы Bootstrap 4

Авторизация

• Passport - фреймворк для аутентификации/авторизации
• JSON Web Tokens
• Auth0
• express-session - утилита для реализации куки-сессий с помощью Express
• connect-mongo - утилита для хранения куки-сессий в MongoDB
• jsonwebtoken - библиотека для создание и подтверждения токенов
• bcrypt - утилита для хэширования и проверки паролей
• base64url- утилита для кодирования/декодирования строки в base64
• react-google-login - компонент для авторизации с помощью Google-аккаунта
• react-facebook-login - компонент для авторизации с помощью Facebook-аккаунта
• react-github-login - компонент для авторизации с помощью GitHub-аккаунта

npm-пакеты

• axios - библиотека для выполнения HTTP-запросов
• concurrently - утилита для одновременного выполнения нескольких команд (скриптов)
• express-validator - утилита для проверки входящих данных
• generate-password - утилита для генерации паролей
• google-spreadsheet - библиотека для работы с Google таблицами
• json-server - библиотека для создания fake REST API
• multer - утилита для обработки multipart/form-data
• nanoid - утилита для генерации уникальных идентификаторов
• nodemailer - утилита для отправки email
• nodemon - альтернатива supervisor
• npm-run-all - альтернатива concurrently
• serve - утилита для обслуживания статических файлов
• supervisor - утилита для запуска сервера для разработки
• validator.js - библиотека, лежащая в основе express-validator

Участие

Буду признателен за помощь в обнаружении ошибок, опечаток и неточностей, а также за любой вклад в развитие проекта 😉

Лицензия

Материалы находятся в свободном доступе. Это означает, что вы можете их использовать как угодно. Будет круто, если при этом вы будете ссылаться на данный репозиторий 👍