Публикации по теме 'react'
Создайте собственный перехватчик React для отслеживания ширины окна браузера (с TypeScript)
В последнее время я использую Custom React Hooks для очистки своей кодовой базы, и это творит чудеса для меня! Мне удалось переместить так много сложного повторяющегося кода в многоразовые пользовательские хуки.
В этой статье я рассмотрю пример того, как я использовал настраиваемую ловушку для отслеживания окна моего окна браузера в нескольких компонентах в моем приложении с помощью одной строки. Я большой сторонник использования TypeScript, поэтому, конечно, я буду использовать..
Создание клона WhatsApp с помощью Next.js Часть 12 Рендеринг сообщений
"Исходный код"
В последней части вы можете видеть, что поле ввода не находится внизу, так как окно сообщений еще не создано и занимает все пространство. Итак, в этой части мы сосредоточимся на создании ‹MessageContainer›, а также на рендеринге некоторых фиктивных сообщений.
СообщенияКонтейнер
Чтобы сделать простой MessagesContainer, просто создайте его с отступом, равным 20px, желто-коричневым цветом фона и с flex, равным 1, чтобы занять все пространство.
const..
Уменьшить функцию с другого вида
Примечание. Вся заслуга в коде этой статьи, использованном в этой статье, принадлежит г-ну Раджешу Пиллаи . /strong> https://www.youtube.com/channel/UCvhIKdT611F_ebrmIbQ9VDQ
Недавно один из моих сэров разместил видео на YouTube, и это заставило меня почувствовать, что знание этого материала — это другое, а использование его разными возможными способами — это другой способ.
он разместил видео о функции уменьшения и о том, как ее использовать
Функция уменьшения
функция..
Автоматизированное визуальное регрессионное тестирование с помощью React
Краткое руководство по автоматизированному визуальному регрессионному тестированию с помощью библиотеки « jsdom-screenshot »
Что такое автоматизированное визуальное регрессионное тестирование?
Лучше один раз увидеть , чем сто раз услышать . Я нашел хороший GIF, который прекрасно объясняет, что такое автоматическое визуальное регрессионное тестирование . Это было найдено на странице Визуальные тесты Storybook :
Что будет покрыто:
Предпосылки; Монтаж; Конфигурация;..
Реакция, часть 1, JSX
1. История 1 ?
Начнем с очень простого фрагмента кода:
function App() { return ‹h1›Привет!‹/h1›
Здесь ‹h1›Привет!‹/h1› рассматривается как JSX и был возвращен функцией App.
Поэтому, говоря простым языком, JSX — это то, что мы пишем в компоненте, чтобы сообщить React, что мы хотим показать на экране.
Согласно React Docs, JSX просто предоставляет синтаксический сахар для функции `React.createElement()`.
*Примечание. JSX на самом деле не выполняется в браузере,..
Как мы использовали React, чтобы повысить эффективность нашей продуктовой команды
Одним из любимцев семьи Palatinate Tech является Your Golf Travel ; веб-сайт, который специализируется на отдыхе в гольф в Великобритании и во всем мире. Мы стремимся обновлять цены и всю актуальную информацию, необходимую пользователям для принятия решения о том, куда отправиться в отпуск.
Одной из проблем, с которыми мы недавно столкнулись, было количество пакетов, которые не загружались динамически, а вместо этого были жестко закодированы (жестко закодированы!) на десятках страниц..
Проекционное картирование Три js-волокна и React
Очень простая реализация отображения проекции, выполненная в React с использованием шейдеров glsl, работает на любом типе поверхности, а также движется или вращается!
Вы можете проверить это в следующей песочнице -› https://codesandbox.io/s/czxbw
Краткий обзор сцены, созданной в React:
Всего несколькими строками кода я создаю сцену для нашего проекта как компонент React:
Сначала я импортирую необходимые библиотеки, CameraHelper из threejs, чтобы мы могли показать некоторые..
