Публікації на тему 'react'
Створіть спеціальний хук React для відстеження ширини вікна браузера (за допомогою TypeScript)
Останнім часом я використовую користувацькі React Hooks, щоб очистити свою кодову базу, і це творить зі мною чудеса! Мені вдалося перемістити стільки складного дублюючого коду в користувальницькі хуки для багаторазового використання.
У цій статті я наведу приклад того, як я використовував спеціальний хук, щоб відстежувати вікно браузера вікон у кількох компонентах у моїй програмі за допомогою одного рядка. Я великий прихильник використання TypeScript, тому, звичайно, я буду..
Створіть клон WhatsApp за допомогою Next.js Частина 12 Відтворення повідомлень
Вихідний код
В останній частині ви бачите, що поле введення не знаходиться внизу, оскільки поле повідомлень ще не створено, щоб зайняти весь простір. Тож у цій частині ми зосередимося на створенні ‹MessageContainer›, а також на візуалізації деяких фіктивних повідомлень.
MessagesContainer
Щоб створити простий ‹MessagesContainer›, просто створіть його з відступом рівним 20 пікселів, жовто-коричневим кольором фону та зі значенням flex, рівним 1, щоб зайняти весь простір.
const..
Зменшити функцію з іншого вигляду
Примітка: вся заслуга цього коду статті, використаного в цій статті, належить пану Раджешу Піллаю ви можете знайти його в Twitter: @rajeshpillai , Medium: @rajeshpillai https://www.youtube.com/channel/UCvhIKdT611F_ebrmIbQ9VDQ
Нещодавно один із моїх сер опублікував відео на YouTube, і це змусило мене відчути, що знати речі – це зовсім інша річ, а використовувати їх різними способами – це зовсім інше
він опублікував відео про функцію Reduce і про те, як нею користуватися..
Автоматизоване візуальне регресійне тестування з React
Короткий посібник із автоматизованого візуального регресійного тестування за допомогою бібліотеки « jsdom-screenshot ».
Що таке автоматичне візуальне регресійне тестування?
Краще один раз побачити ніж сто разів почути. Я знайшов гарний GIF, який чудово пояснює, що таке автоматизоване візуальне регресійне тестування . Знайдено на сторінці Візуальні тести збірника оповідань :
Що буде покрито:
передумови; монтаж; Конфігурація; Перший тест; Багаторазові тести;..
React Part-1 JSX
1. Розповідь 1?
Почнемо з дуже простого фрагмента коду:
function App() { return ‹h1›Привіт!‹/h1›
Тут ‹h1›Hi there!‹/h1› розглядається як JSX і був повернутий функцією App.
Тому, кажучи простою мовою, JSX — це те, що ми записуємо в компоненті, щоб сказати React, що ми хочемо показати на екрані.
Відповідно до React Docs, JSX просто надає синтаксичний цукор для функції `React.createElement()`.
*Примітка: JSX фактично не виконується у веб-переглядачі, оскільки це..
Як ми використовували React, щоб допомогти підвищити ефективність нашої команди продукту
Одним із улюбленців сім’ї Palatinate Tech є Your Golf Travel ; веб-сайт, який спеціалізується на відпочинку в гольф у Великобританії та в усьому світі. Ми зосереджені на тому, щоб оновити ціни та всю відповідну інформацію, необхідну користувачам для прийняття рішення про те, куди поїхати у відпустку.
Однією з проблем, з якою ми нещодавно зіткнулися, була кількість пакетів, які не завантажувалися динамічно, а замість цього були жорстко закодовані (жорстко закодовані!) на десятках..
Проекційне відображення Three js fiber і React
Дуже проста реалізація відображення проекцій, виконана в React за допомогою шейдерів glsl, працює на будь-якому типі поверхні, а також рухається чи обертається!
Ви можете перевірити це в наступній пісочниці -› https://codesandbox.io/s/czxbw
Короткий огляд сцени, створеної в React:
Лише за кілька рядків коду я створюю сцену для нашого проекту як компонент React:
Спочатку я імпортую необхідні бібліотеки, CameraHelper з threejs, щоб ми могли показати деякі штучки на камері, яку..
