React

Вещи, которые полезно знать о React.js Несколько слов о мотивации написать эту статью. Большинство вещей, о которых я тут хочу рассказать, вы можете узнать из документации React. Но проводя собеседования последние пару лет я понял, что многие разработчики о них не знают по каким-то причинам, может просто не вчитывались внимательно или этому не уделено достаточного внимания в самой документации. Так что я решил собрать тут несколько моментов и разобрать их, чтобы тот кто прочитает эту статью, начал понимать React чуть лучше и стал более осознанно использовать те или иные инструменты в работе. Так же это будет полезно тем, кто хочет подготовиться к собеседованию и не ударить в грязь лицом, когда их будут гонять по реакту. https://habr.com/ru/post/679452/ ✍️ @React_lib

Освой продвинутые инструменты фронтенда — изучи React! 6 февраля в 20:00 мск пройдет открытый урок «Хуки и мемоизация» в рамках онлайн-курса «React.js Developer» OTUS. На занятии мы научимся эффективно использовать возможности React.js и избегать лишних рендеров. Занятие будет полезно frontend JavaScript разработчикам и начинающим React разработчикам. Пройдите вступительный тест для регистрации https://otus.pw/ELJA/

Возможно, вам не нужен эффект Эффекты - это люк для выхода из парадигмы React. Они позволяют вам "выйти за пределы" React и синхронизировать ваши компоненты с какой-либо внешней системой, например, с не-React виджетом, сетью или DOM браузера. Если внешняя система не задействована (например, если вы хотите обновить состояние компонента при изменении некоторых реквизитов или состояния), вам не нужен Эффект. Удаление ненужных Эффектов сделает ваш код более понятным, быстрым в исполнении и менее подверженным ошибкам. https://beta.reactjs.org/learn/you-might-not-need-an-effect ✍️ @React_lib

Примеры использования React ref callback https://julesblom.com/writing/ref-callback-use-cases ✍️ @React_lib

🟡Хардкорный тест по JS — Ответьте на 19 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js со скидкой! 🚀За 4 месяца вы научитесь продвинутым возможностям Redux, Redux-Saga, Redux-thunk; созданию SPA-приложений и оптимизации их для production; чистому и лаконичному коду с TypeScript; применению интеграционных и юнит-тестов; работе в GraphQL, Apollo, Relay. 👉🏻ПРОЙТИ ТЕСТ ОНЛАЙН-КУРСА ПО REACT.JS

React Email Коллекция высококачественных нестилизованных компонентов для создания красивых электронных писем с помощью React и TypeScript. Сайт https://react.email/ Примеры https://react.email/examples ✍️ @React_lib

✍️ @React_lib

Используйте в React компоненты вместо функций ✍️ @React_lib

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

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