Удалённая работа и фриланс становятся всё более популярными. Рынок заполнился горе-фрилансерами, которые демпенгуют и забирают себе заказы.
Хочешь научиться работать грамотно, развиваться и забирать самые хорошие заказы?
Подписывайся на блог о правильных подходах в Freelance, аутсорсинге и удалёнке https://t.me/+7-2eSP81MpxlMmQy
Также мы будем скидывать заполнившим анкету фрилансерам заказы от проверенных заказчиков. Например сейчас есть много заказов для программистов 😏
Ссылка на канал: https://t.me/+7-2eSP81MpxlMmQy
Хочешь научиться работать грамотно, развиваться и забирать самые хорошие заказы?
Подписывайся на блог о правильных подходах в Freelance, аутсорсинге и удалёнке https://t.me/+7-2eSP81MpxlMmQy
Также мы будем скидывать заполнившим анкету фрилансерам заказы от проверенных заказчиков. Например сейчас есть много заказов для программистов 😏
Ссылка на канал: https://t.me/+7-2eSP81MpxlMmQy
Media is too big
VIEW IN TELEGRAM
Тетрис на React
00:00 Introduction
03:40 create-react-app and tooling
06:57 Scaffolding Components
15:49 Stage and Tetrominos
32:05 Styling with Styled Components
57:19 usePlayer and useStage
1:12:51 Stage update and player movement
1:37:02 Collision Detection
1:50:46 Player RotationG
2:04:12 Clear Rows
2:11:37 drop with useInterval
2:18:47 useGameStatus and React.memo
https://github.com/weibenfalk/react-tetris-starter-files
✍️ @React_lib
00:00 Introduction
03:40 create-react-app and tooling
06:57 Scaffolding Components
15:49 Stage and Tetrominos
32:05 Styling with Styled Components
57:19 usePlayer and useStage
1:12:51 Stage update and player movement
1:37:02 Collision Detection
1:50:46 Player RotationG
2:04:12 Clear Rows
2:11:37 drop with useInterval
2:18:47 useGameStatus and React.memo
https://github.com/weibenfalk/react-tetris-starter-files
✍️ @React_lib
Media is too big
VIEW IN TELEGRAM
React Hooks
useCallback STOPS this React MISTAKE | useCallback React Hooks Tutorial
useMemo Explained | React Hooks useMemo Tutorial
BUILD a React Timer with useRef | React Hooks useRef Tutorial
useReducer is BETTER than useState | React Hook useReducer Tutorial
useLayoutEffect vs useEffect | React Hooks Tutorial
useImperativeHandle Explained with an Example | React Hooks Tutorial
The Built-in React Hook 🤯 NO ONE talks about!
Use Axios with React Hooks for Async-Await Requests
React v18 Hooks - useTransition vs useDeferredValue Examples & Comparison
https://www.youtube.com/playlist?list=PL0Zuz27SZ-6PSdiQpSxO9zxvB0ns6m3ta
✍️ @React_lib
useCallback STOPS this React MISTAKE | useCallback React Hooks Tutorial
useMemo Explained | React Hooks useMemo Tutorial
BUILD a React Timer with useRef | React Hooks useRef Tutorial
useReducer is BETTER than useState | React Hook useReducer Tutorial
useLayoutEffect vs useEffect | React Hooks Tutorial
useImperativeHandle Explained with an Example | React Hooks Tutorial
The Built-in React Hook 🤯 NO ONE talks about!
Use Axios with React Hooks for Async-Await Requests
React v18 Hooks - useTransition vs useDeferredValue Examples & Comparison
https://www.youtube.com/playlist?list=PL0Zuz27SZ-6PSdiQpSxO9zxvB0ns6m3ta
✍️ @React_lib
Используем Axios в React
В этой статье вы узнаете о том, как в React использовать такую удобную библиотеку, как Axios. В ней написано об интеграции Axios, о правильном использовании запросов в жизненных циклах React’а и конечно же о самых популярных типах запросов, вместе с обработчиком ошибок.
Rus https://medium.com/@stasonmars/%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D1%83%D0%B5%D0%BC-axios-%D0%B2-react-453c04ed0654
Eng https://designrevision.com/react-axios/
✍️ @React_lib
В этой статье вы узнаете о том, как в React использовать такую удобную библиотеку, как Axios. В ней написано об интеграции Axios, о правильном использовании запросов в жизненных циклах React’а и конечно же о самых популярных типах запросов, вместе с обработчиком ошибок.
Rus https://medium.com/@stasonmars/%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D1%83%D0%B5%D0%BC-axios-%D0%B2-react-453c04ed0654
Eng https://designrevision.com/react-axios/
✍️ @React_lib
Create a custom debounce Hook in React
https://blog.logrocket.com/create-custom-debounce-hook-react/
✍️ @React_lib
https://blog.logrocket.com/create-custom-debounce-hook-react/
✍️ @React_lib
Frontend meetup (Online)
1. Организация сложных многоступенчатых форм на VueJS - Роман Троицкий, Комус-тех
Расскажу про опыт формирования формы покупки полиса осаго со словарями, подсказками и тп, продвинутый форм-билдер vue2 - vue3
2. Новые рецепты. React(Vue) Query вместо вашего любимого state manager - Паромов Евгений, Evrone
Рассмотрим как с React Query можно выкинуть тонны сложного, ненужного, страшного кода. И сделать ваши компоненты действительно переиспользуемыми
3. Dprint - Форматирование на максимальной скорости - Поляков Андрей, БФТ
Быстрый форматер кода написанный на языке Rust.
➖➖➖
🗓 30 ноября, начало в 19:00 мск, Среда
🌐 ОНЛАЙН
✅ Регистрация на мероприятие
📢 Наш телеграмм каналл с анонсами митапов.
1. Организация сложных многоступенчатых форм на VueJS - Роман Троицкий, Комус-тех
Расскажу про опыт формирования формы покупки полиса осаго со словарями, подсказками и тп, продвинутый форм-билдер vue2 - vue3
2. Новые рецепты. React(Vue) Query вместо вашего любимого state manager - Паромов Евгений, Evrone
Рассмотрим как с React Query можно выкинуть тонны сложного, ненужного, страшного кода. И сделать ваши компоненты действительно переиспользуемыми
3. Dprint - Форматирование на максимальной скорости - Поляков Андрей, БФТ
Быстрый форматер кода написанный на языке Rust.
➖➖➖
🗓 30 ноября, начало в 19:00 мск, Среда
🌐 ОНЛАЙН
✅ Регистрация на мероприятие
📢 Наш телеграмм каналл с анонсами митапов.
Building a React portfolio website with Locomotive Scroll
https://blog.logrocket.com/building-react-portfolio-website-locomotive-scroll/
✍️ @React_lib
https://blog.logrocket.com/building-react-portfolio-website-locomotive-scroll/
✍️ @React_lib
CSS Animations as a DOM-Based Animations Framework
https://medium.com/bbc-product-technology/css-animations-as-a-dom-based-animations-framework-d6ef582c033a
✍️ @React_lib
https://medium.com/bbc-product-technology/css-animations-as-a-dom-based-animations-framework-d6ef582c033a
✍️ @React_lib
How to Build a Code Editor with React that Compiles and Executes in 40+ Languages
https://www.freecodecamp.org/news/how-to-build-react-based-code-editor/
✍️ @React_lib
https://www.freecodecamp.org/news/how-to-build-react-based-code-editor/
✍️ @React_lib
🎄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