React

Как загрузить файл в React Если вы что-то создаете с помощью React, то рано или поздно столкнетесь с проблемой загрузки файлов. Не волнуйтесь, написать логику загрузки файлов в React очень просто, и в этом посте мы покажем вам, как именно это сделать. Мы рассмотрим загрузку одного файла, загрузку нескольких файлов, а также посмотрим, как можно использовать стороннюю библиотеку, которая сделает всю работу за вас. Но сначала давайте рассмотрим загрузку одного файла в React с помощью fetch. https://pragmaticpineapple.com/how-to-upload-file-in-react/ ✍️ @React_lib

Awesome React Коллекция удивительных вещей, связанных с экосистемой React React General Resources React Tutorials React Development Tools React Frameworks React Component Libraries React State Management and Data Fetching React Styling React Routing React Libraries React Testing React Awesome Components React Components Sandboxes React Forms React Tables and Grids React Maps React Charts React Renderers React Internationalization React Graphics and Animations React Integration React Real Apps React Native General Resources React Native Navigation React Native Awesome Components React Native Libraries https://github.com/enaqx/awesome-react ✍️ @React_lib

TypeScript Handbook для React Developers – Создаем безопасное приложение Todo К концу этого урока вы будете хорошо разбираться в TypeScript и будете готовы разрабатывать безопасные приложения React. Итак, без лишних слов приступим! https://www.freecodecamp.org/news/typescript-tutorial-for-react-developers/ ✍️ @React_lib

❓Как разработчику на JavaScript оптимизировать некоторые задачи? Узнайте на бесплатном открытом уроке «Построение графических приложений с применением библиотеки Konva.js» от OTUS. На вебинаре: - научимся использовать konva; - разработаем небольшое приложение; - разберём отличия в разработке приложений на основе vdom и без него; - научимся сочетать оба подхода к разработке фронта. Занятие пройдёт 11 декабря в 20:00 мск и будет приурочено к старту курса «JavaScript Developer. Professional». После урока вы сможете продолжить обучение в рассрочку на специальных условиях. Для бесплатного участия пройдите короткое тестирование прямо сейчас: https://vk.cc/ct1UXB Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Infinite scroll (бесконечный скролл) +Virtualization (виртуализация) на примере ReactJS+ RTK Query На сегодняшний день любое уважающее себя предприятие, будь то магазин строительных товаров или компания по предоставлению услуг в сфере бизнеса, все они стремятся «выложить» свои товары и услуги в интернет. Это и понятно – мы живем в век бурно развивающихся технологий и доступ в интернет имеет более 65% населения мира (около 5.3 млрд. человек), а к 2025 году это число увеличится до 6.54 млрд. (внушительно, не правда ли?). Так, о чем я, всех их нужно обслуживать, всем им нужно предлагать услуги, товары и т.д. Как говорится: «На вкус и цвет – товарища нет» и правда сколько людей – столько мнений, а в нашем случае товаров и услуг. На фоне этого возникает резонный вопрос: «А как все это отобразить у меня на сайте, чтобы пользователь не ждал до следующего года загрузки страницы сайта, когда к тому времени успеют появиться еще товары, которые необходимо будет подгрузить?». При такой картине мира и самых оптимистичных прогнозах о темпах появления новых вещей, мы имеем неосторожность войти в некую рекурсию. https://habr.com/ru/articles/764626/ ✍️ @React_lib

Все хуки и концепты React в одной статье В первую очередь React это JS библиотека, а не полноценный фреймворк, так что для создания полноценного веб приложения тебе нужно знать много дополнительных вещей, чтобы использовать их вместе с React. В этой статье пойдет речь о React концептах, хуках и, конечно 😊 , хороших практиках. Мы используем React для создания переиспользуемых компонентов, которые могут логично использоваться для создания UI. Создание компонентов в React также просто, как и создание функций 🤩 . Для примера 👇🏻, ниже показан простой react компонент, в который мы отправляем данные как аргумент, который можно легко указать внутри функции. function Component(props){ return <h1>{props.text}</h1> } https://habr.com/ru/articles/660573/ original https://dev.to/nyctonio/all-react-hooks-and-concepts-in-a-single-post-1daf ✍️ @React_lib

Использование спрайтовых иконок svg в React Существует множество способов использовать svg-иконки в приложениях React. Самый интуитивный, но и самый худший - это писать код svg непосредственно в компоненте в виде JSX. Я не буду вдаваться во все причины, так как другие люди уже проделали большую работу по объяснению этого, но в целом это неэффективно и значительно увеличивает размер вашего пакета. https://www.jacobparis.com/content/svg-icons ✍️ @React_lib

🎯 Тест по Node JS от OTUS 🚀 Ответьте на 20 вопросов и проверьте, насколько вы готовы к обучению на углубленном курсе - Node JS Developer от OTUS Курс рассчитан на frontend-разработчиков или backend-разработчиков со знанием Javascript 🔥 РЕЗУЛЬТАТ ПРОХОЖДЕНИЯ КУРСА Разработка серверных приложений любой сложности на Node.js с использованием Express, TypeScript, GraphQl, Apollo и Nest.js Время прохождения теста ограниченно 30 минут 👉 ПРОЙТИ ТЕСТ Курс доступен в рассрочку. 🎁 Пройдете успешно тест, получите доступ к открытым урокам курса. Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Частично управляемые компоненты: Декларативный паттерн проектирования в React В React принято различать Controlled и Uncontrolled компоненты. Но реальный мир не такой уж черно-белый... Вкратце: Uncontrolled компоненты управляют изменениями внутри себя, внутренне. Controlled компоненты управляют своими изменениями извне, изнутри. Недавно я стал автором React-компонента с древовидным представлением под названием react-arborist. После работы над таким сложным компонентом я почувствовал отсутствие необходимой концепции в нашем React-сообществе. https://www.jameskerr.blog/posts/partially-controlled-react-components/ ✍️ @React_lib

Понимание компонентов React Server Изучите основы React Server Components, чтобы лучше понять, зачем (и когда) их внедрять. https://vercel.com/blog/understanding-react-server-components ✍️ @React_lib

🔥Тест по React JS от OTUS🔥 — Ответьте на 19 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js со скидкой! 🚀ПРОЙТИ ТЕСТ ОНЛАЙН-КУРСА ПО REACT.JS https://vk.cc/csCX4h Курс доступен в рассрочку. 🎁Пройдете успешно тест, получите доступ к открытым урокам курса. Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Совет Проблема: Если в приложении React используются providers, то может потребоваться повторить их конфигурацию в нескольких местах: 1. The app's root 2. Storybook 3. Tests Решение: Создадим компонент AppProviders. Тогда мы сможем использовать его в нескольких местах. ✍️ @React_lib

Дорожная карта для React разработчика ✍️ @React_lib

❌ Избегайте использования useState() для сложного управления состояниями в React ✅ Вместо этого используйте useReducer ✍️ @React_lib

Как React 18 повышает производительность приложений В React 18 появились функции одновременной работы, которые кардинально меняют способ визуализации приложений React. Мы рассмотрим, как эти последние возможности влияют на производительность приложения и улучшают ее. Сначала сделаем небольшой шаг назад, чтобы понять основы длительных задач и соответствующих измерений производительности. https://vercel.com/blog/how-react-18-improves-application-performance ✍️ @React_lib

Информация для тех, кто хочет попробовать что-то новое, поменять роль или индустрию! Самолет вместе с агентством Ар запустили бот «Твой день». Это полноценный симулятор профессий, который поможет узнать о позициях frontend- и backend-разработчика (Python) в команде известного девелопера. Еще и о корпоративной культуре расскажут! Интересно? Переходите в @arrr_day_bot, выбирайте понравившийся проект от Самолета и выполняйте задания! В конце ребята делятся открытыми вакансиями. Симулятор работает до 18 ноября, так что успевайте!

⚛️ Когда разделять JSX на новые компоненты? Когда создавать пользовательские хуки? Как абстрагировать уровень данных от представления? ✍️ @React_lib

⚛️ Совет по React Отложите создание non-primitive значений, если вы используете их в массиве зависимостей ✍️ @React_lib

Приходите на бесплатный открытый урок «Nest.Js - мощный фреймворк разработки веб приложений» от OTUS. Занятие пройдёт 20 ноября в 20:00 мск в рамках курса «Node.js Developer». После него вы сможете продолжить обучение на специальных условиях. 🎯 Спикер: Арсений Высоцкий, Teamlead в большой международной компании. Больше десяти лет разрабатывает веб-приложения. На занятии разберем: - Рассмотрим архитектурные принципы, на которых основан Nest.Js, включая внедрение зависимостей (Dependency Injection) и модульность; - Узнаете о создании маршрутов (routes) в Nest.Js и как они связаны с контроллерами; - Рассмотрим, как использовать middleware в Nest.Js для обработки промежуточных операций в приложении; - Покажем, как взаимодействовать с различными системами баз данных в Nest.Js, включая MongoDB, PostgreSQL, MySQL и другие; - Рассмотрим методы и инструменты для тестирования и отладки приложений Nest.Js; В конце вебинара будет предоставлено время для ответов на вопросы участников. Вы сможете задать свои вопросы о Nest.Js и получить консультации от опытного специалиста. 👉Регистрируйтесь бесплатно прямо сейчас и ставьте событие в календарь, чтобы ничего не пропустить: https://vk.cc/cseW4p Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru