🎄X-MAS HACK 2022 – время исполнения желаний🎄
👨🏻💻Если ты кодишь – ждём тебя в секции «Хакатон» с кейсами от IT-компаний
💡Если ты настоящий генератор идей – ждём в секции «Идеатон», где ты сможешь предложить самые смелые идеи для бизнеса!
Даты хакатона: 15–18 декабря 2022 года
Дедлайн регистрации: 12 декабря 23:59
Регистрация и подробности:
⚡️Хакатон - https://clck.ru/32kc5u
✨Идеатон - https://clck.ru/32kc5T
Создавай команду или подавай личную заявку, а мы найдем для тебя крутую команду! Регистрируйся, решай новогодний кейс, заводи знакомства, перенимай опыт от топовых экспертов, стань частью X-MAS HACK! И кто знает.. возможно, именно ты заберешь главные призы!
💰Призовой фонд – 1.700.000 рублей!
🎁 Новогодний мерч, подарки от партнеров и сертификаты
🎅🏻 Менторская поддержка от топовых экспертов
🪄 Мастер-классы, лайфхаки и много полезных знакомств
Больше хакатонов и призов - https://clck.ru/32kc6S
#хакатон #идеатон
👨🏻💻Если ты кодишь – ждём тебя в секции «Хакатон» с кейсами от IT-компаний
💡Если ты настоящий генератор идей – ждём в секции «Идеатон», где ты сможешь предложить самые смелые идеи для бизнеса!
Даты хакатона: 15–18 декабря 2022 года
Дедлайн регистрации: 12 декабря 23:59
Регистрация и подробности:
⚡️Хакатон - https://clck.ru/32kc5u
✨Идеатон - https://clck.ru/32kc5T
Создавай команду или подавай личную заявку, а мы найдем для тебя крутую команду! Регистрируйся, решай новогодний кейс, заводи знакомства, перенимай опыт от топовых экспертов, стань частью X-MAS HACK! И кто знает.. возможно, именно ты заберешь главные призы!
💰Призовой фонд – 1.700.000 рублей!
🎁 Новогодний мерч, подарки от партнеров и сертификаты
🎅🏻 Менторская поддержка от топовых экспертов
🪄 Мастер-классы, лайфхаки и много полезных знакомств
Больше хакатонов и призов - https://clck.ru/32kc6S
#хакатон #идеатон
React JS фундаментальный курс от А до Я
00:00 ➝ Введение
03:15 ➝ Теория
11:40 ➝ Начало разработки. Создание проекта
16:10 ➝ Что такое JSX?
18:11 ➝ Компонент App. Работа с состоянием. UseState
22:25 ➝ Управляемый инпут
24:07 ➝ Первый функциональный компонент
26:40 ➝ Первый классовый компонент
30:25 ➝ Что такое хуки? useState, useEffect
31:10 ➝ Стили. CSS. Классы
34:30 ➝ Props. Аргументы компонента.
36:55 ➝ Работы со списками. Преобразование массива объектов в массив React элементов
41:50 ➝ Форма создания поста. Управляемые и неуправляемые компоненты
42:30 ➝ Создание UI библиотеки. Первые компоненты. CSS модули. Пропс children
50:00 ➝ Предотвращаем обновление страницы при submit формы
50:45 ➝ хук useRef. Доступ к DOM элементу. Неуправляемый компонент
57:35 ➝ React Devtools. Инструменты разработчика React
59:15 ➝ Обмен данными между компонентами. От родителя к ребенку. От ребенка к родителю.
01:04:20 ➝ Отрисовка по условию
01:05:30 ➝ Сортировка. Выпадающий список
01:12:00 ➝ Поиск. Фильтрация.
01:15:10 ➝ useMemo. Мемоизация. Кеширование
01:23:50 ➝ Модальное окно. Переиспользуемый UI компонент
01:30:23 ➝ Анимации. React transition group
01:33:40 ➝ Декомпозиция. Кастомные хуки
01:36:20 ➝ Работа с сервером. Axios
01:38:40 ➝ Жизненный цикл компонента. useEffect
01:43:08 ➝ API. PostService
01:44:45 ➝ Индикация загрузки данных с сервера
01:46:20 ➝ Компонент Loader. Анимации
01:49:25 ➝ Кастомный хук useFetching(). Обработка ошибок
01:54:15➝ Постраничный вывод. Пагинация (pagination)
02:06:20 ➝ Обьяснение механизма изменения состояния
02:12:00 ➝ React router. Постраничная навигация. BrowserRouter, Route, Switch, Redirect
02:22:00 ➝ Динамическая навигация. useHistory, useParams
02:29:30 ➝ Загрузка комментариев к посту
02:33:10 ➝ Улучшаем навигацию. Приватные и публичные маршруты
02:38:00 ➝ useContext. Глобальные данные. Авторизация пользователя
02:47:10 ➝ Бесконечная лента. Динамическая пагинация. useObserver
02:58:40 ➝ План на дальнейшее обучение. Ставим лайки и пишем комментарии 🙂
https://www.youtube.com/watch?v=GNrdg3PzpJQ
✍️ @React_lib
00:00 ➝ Введение
03:15 ➝ Теория
11:40 ➝ Начало разработки. Создание проекта
16:10 ➝ Что такое JSX?
18:11 ➝ Компонент App. Работа с состоянием. UseState
22:25 ➝ Управляемый инпут
24:07 ➝ Первый функциональный компонент
26:40 ➝ Первый классовый компонент
30:25 ➝ Что такое хуки? useState, useEffect
31:10 ➝ Стили. CSS. Классы
34:30 ➝ Props. Аргументы компонента.
36:55 ➝ Работы со списками. Преобразование массива объектов в массив React элементов
41:50 ➝ Форма создания поста. Управляемые и неуправляемые компоненты
42:30 ➝ Создание UI библиотеки. Первые компоненты. CSS модули. Пропс children
50:00 ➝ Предотвращаем обновление страницы при submit формы
50:45 ➝ хук useRef. Доступ к DOM элементу. Неуправляемый компонент
57:35 ➝ React Devtools. Инструменты разработчика React
59:15 ➝ Обмен данными между компонентами. От родителя к ребенку. От ребенка к родителю.
01:04:20 ➝ Отрисовка по условию
01:05:30 ➝ Сортировка. Выпадающий список
01:12:00 ➝ Поиск. Фильтрация.
01:15:10 ➝ useMemo. Мемоизация. Кеширование
01:23:50 ➝ Модальное окно. Переиспользуемый UI компонент
01:30:23 ➝ Анимации. React transition group
01:33:40 ➝ Декомпозиция. Кастомные хуки
01:36:20 ➝ Работа с сервером. Axios
01:38:40 ➝ Жизненный цикл компонента. useEffect
01:43:08 ➝ API. PostService
01:44:45 ➝ Индикация загрузки данных с сервера
01:46:20 ➝ Компонент Loader. Анимации
01:49:25 ➝ Кастомный хук useFetching(). Обработка ошибок
01:54:15➝ Постраничный вывод. Пагинация (pagination)
02:06:20 ➝ Обьяснение механизма изменения состояния
02:12:00 ➝ React router. Постраничная навигация. BrowserRouter, Route, Switch, Redirect
02:22:00 ➝ Динамическая навигация. useHistory, useParams
02:29:30 ➝ Загрузка комментариев к посту
02:33:10 ➝ Улучшаем навигацию. Приватные и публичные маршруты
02:38:00 ➝ useContext. Глобальные данные. Авторизация пользователя
02:47:10 ➝ Бесконечная лента. Динамическая пагинация. useObserver
02:58:40 ➝ План на дальнейшее обучение. Ставим лайки и пишем комментарии 🙂
https://www.youtube.com/watch?v=GNrdg3PzpJQ
✍️ @React_lib
YouTube
React JS фундаментальный курс от А до Я
React Полный курс от А до Я. Рассмотрим основные концепции и разработаем функционал, который встречается в каждом приложении.
Мой курс "Продвинутый Frontend. В production на React" - https://ulbitv.ru/frontend
Ссылка на исходный код (git) здесь - https…
Мой курс "Продвинутый Frontend. В production на React" - https://ulbitv.ru/frontend
Ссылка на исходный код (git) здесь - https…
Signals — лучшее решение для управления состоянием приложения? Отвечает разработчик inDrive
Фронтенд-разработчик inDrive в статье на Хабре поделился мнением о новой библиотеке от команды Preact под названием Signals. Одна из ее главных особенностей — работа не только с Preact, но и с React, Svelte и многими другими решениями. О других возможностях и преимуществах читайте в статье.
Фронтенд-разработчик inDrive в статье на Хабре поделился мнением о новой библиотеке от команды Preact под названием Signals. Одна из ее главных особенностей — работа не только с Preact, но и с React, Svelte и многими другими решениями. О других возможностях и преимуществах читайте в статье.
Хабр
Универсальный солдат: обзор библиотеки Signals от команды Preact
Стейт-менеджеры уже давно стали своеобразным мемом среди разработчиков. Бытует мнение, что фронтедеры только тем и занимаются, что вместо решения действительно важных и актуальных проблем постоянно...
Media is too big
VIEW IN TELEGRAM
Fullstack приложение за 3 часа. React и Node. MERN
00:00:00 Введение
00:02:52 Инициализация проекта на Node.js
00:05:46 Установка базовых зависимостей
00:07:02 Работа со скриптами
00:08:18 Настройка Express.js,
00:11:47 Подключение к базе данных MongoDB
00:20:30 Регистрация роутов
00:47:31 Настройка React.js
00:57:00 Настойка роутинга страниц
01:05:27 Работа над компонентом AuthPage
01:18:03 Работа с запросами
01:37:00 Обработка ошибок
01:47:44 Работа над авторизацией
02:00:18 Работа над компонентом Navbar
02:06:16 Работа над-бизнес логикой на сервере
02:25:10 Работа над компонентом CreatePage
02:34:18 Работа над компонентом Loader
02:37:37 Работа над компонентом DetailPage
02:42:18 Работа над компонентом LinkCard
02:46:58 Работа над компонентом LinksPage
02:54:41 Доработка бизнес-логики на сервере
03:01:00 Добавление скриптов
03:08:52 Добавление на GitHub
03:11:15 Привязка домена к хостингу
03:14:45 Настройка сервера на хостинге
03:26:18 Настройка менеджера процессов PM2
03:32:43 Завершение
✍️ @React_lib
00:00:00 Введение
00:02:52 Инициализация проекта на Node.js
00:05:46 Установка базовых зависимостей
00:07:02 Работа со скриптами
00:08:18 Настройка Express.js,
00:11:47 Подключение к базе данных MongoDB
00:20:30 Регистрация роутов
00:47:31 Настройка React.js
00:57:00 Настойка роутинга страниц
01:05:27 Работа над компонентом AuthPage
01:18:03 Работа с запросами
01:37:00 Обработка ошибок
01:47:44 Работа над авторизацией
02:00:18 Работа над компонентом Navbar
02:06:16 Работа над-бизнес логикой на сервере
02:25:10 Работа над компонентом CreatePage
02:34:18 Работа над компонентом Loader
02:37:37 Работа над компонентом DetailPage
02:42:18 Работа над компонентом LinkCard
02:46:58 Работа над компонентом LinksPage
02:54:41 Доработка бизнес-логики на сервере
03:01:00 Добавление скриптов
03:08:52 Добавление на GitHub
03:11:15 Привязка домена к хостингу
03:14:45 Настройка сервера на хостинге
03:26:18 Настройка менеджера процессов PM2
03:32:43 Завершение
✍️ @React_lib
React Redux Webpack - практический курс
1. React Redux Webpack - практический курс. Введение
2. React Redux Webpack - базовая настройка Webpack, импорт стилей
3. React Redux - настраиваем React в Webpack
4. React Redux - основы Redux, используем хуки useDispatch() и useSelector()
5. React Redux - Главная страница. Axios - асинхронные запросы на API GitHub
6. React Redux - поиск репозиториев, анимация подгрузки
7. React Redux - Pagination\Пагинация - постраничный вывод репозиториев GitHub
8. React Redux - Роутинг\Маршрутизация по страницам. React-router-dom, Router, Switch, Redirect
9. React Redux - страница репозитория.
10. React Redux - обработка ошибок
https://www.youtube.com/playlist?list=PL6DxKON1uLOHTgN679Es1vkCS911i9HJX
✍️ @React_lib
1. React Redux Webpack - практический курс. Введение
2. React Redux Webpack - базовая настройка Webpack, импорт стилей
3. React Redux - настраиваем React в Webpack
4. React Redux - основы Redux, используем хуки useDispatch() и useSelector()
5. React Redux - Главная страница. Axios - асинхронные запросы на API GitHub
6. React Redux - поиск репозиториев, анимация подгрузки
7. React Redux - Pagination\Пагинация - постраничный вывод репозиториев GitHub
8. React Redux - Роутинг\Маршрутизация по страницам. React-router-dom, Router, Switch, Redirect
9. React Redux - страница репозитория.
10. React Redux - обработка ошибок
https://www.youtube.com/playlist?list=PL6DxKON1uLOHTgN679Es1vkCS911i9HJX
✍️ @React_lib
Build a React dashboard with Tremor
Dashboards are essential tools for modern corporations and administrators. They provide insightful data that can help monitor an enterprise’s quantitative performance and metrics.
https://blog.logrocket.com/build-react-dashboard-tremor/
✍️ @React_lib
Dashboards are essential tools for modern corporations and administrators. They provide insightful data that can help monitor an enterprise’s quantitative performance and metrics.
https://blog.logrocket.com/build-react-dashboard-tremor/
✍️ @React_lib
Media is too big
VIEW IN TELEGRAM
Шахматы на React и TypeScript С НУЛЯ. Практикуем ООП
00:00 ➝ Введение
00:50 ➝ Реклама
02:40 ➝ Начало разработка. Инициализация React приложения
07:20 ➝ Создаем ООПшные классы для шахмат. Инициализируем клетки шахматной доски
17:17 ➝ Расставляем фигуры
23:50 ➝ Координаты доски. Х Y
29:10 ➝ Логика игры. Подсвечиваем доступные для хода клетки
40:20 ➝ canMove. Движение фигур. Ферзь, слон, ладья
51:00 ➝ Движение коня и пешки
56:10 ➝ Перезапуск игры. Передача хода
59:40 ➝ Список съеденных фигур. Таймер
✍️ @React_lib
00:00 ➝ Введение
00:50 ➝ Реклама
02:40 ➝ Начало разработка. Инициализация React приложения
07:20 ➝ Создаем ООПшные классы для шахмат. Инициализируем клетки шахматной доски
17:17 ➝ Расставляем фигуры
23:50 ➝ Координаты доски. Х Y
29:10 ➝ Логика игры. Подсвечиваем доступные для хода клетки
40:20 ➝ canMove. Движение фигур. Ферзь, слон, ладья
51:00 ➝ Движение коня и пешки
56:10 ➝ Перезапуск игры. Передача хода
59:40 ➝ Список съеденных фигур. Таймер
✍️ @React_lib
Media is too big
VIEW IN TELEGRAM
UseState: Asynchronous or what?
00:00 Introduction
00:30 The Basics
01:14 React Advanced Sponsorship
02:12 Basic React State/Rendering Flow
10:10 Fixing the Async "Problem"
15:20 What have we learned
16:30 Outroduction
✍️ @React_lib
00:00 Introduction
00:30 The Basics
01:14 React Advanced Sponsorship
02:12 Basic React State/Rendering Flow
10:10 Fixing the Async "Problem"
15:20 What have we learned
16:30 Outroduction
✍️ @React_lib
React Email
Коллекция высококачественных нестилизованных компонентов для создания красивых электронных писем с помощью React и TypeScript.
Сайт https://react.email/
Примеры https://react.email/examples
✍️ @React_lib
Коллекция высококачественных нестилизованных компонентов для создания красивых электронных писем с помощью React и TypeScript.
Сайт https://react.email/
Примеры https://react.email/examples
✍️ @React_lib
Примеры использования React ref callback
https://julesblom.com/writing/ref-callback-use-cases
✍️ @React_lib
https://julesblom.com/writing/ref-callback-use-cases
✍️ @React_lib
Возможно, вам не нужен эффект
Эффекты - это люк для выхода из парадигмы React. Они позволяют вам "выйти за пределы" React и синхронизировать ваши компоненты с какой-либо внешней системой, например, с не-React виджетом, сетью или DOM браузера. Если внешняя система не задействована (например, если вы хотите обновить состояние компонента при изменении некоторых реквизитов или состояния), вам не нужен Эффект. Удаление ненужных Эффектов сделает ваш код более понятным, быстрым в исполнении и менее подверженным ошибкам.
https://beta.reactjs.org/learn/you-might-not-need-an-effect
✍️ @React_lib
Эффекты - это люк для выхода из парадигмы React. Они позволяют вам "выйти за пределы" React и синхронизировать ваши компоненты с какой-либо внешней системой, например, с не-React виджетом, сетью или DOM браузера. Если внешняя система не задействована (например, если вы хотите обновить состояние компонента при изменении некоторых реквизитов или состояния), вам не нужен Эффект. Удаление ненужных Эффектов сделает ваш код более понятным, быстрым в исполнении и менее подверженным ошибкам.
https://beta.reactjs.org/learn/you-might-not-need-an-effect
✍️ @React_lib
react.dev
You Might Not Need an Effect – React
The library for web and native user interfaces
Вещи, которые полезно знать о React.js
Несколько слов о мотивации написать эту статью. Большинство вещей, о которых я тут хочу рассказать, вы можете узнать из документации React. Но проводя собеседования последние пару лет я понял, что многие разработчики о них не знают по каким-то причинам, может просто не вчитывались внимательно или этому не уделено достаточного внимания в самой документации. Так что я решил собрать тут несколько моментов и разобрать их, чтобы тот кто прочитает эту статью, начал понимать React чуть лучше и стал более осознанно использовать те или иные инструменты в работе. Так же это будет полезно тем, кто хочет подготовиться к собеседованию и не ударить в грязь лицом, когда их будут гонять по реакту.
https://habr.com/ru/post/679452/
✍️ @React_lib
Несколько слов о мотивации написать эту статью. Большинство вещей, о которых я тут хочу рассказать, вы можете узнать из документации React. Но проводя собеседования последние пару лет я понял, что многие разработчики о них не знают по каким-то причинам, может просто не вчитывались внимательно или этому не уделено достаточного внимания в самой документации. Так что я решил собрать тут несколько моментов и разобрать их, чтобы тот кто прочитает эту статью, начал понимать React чуть лучше и стал более осознанно использовать те или иные инструменты в работе. Так же это будет полезно тем, кто хочет подготовиться к собеседованию и не ударить в грязь лицом, когда их будут гонять по реакту.
https://habr.com/ru/post/679452/
✍️ @React_lib
Learning_React_Modern_Patterns_for_Developing_React_Apps_by_Alex.pdf
4.7 MB
Learning React
Авторы: Alex Banks, Eve Porcello (2020)
Если вы хотите научиться создавать эффективные веб-приложения на React, данная книга для вас. Эта обновленная версия также идеально подходит для веб-разработчиков и инженеров-программистов, которые знают основы JavaScript, CSS и HTML. В ней представлены передовые практики и шаблоны для написания современного кода на React. Никаких предварительных знаний о React или функциональном JavaScript не требуется.
✍️ @React_lib
Авторы: Alex Banks, Eve Porcello (2020)
Если вы хотите научиться создавать эффективные веб-приложения на React, данная книга для вас. Эта обновленная версия также идеально подходит для веб-разработчиков и инженеров-программистов, которые знают основы JavaScript, CSS и HTML. В ней представлены передовые практики и шаблоны для написания современного кода на React. Никаких предварительных знаний о React или функциональном JavaScript не требуется.
✍️ @React_lib