Переход с useState на useReducer в React Hook
https://hackernoon.com/migrating-from-usestate-to-usereducer-in-react-hooks?source=rss
https://hackernoon.com/migrating-from-usestate-to-usereducer-in-react-hooks?source=rss
Hackernoon
Migrating from useState to useReducer in React Hooks | HackerNoon
useState is a simple hook for single state. useReducer is a powerful hook for complex state. Here's how to convert from useState to useReducer.
Лучший путь обучения React с серверными компонентами
Мне всегда нравилось делиться своими знаниями. Когда я люблю язык, библиотеку или фреймворк, я больше, чем исследую каждую мельчайшую деталь, я думаю о том, как я могу помочь людям изучить их и полюбить их так же сильно, как и я. https://scastiel.dev/better-learning-path-react
Мне всегда нравилось делиться своими знаниями. Когда я люблю язык, библиотеку или фреймворк, я больше, чем исследую каждую мельчайшую деталь, я думаю о том, как я могу помочь людям изучить их и полюбить их так же сильно, как и я. https://scastiel.dev/better-learning-path-react
scastiel.dev
A better learning path for React with server components
What if we took advantage of React Server Components not only to improve how we use React, but also how we help people learn it from the beginning?
Создание фильтра поиска в реальном времени в React: пошаговое руководство
1. Введение
2. Требования
3. Шаг 1. Настройка проекта
4. Шаг 2. Создание входных данных
5. Шаг 3. Визуализация списка элементов
6. Шаг 4. Создание функции фильтрации
7. Шаг 5. Получение элементов из API и их фильтрация
8. Шаг 6: Небольшой рефакторинг (Бонус)
8.1. Компонент ItemList
8.2. Входной компонент
8.3. Вызов API
9. Заключение
https://dev.to/alais29/building-a-real-time-search-filter-in-react-a-step-by-step-guide-3lmm
1. Введение
2. Требования
3. Шаг 1. Настройка проекта
4. Шаг 2. Создание входных данных
5. Шаг 3. Визуализация списка элементов
6. Шаг 4. Создание функции фильтрации
7. Шаг 5. Получение элементов из API и их фильтрация
8. Шаг 6: Небольшой рефакторинг (Бонус)
8.1. Компонент ItemList
8.2. Входной компонент
8.3. Вызов API
9. Заключение
https://dev.to/alais29/building-a-real-time-search-filter-in-react-a-step-by-step-guide-3lmm
DEV Community
Building a Real-Time Search Filter in React: A Step-by-Step Guide
Table of Contents 1. Introduction 2. Requirements 3. Step 1: Setting Up the Project 4....
Как повторно использовать и делиться компонентами React в 2023 году: пошаговое руководство
В этой статье я покажу вам отличный инструмент, который позволит вам создавать, повторно использовать и делиться компонентами React в одиночку или в составе команды.
https://itnext.io/how-to-reuse-and-share-react-components-in-2023-a-step-by-step-guide-85642e543afa
В этой статье я покажу вам отличный инструмент, который позволит вам создавать, повторно использовать и делиться компонентами React в одиночку или в составе команды.
https://itnext.io/how-to-reuse-and-share-react-components-in-2023-a-step-by-step-guide-85642e543afa
Medium
How to Reuse and Share React Components in 2023: A Step-by-Step Guide
Learn how easy code sharing and collaboration can be, with Bit’s intuitive approach to reusable React components.
Телепортация в React: позиционирование, контекст стекирования и порталы
Изучаем, как работает позиционирование CSS, что такое Stacking Context, как избежать переполнения: скрытого с помощью CSS, почему мы не можем делать все с помощью CSS и нуждаемся в порталах, как работают порталы.
https://www.developerway.com/posts/positioning-and-portals-in-react
Изучаем, как работает позиционирование CSS, что такое Stacking Context, как избежать переполнения: скрытого с помощью CSS, почему мы не можем делать все с помощью CSS и нуждаемся в порталах, как работают порталы.
https://www.developerway.com/posts/positioning-and-portals-in-react
Developerway
Teleportation in React: Positioning, Stacking Context, and Portals
How CSS positioning works, what is Stacking Context, how to escape overflow:hidden with CSS, why we can't do everything with CSS and need Portals, how Portals work
Я хотел поделиться с вами некоторыми мыслями о классной библиотеке под названием Preact. Основная цель этой статьи — дать вам дружественное введение в Preact, которое может оказаться полезным, если вы уже знакомы с React.
https://hackernoon.com/why-react-developers-love-preact
https://hackernoon.com/why-react-developers-love-preact
Hackernoon
React Developers Love Preact, Here's Why
Discover the power of Preact, a lightweight alternative to React, and unlock a new level of performance for your web applications.
Сила виртуального DOM в React: подробное объяснение
В этой статье мы обсудим виртуальный DOM и то, как он работает. Но чтобы понять виртуальный DOM, во-первых, мы должны знать, как страница отображается в браузере.
https://www.syncfusion.com/blogs/post/react-virtual-dom.aspx
В этой статье мы обсудим виртуальный DOM и то, как он работает. Но чтобы понять виртуальный DOM, во-первых, мы должны знать, как страница отображается в браузере.
https://www.syncfusion.com/blogs/post/react-virtual-dom.aspx
3+1 распространенные ошибки React, которые приводят к ненужным повторным рендерам
Хотя мы часто используем синтаксис функций и компонентов в наших ежедневных процедурах кодирования, полностью ли мы осознаем, как они манипулируют DOM и сколько раз они повторно рендерятся? Давайте погрузимся в эффективное использование функций запоминания, среди других методов.
Помните, что универсального решения не существует, поэтому тщательное планирование и оценка имеют решающее значение. Всегда спрашивайте себя: будет ли мой компонент повторно запускать, повторно отображать или повторно инициализировать эту функцию при каждом обновлении реквизита? Или каждый раз, когда он вызывается?
https://medium.com/@rickmint/3-1-react-common-mistakes-that-triggers-unnecessary-re-renders-72d1e993d7bf
Хотя мы часто используем синтаксис функций и компонентов в наших ежедневных процедурах кодирования, полностью ли мы осознаем, как они манипулируют DOM и сколько раз они повторно рендерятся? Давайте погрузимся в эффективное использование функций запоминания, среди других методов.
Помните, что универсального решения не существует, поэтому тщательное планирование и оценка имеют решающее значение. Всегда спрашивайте себя: будет ли мой компонент повторно запускать, повторно отображать или повторно инициализировать эту функцию при каждом обновлении реквизита? Или каждый раз, когда он вызывается?
https://medium.com/@rickmint/3-1-react-common-mistakes-that-triggers-unnecessary-re-renders-72d1e993d7bf
Medium
3+1 React common mistakes that trigger unnecessary re-renders
Though we frequently use functions and components syntax in our daily coding routines, are we fully aware of how they manipulate the DOM…
Справочник по TypeScript для разработчиков React — Как создать приложение Todo с типобезопасностью
Если вы разработчик React и хотите изучить TypeScript или усовершенствовать свои навыки с его помощью, это руководство именно для вас. Я проведу вас через использование TypeScript в приложении React, создав классическое приложение todo.
Я собираюсь рассказать обо всем, что вам нужно знать, чтобы начать работу с TypeScript в качестве разработчика React. Вы узнаете, как обрабатывать состояние и реквизиты со строгой типизацией, как создавать компоненты React с помощью TypeScript, как использовать TypeScript с React Hooks и как использовать TypeScript с Context API.
К концу этого руководства вы будете иметь четкое представление о TypeScript и будете готовы с уверенностью разрабатывать безопасные для типов приложения React. Итак, без лишних слов приступим!
https://www.freecodecamp.org/news/typescript-tutorial-for-react-developers/
Если вы разработчик React и хотите изучить TypeScript или усовершенствовать свои навыки с его помощью, это руководство именно для вас. Я проведу вас через использование TypeScript в приложении React, создав классическое приложение todo.
Я собираюсь рассказать обо всем, что вам нужно знать, чтобы начать работу с TypeScript в качестве разработчика React. Вы узнаете, как обрабатывать состояние и реквизиты со строгой типизацией, как создавать компоненты React с помощью TypeScript, как использовать TypeScript с React Hooks и как использовать TypeScript с Context API.
К концу этого руководства вы будете иметь четкое представление о TypeScript и будете готовы с уверенностью разрабатывать безопасные для типов приложения React. Итак, без лишних слов приступим!
https://www.freecodecamp.org/news/typescript-tutorial-for-react-developers/
Forwarded from Angular Vue js React
Осваивайте принципы SOLID как свои пять пальцев всего за 8 минут!
В этом блоге я продемонстрирую реализацию принципов SOLID в приложении React. К концу этой статьи вы полностью усвоите принципы SOLID. https://hackernoon.com/mastering-solid-principles-like-the-back-of-your-hand-in-just-8-minutes?source=rss
В этом блоге я продемонстрирую реализацию принципов SOLID в приложении React. К концу этой статьи вы полностью усвоите принципы SOLID. https://hackernoon.com/mastering-solid-principles-like-the-back-of-your-hand-in-just-8-minutes?source=rss
Hackernoon
Mastering SOLID Principles Like the Back of Your Hand in Just 8 Minutes!
Boost Performance, Maintainability, and Scalability with SOLID Principles in React Applications!
5 самых известных угроз безопасности React и способы их решения
Как одна из самых популярных библиотек JavaScript, React стала отраслевым стандартом для разработки одностраничных и мобильных приложений, а лично мне больше всего нравится библиотека программирования. Он такой простой, но сложный, легкий в освоении и структурированный: неудивительно, что везде появляются, как грибы, приложения React.
Однако, как и любая другая технология, она не застрахована от потенциальных уязвимостей системы безопасности; знание их позволит вам быть готовым и не допустить, чтобы один или несколько из них повлияли на вашу работу и веб-сайт.
https://medium.com/@rickmint/5-most-famous-react-security-threats-and-how-to-solve-them-%EF%B8%8F-79871e774f7f
Как одна из самых популярных библиотек JavaScript, React стала отраслевым стандартом для разработки одностраничных и мобильных приложений, а лично мне больше всего нравится библиотека программирования. Он такой простой, но сложный, легкий в освоении и структурированный: неудивительно, что везде появляются, как грибы, приложения React.
Однако, как и любая другая технология, она не застрахована от потенциальных уязвимостей системы безопасности; знание их позволит вам быть готовым и не допустить, чтобы один или несколько из них повлияли на вашу работу и веб-сайт.
https://medium.com/@rickmint/5-most-famous-react-security-threats-and-how-to-solve-them-%EF%B8%8F-79871e774f7f
Как загрузить файл в React
Мы расскажем, как загрузить один файл, загрузить несколько файлов и посмотрим, как вы можете использовать стороннюю библиотеку, которая сделает всю тяжелую работу за вас. Но сначала давайте погрузимся в загрузку одного файла в React с помощью fetch. https://pragmaticpineapple.com/how-to-upload-file-in-react/
Мы расскажем, как загрузить один файл, загрузить несколько файлов и посмотрим, как вы можете использовать стороннюю библиотеку, которая сделает всю тяжелую работу за вас. Но сначала давайте погрузимся в загрузку одного файла в React с помощью fetch. https://pragmaticpineapple.com/how-to-upload-file-in-react/
Pragmaticpineapple
How to Upload File in React
In this article you will learn how to write a file-uploading logic in React.
Как React 18 повышает производительность приложений
https://vercel.com/blog/how-react-18-improves-application-performance
https://vercel.com/blog/how-react-18-improves-application-performance
Vercel
How React 18 Improves Application Performance - Vercel
Learn how React 18's concurrent features like Transitions, Suspense, and React Server Components improve application performance.
Prismane / Создавайте отличные приложения, сверхбыстро 107+ React компонентов 484+ готовых тем 20+ хуков React https://www.prismane.io/
www.prismane.io
Build stunning user interfaces with ease using 107+ components, 484+ themes, and 20+ custom hooks. Level up your productivity and create exceptional experiences. Join the Prismane community today!
Как мы создали агент 🤖 кода GPT, который генерирует полнофункциональные веб-приложения в React & Node.js, объясняется просто
https://dev.to/wasp/how-we-built-a-gpt-code-agent-that-generates-full-stack-web-apps-in-react-nodejs-explained-simply-4f9
https://dev.to/wasp/how-we-built-a-gpt-code-agent-that-generates-full-stack-web-apps-in-react-nodejs-explained-simply-4f9
DEV Community
How we built a GPT code agent 🤖 that generates full-stack web apps in React & Node.js, explained simply
We created GPT Web App Generator, which lets you shortly describe the web app you would like to...
Как React 18 улучшает производительность приложения.
React 18 представил конкурентные (concurrent) возможности, которые радикально меняют способ рендеринга приложений. В этой статье мы рассмотрим, как эти возможности улучшают производительность приложения.
Начнем с повторения основ "долгих (долго выполняющихся) задач" (long tasks) и соответствующих метрик производительности.
Читать дальше →https://habr.com/ru/articles/749866/
React 18 представил конкурентные (concurrent) возможности, которые радикально меняют способ рендеринга приложений. В этой статье мы рассмотрим, как эти возможности улучшают производительность приложения.
Начнем с повторения основ "долгих (долго выполняющихся) задач" (long tasks) и соответствующих метрик производительности.
Читать дальше →https://habr.com/ru/articles/749866/
Хабр
Как React 18 улучшает производительность приложения
React 18 представил конкурентные (concurrent) возможности, которые радикально меняют способ рендеринга приложений. В этой статье мы рассмотрим, как эти возможности улучшают производительность...
Создание чат-бота для доставки кофе с помощью React, ChatGPT и TypeChat 🤖
https://dev.to/dev_bre/building-a-coffe-delivery-chatbot-with-react-chatgpt-and-typechat-1go0
https://dev.to/dev_bre/building-a-coffe-delivery-chatbot-with-react-chatgpt-and-typechat-1go0
DEV Community
Building a coffee delivery chatbot with React, ChatGPT and TypeChat 🤖
TL;DR In this article I am going to show how to build a coffee delivery service in React...