Построение фильтра поиска в реальном времени в React: Пошаговое руководство
Когда я начал работать с React, одной из распространенных проблем, с которыми я столкнулся, была реализация функции фильтра поиска в реальном времени. Эта функция обновляет отображаемые элементы по мере ввода пользователем текста и показывает все элементы заново, если поисковый фильтр пуст. Поэтому в этом руководстве я расскажу вам о том, как создать эту функцию в React. Мы начнем со списка жестко заданных элементов, а затем перейдем к списку элементов, полученных из API.
https://dev.to/alais29/building-a-real-time-search-filter-in-react-a-step-by-step-guide-3lmm
✍️ @React_lib
Когда я начал работать с React, одной из распространенных проблем, с которыми я столкнулся, была реализация функции фильтра поиска в реальном времени. Эта функция обновляет отображаемые элементы по мере ввода пользователем текста и показывает все элементы заново, если поисковый фильтр пуст. Поэтому в этом руководстве я расскажу вам о том, как создать эту функцию в React. Мы начнем со списка жестко заданных элементов, а затем перейдем к списку элементов, полученных из API.
https://dev.to/alais29/building-a-real-time-search-filter-in-react-a-step-by-step-guide-3lmm
✍️ @React_lib
👍4
Расставание с SVG-in-JS
В декабре прошлого года вышла статья "Почему мы отказываемся от CSS-in-JS", в которой описывалось, почему больше не нужно использовать CSS в JS-бандлах. Однако CSS - не единственное, что попадает в JS-бандлы в наши дни, - SVG тоже попадают, как показывает Джейсон Миллер, автор Preact.
https://kurtextrem.de/posts/svg-in-js
✍️ @React_lib
В декабре прошлого года вышла статья "Почему мы отказываемся от CSS-in-JS", в которой описывалось, почему больше не нужно использовать CSS в JS-бандлах. Однако CSS - не единственное, что попадает в JS-бандлы в наши дни, - SVG тоже попадают, как показывает Джейсон Миллер, автор Preact.
https://kurtextrem.de/posts/svg-in-js
✍️ @React_lib
👍2
React.js with typescript
#1 : Introduction to React.js
#2 : Creating React App
#3 : React Components
#4 : React Variables in Components
#5 : Styling in React
#6 : Using Buttons and Click Events
#7 : Usage of useState() hook
источник
✍️ @React_lib
#1 : Introduction to React.js
#2 : Creating React App
#3 : React Components
#4 : React Variables in Components
#5 : Styling in React
#6 : Using Buttons and Click Events
#7 : Usage of useState() hook
источник
✍️ @React_lib
👍4
React.js with typescript
#8 : How to use react developer tools
#9 : Create list with useState and adding types to useState
#10 : React Props
#11 : Reusing same componets for different props
#12 :Passing functions as props
#13 : useEffect Hook
#14 : useEffect Hook Dependencies
источник
✍️ @React_lib
#8 : How to use react developer tools
#9 : Create list with useState and adding types to useState
#10 : React Props
#11 : Reusing same componets for different props
#12 :Passing functions as props
#13 : useEffect Hook
#14 : useEffect Hook Dependencies
источник
✍️ @React_lib
👍2
Создание бесшовного многоязычного пользовательского интерфейса в React.
Узнайте, как создавать приложения, которые могут отображать информацию на разных языках в зависимости от предпочтений пользователя. В этой статье мы рассмотрим процесс создания приложения погоды с многоязычной поддержкой с использованием реакции-i18next.
https://www.honeybadger.io/blog/creating-multi-language-user-interface-with-react/
✍️ @React_lib
Узнайте, как создавать приложения, которые могут отображать информацию на разных языках в зависимости от предпочтений пользователя. В этой статье мы рассмотрим процесс создания приложения погоды с многоязычной поддержкой с использованием реакции-i18next.
https://www.honeybadger.io/blog/creating-multi-language-user-interface-with-react/
✍️ @React_lib
❤1👍1
Эффективное тестирование хуков React с помощью Vitest
В этой статье рассматривается использование Vitest и библиотеки React Testing Library для модульного тестирования хуков React таким образом, чтобы их было легко поддерживать и расширять.
https://mayashavin.com/articles/test-react-hooks-with-vitest
✍️ @React_lib
В этой статье рассматривается использование Vitest и библиотеки React Testing Library для модульного тестирования хуков React таким образом, чтобы их было легко поддерживать и расширять.
https://mayashavin.com/articles/test-react-hooks-with-vitest
✍️ @React_lib
👍3
Объявление типов JSX в TypeScript 5.1
Новая функция, описанная как «отдельная проверка типов между элементами JSX и типами тегов JSX», появилась в TypeScript 5.1. Эта функция позволяет библиотекам контролировать, какие типы используются для элементов JSX. В этой статье я расскажу, почему это важно и как работает эта новая функция.
https://blog.logrocket.com/declaring-jsx-types-typescript-5-1
✍️ @React_lib
Новая функция, описанная как «отдельная проверка типов между элементами JSX и типами тегов JSX», появилась в TypeScript 5.1. Эта функция позволяет библиотекам контролировать, какие типы используются для элементов JSX. В этой статье я расскажу, почему это важно и как работает эта новая функция.
https://blog.logrocket.com/declaring-jsx-types-typescript-5-1
✍️ @React_lib
Не наступил ли у React момент переписывания Angular.js на Angular?
В 2012 году Angular.js серьёзно поменял frontend-разработку. Фреймворку от Google тогда очень быстро удалось снискать популярность у разработчиков.
И вот уже буквально через два года его разработчики решили объявить о выходе новой версии под именем Angular 2. Версия оказалось написанной полностью с нуля и не имела совместимости с предыдущей даже близко. Большинство разработчиков, не исключая и вашего покорного слугу, идея переписывать их приложения явно не прельщала. Писать приложения на старой версии, которая с припиской JS, тоже было так себе вариантом. Конкурирующие фреймворки уже были ничуть не хуже.
Rus https://habr.com/ru/articles/746918/
Eng https://marmelab.com/blog/2023/06/05/react-angularjs-moment.html
✍️ @React_lib
В 2012 году Angular.js серьёзно поменял frontend-разработку. Фреймворку от Google тогда очень быстро удалось снискать популярность у разработчиков.
И вот уже буквально через два года его разработчики решили объявить о выходе новой версии под именем Angular 2. Версия оказалось написанной полностью с нуля и не имела совместимости с предыдущей даже близко. Большинство разработчиков, не исключая и вашего покорного слугу, идея переписывать их приложения явно не прельщала. Писать приложения на старой версии, которая с припиской JS, тоже было так себе вариантом. Конкурирующие фреймворки уже были ничуть не хуже.
Rus https://habr.com/ru/articles/746918/
Eng https://marmelab.com/blog/2023/06/05/react-angularjs-moment.html
✍️ @React_lib
👍1