React

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

React JavaScript Framework for Beginners – Project-Based Course

Learn React in this full course for beginners. React is one of the most popular JavaScript frameworks and this course is the perfect place to start your learning journey. You will learn everything you need to know to get started with React by building three different projects.

https://www.youtube.com/watch?v=u6gSSpfsoOQ

✍️ @React_lib

VSCode Glean

Allows extracting JSX into new component
Allows converting Class Components to Functional Components and vice-verse
Allows wrapping JSX with conditional
Allows renaming state variables and their setters simultaneously.
Allows wrapping code with useMemo, useCallback or useEffect
Moving code between files
Typescript support
ES2015 modules support
CommonJS modules support

https://marketplace.visualstudio.com/items?itemName=wix.glean

✍️ @React_lib

Повышение производительности приложений React с помощью React Profiler

Руководство по измерению и улучшению производительности React-приложений с помощью React Profiler.
Сопровождается веб-приложением, которое позволяет легко следить за ходом работы.

https://indepth.dev/posts/1497/react-profiler

✍️ @React_lib

Remotion: фреймворк для создания видео в React

https://blog.logrocket.com/remotion-a-framework-for-making-videos-in-react/

✍️ @React_lib