1. Сам React (архитектура, компоненты, хуки, эвенты, стилизация, статические данные, HTML/CSS/JS)
2. Типизация React-приложения (TypeScript)
3. Стейт-менеджер (Redux toolkit)
4. Взаимодействие с API и обработка данных (URL, axios, апи-сервисы, логин, CRUD, localStorage, cookies, динамические данные и т.д.)
5. Сборка и экосистема (create-react-app, react-script, NextJS, Webpack, Parcel, npm-пакеты, env, линтеры, форматтеры, тестеры и т.д.)
6. UI-фреймворк для React (Material UI, bootstrap и т.д.)
7. Backend для React-приложения (сервер, SSR, бекенд-код, DB и т.д.)
8. Деплой приложения на тестовый и продакшн-серверы
Архитектура React-приложения
—
components/ - переиспользуемые компоненты—
utils/ - переиспользуемые утилиты—
consts/ или constants/- переиспользуемые константы—
store/ - Redux, mobx—
routes/, pages/ или containers/- страницы приложения—
styles/ - статичные стили—
api/ - взаимодействие с API—
static/ или assets/ - статичные файлы (изображения, шрифты, иконки и пр.)—
types/ или interfaces/ - файлы переиспользуемой типизации@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
🌟 Screenshot to Code — крутой инструмент для конвертирования скринов, Figma-шаблонов и мокапов в чистый код
Поддерживаемые стэки: HTML + Tailwind, React + Tailwind, Vue + Tailwind, Bootstrap, Ionic + Tailwind и SVG.
@react_tg
Поддерживаемые стэки: HTML + Tailwind, React + Tailwind, Vue + Tailwind, Bootstrap, Ionic + Tailwind и SVG.
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🚀 MightyMeld — уже готовых к работе веб-компонентов.
Это обширная коллекция компонентов, которые совместимы с Tailwind CSS и React. Просто выберите необходимый элемент из большой библиотеки шаблонов, перетащите его на рабочее пространство и настройте под свои потребности. В проекте также имеется встроенный искусственный интеллект.
Основной функционал инструмента предоставляется бесплатно, однако также имеются платные возможности.
🖇 Github
@react_tg
Это обширная коллекция компонентов, которые совместимы с Tailwind CSS и React. Просто выберите необходимый элемент из большой библиотеки шаблонов, перетащите его на рабочее пространство и настройте под свои потребности. В проекте также имеется встроенный искусственный интеллект.
Основной функционал инструмента предоставляется бесплатно, однако также имеются платные возможности.
🖇 Github
@react_tg
Проблема возникает, когда нужно вывести очень большой набор данных, да еще и без пагинации. Это приведет к загрязнению DOM и займет много памяти браузера, что приведет к проблемам с производительностью.
Держите полезную статью, где пошагово реализуется виртуальная прокрутка в React
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Здесь сфокусируемся на архитектуре front-end приложения
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥 Beautiful icon library, made for creativity.
- Более 27 000 красивых иконок для разработчиков
- Более 3800 бесплатных иконок для коммерческого использования
- Доступны npm, SVG, React и React Native
→ http://hugeicons.com
@react_tg
- Более 27 000 красивых иконок для разработчиков
- Более 3800 бесплатных иконок для коммерческого использования
- Доступны npm, SVG, React и React Native
→ http://hugeicons.com
@react_tg
action для формы, новые хуки, серверные компоненты и серверные действия, метаданные страницы и предзагрузка ресурсов из коробки. Из нового — для передачи ref больше не нужно использовать forwardRef, обновлённое API контекстов и продвинутая поддержка таблиц стилей.@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
Задача — требуется реализовать компонент-контейнер:
— в который можно просто передать список карточек
— который ограничен по ширине
— который скроллится по горизонтали
— который имеет базовые контролы — стрелочки влево и вправо
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
https://codepen.io/carsonf92/pen/PoxxmeO?__cf_chl_tk=
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
А вот некоторые из заданий:
— Крестики нолики
Поле 3×3, игра должна содержать возможность перейти на любой из предыдущих шагов.
— Генератор цитат
Пользователь должен иметь возможность запросить новую цитату, а так же создать пост для социальных сетей.
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥Подборка лучших обучающих каналов для программистов.
➡️ Делитесь с коллегами и сохраняйте себе, чтобы не потерять
⚡Машинное обучение
Machine Learning - запускаем лучшие ИИ модели, пишем код, погружаемся в нейросети
Ml Собеседование - подготовка к собесу по мл, алгоритмам, коду
Ml ru - актуальные статьи, новости, код и обучающие материалы
Ml Jobs - вакансии ML
ML Книги - актуальные бесплатные книги МО
ML чат
🏆 Golang
Golang
Golang собеседование - разбор задач и вопросов с собесов
Golang вакансии -работа для Go разработчика
Golang книги библиотека книг
Golang задачи и тесты
Golang чат
Golang news - новости из мира go
Golang дайджест
💥 Linux /Этичный хакинг
Linux Academy - гайды, секреты и лучшие материалы по Linux
Kali linux - погрузись в мир этичного хакинга и кибербезопасности
linux_kal - kali чат
Информационная безопасность
🚀 Data Science
Анализ данных - полезные фишки, код, гайды и советы, маст-хэв датасаентиста
Data Jobs - ds вакансии
Аналитик данных
Data Science книги - актуальные бесплатные книги
Big data
🛢Базы данных
Sql базы данных - научим работе с базами данных профессионально
Библиотека баз данных
SQL чат
Вакансии Sql аналитик данных
#️⃣C#
С# академия - лучший канал по c#
С# заметки — код, лучшие практики, заметки программиста c#
С# задачи и тесты
С# библиотека - актуальные бесплатные книги
C# вакансии - работа
🐍 Python
Python/django - самый крупный обучающий канал по Python
Python Собеседование - подготовка к собеседовению python и разбор алгоритмов
Pro python - статьи, новости, код и обучающие материалы
Python Jobs - вакансии Python
Python чат
Python книги
☕ Java
Java академия - java от Senior разработчика
Java вакансии
Java чат
Java вопросы с собеседований
Java книги
💻 C++
C++ академия
С++ книги
C++ задачи - подготовка к собеседовению мл, алгоритмам
C++ вакансии
⚡️ Frontend
Javascript академия - крупнейший js канал
React - лучшие гайды и советы по работе с react
Frontend - тутрориалы, уроки, гайды, код
PHP
Книги frontend
Задачи frontend
🦀 Rust
Rust программирование
Rust чат
Rust книги для программистов
📲 Мобильная разработка
Android разработка
Мобильный разработчик гайды и уроки
🇬🇧 Английский для программистов
🧠 Искусственный интеллект
ИИ и технологии
Neural - нейросети для работы и жизни
Книги ИИ
Artificial Intelligence
🔥 DevOPs
Devops для программистов
Книги Devops
🌟 Docker/Kubernets
Docker
Kubernets
📓 Книги
Библиотеки Книг для программситов
💼 Папка с вакансиями:
Папка Go разработчика:
Папка Python разработчика:
Папка Data Science
Папка Java разработчика
Папка C#
Папка Frontend
💥 Бесплатный Chatgpt бот
➡️ Делитесь с коллегами и сохраняйте себе, чтобы не потерять
⚡Машинное обучение
Machine Learning - запускаем лучшие ИИ модели, пишем код, погружаемся в нейросети
Ml Собеседование - подготовка к собесу по мл, алгоритмам, коду
Ml ru - актуальные статьи, новости, код и обучающие материалы
Ml Jobs - вакансии ML
ML Книги - актуальные бесплатные книги МО
ML чат
🏆 Golang
Golang
Golang собеседование - разбор задач и вопросов с собесов
Golang вакансии -работа для Go разработчика
Golang книги библиотека книг
Golang задачи и тесты
Golang чат
Golang news - новости из мира go
Golang дайджест
💥 Linux /Этичный хакинг
Linux Academy - гайды, секреты и лучшие материалы по Linux
Kali linux - погрузись в мир этичного хакинга и кибербезопасности
linux_kal - kali чат
Информационная безопасность
🚀 Data Science
Анализ данных - полезные фишки, код, гайды и советы, маст-хэв датасаентиста
Data Jobs - ds вакансии
Аналитик данных
Data Science книги - актуальные бесплатные книги
Big data
🛢Базы данных
Sql базы данных - научим работе с базами данных профессионально
Библиотека баз данных
SQL чат
Вакансии Sql аналитик данных
#️⃣C#
С# академия - лучший канал по c#
С# заметки — код, лучшие практики, заметки программиста c#
С# задачи и тесты
С# библиотека - актуальные бесплатные книги
C# вакансии - работа
🐍 Python
Python/django - самый крупный обучающий канал по Python
Python Собеседование - подготовка к собеседовению python и разбор алгоритмов
Pro python - статьи, новости, код и обучающие материалы
Python Jobs - вакансии Python
Python чат
Python книги
☕ Java
Java академия - java от Senior разработчика
Java вакансии
Java чат
Java вопросы с собеседований
Java книги
💻 C++
C++ академия
С++ книги
C++ задачи - подготовка к собеседовению мл, алгоритмам
C++ вакансии
⚡️ Frontend
Javascript академия - крупнейший js канал
React - лучшие гайды и советы по работе с react
Frontend - тутрориалы, уроки, гайды, код
PHP
Книги frontend
Задачи frontend
🦀 Rust
Rust программирование
Rust чат
Rust книги для программистов
📲 Мобильная разработка
Android разработка
Мобильный разработчик гайды и уроки
🇬🇧 Английский для программистов
🧠 Искусственный интеллект
ИИ и технологии
Neural - нейросети для работы и жизни
Книги ИИ
Artificial Intelligence
🔥 DevOPs
Devops для программистов
Книги Devops
🌟 Docker/Kubernets
Docker
Kubernets
📓 Книги
Библиотеки Книг для программситов
💼 Папка с вакансиями:
Папка Go разработчика:
Папка Python разработчика:
Папка Data Science
Папка Java разработчика
Папка C#
Папка Frontend
💥 Бесплатный Chatgpt бот