React

Шахматы на 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

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

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

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

Signals — лучшее решение для управления состоянием приложения? Отвечает разработчик inDrive Фронтенд-разработчик inDrive в статье на Хабре поделился мнением о новой библиотеке от команды Preact под названием Signals. Одна из ее главных особенностей — работа не только с Preact, но и с React, Svelte и многими другими решениями. О других возможностях и преимуществах читайте в статье.

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

🎄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 #хакатон #идеатон

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

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

Building a React portfolio website with Locomotive Scroll https://blog.logrocket.com/building-react-portfolio-website-locomotive-scroll/ ✍️ @React_lib

Frontend meetup (Online) 1. Организация сложных многоступенчатых форм на VueJS - Роман Троицкий, Комус-тех Расскажу про опыт формирования формы покупки полиса осаго со словарями, подсказками и тп, продвинутый форм-билдер vue2 - vue3 2. Новые рецепты. React(Vue) Query вместо вашего любимого state manager - Паромов Евгений, Evrone Рассмотрим как с React Query можно выкинуть тонны сложного, ненужного, страшного кода. И сделать ваши компоненты действительно переиспользуемыми 3. Dprint - Форматирование на максимальной скорости - Поляков Андрей, БФТ Быстрый форматер кода написанный на языке Rust. ➖➖➖ 🗓 30 ноября, начало в 19:00 мск, Среда 🌐 ОНЛАЙН ✅ Регистрация на мероприятие 📢 Наш телеграмм каналл с анонсами митапов.

Как создать функцию фильтрации в виде выпадающего списка в React ✍️ @React_lib

Create a custom debounce Hook in React https://blog.logrocket.com/create-custom-debounce-hook-react/ ✍️ @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 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

Тетрис на 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

Удалённая работа и фриланс становятся всё более популярными. Рынок заполнился горе-фрилансерами, которые демпенгуют и забирают себе заказы. Хочешь научиться работать грамотно, развиваться и забирать самые хорошие заказы? Подписывайся на блог о правильных подходах в Freelance, аутсорсинге и удалёнке https://t.me/+7-2eSP81MpxlMmQy Также мы будем скидывать заполнившим анкету фрилансерам заказы от проверенных заказчиков. Например сейчас есть много заказов для программистов 😏 Ссылка на канал: https://t.me/+7-2eSP81MpxlMmQy

Most Popular React Tech Stack in 2022 https://profy.dev/article/react-tech-stack ✍️ @React_lib

React TypeScript Cheatsheets https://react-typescript-cheatsheet.netlify.app/ ✍️ @React_lib