React | Разработка приложений

@react_org

React | Разработка приложений

31 Aug, 09:10

🔥 Переключить класс по щелчку мыши с помощью event.currentTarget

Чтобы переключить класс по щелчку в React:

✓ Установите реквизит onClick для элемента.
✓ Получите доступ к элементу DOM как event.currentTarget.
✓ Используйте метод classList.toggle() для переключения класса.

3,340

React | Разработка приложений

30 Aug, 09:10

💡 Добавление или удаление класса по щелчку мыши в React

Чтобы добавить или удалить класс по щелчку в React:

✓ Установите реквизит onClick для элемента.
✓ Сохраните активное состояние в переменной state.
✓ Условно добавьте класс с помощью тернарного оператора.

2,678

React | Разработка приложений

29 Aug, 09:10

⚡ Переключение булевого состояния в React

Чтобы переключить состояние булевого значения в React:

✓ Используйте хук useState для отслеживания состояния булевой функции.
✓ Передайте функцию в функцию setState, которую возвращает хук.
✓ Переключите булево значение на основе текущего значения, например, setIsLoading(current => !current).

1,967

React | Разработка приложений

28 Aug, 09:10

🔥 Прокрутка к элементу по щелчку мыши в React

✓ Установите ref на элементе, к которому вы хотите прокрутить страницу.
✓ Установите onClick на другом элементе.
✓ Каждый раз, когда элемент нажимается, вызывайте метод scrollIntoView() для объекта ref.

1,632

React | Разработка приложений

26 Aug, 09:10

⚡ map через объект в React

Используйте метод Object.keys() для вызова метода map в объекте React, например, Object.keys(employee).map().

Метод Object.keys возвращает массив ключей объекта, на основе которого мы можем вызвать метод map().

1,367

React | Разработка приложений

25 Aug, 09:10

✅ Условная установка стилей в React

Чтобы условно установить стили в React:

✓ Установите свойство стиля для элемента.
✓ Используйте троичный оператор для условной установки значения свойства CSS.
✓ Например, backgroundColor: count > 0 ? 'lime' : 'salmon'.

1,644

React | Разработка приложений

24 Aug, 09:10

⚡ Выделение жирным определенного текста в React.js. Извлечение элемента span в компонент.

Если вам нужно делать это часто, извлеките элемент span в компонент, который отображает его дочерние элементы.

Этот пример кода достигает того же результата. Что бы мы ни передали между открывающим и закрывающим тегами компонента BoldText, к нему будет применен жирный стиль.

1,251

React | Разработка приложений

23 Aug, 09:10

📌 Выделение жирным определенного текста в React.js

Используйте встроенные стили для выделения жирным шрифтом определенного текста в React.js, например, <span style={{fontWeight: 'bold'}}>world</span>.

Жирный шрифт будет применяться только к элементу, к которому он был добавлен, и его дочерним элементам.

1,160

React | Разработка приложений

22 Aug, 09:10

▪️ Установка входного значения с помощью Ref в React

Чтобы установить значение поля ввода с помощью ref в React:

✓ Установите ref на элементе ввода.
✓ При наступлении определенного события обновите значение ref.
✓ Например, ref.current.value = 'Новое значение'.

1,139

React | Разработка приложений

21 Aug, 09:10

⚡ Получение элемента по ID с помощью ref в React

Чтобы получить элемент по ID в React:

✓ Установите свойство ref на элемент.
✓ Используйте текущее свойство для доступа к элементу в хуке useEffect.

1,013

React | Разработка приложений

19 Aug, 09:10

✔️ Получение текущего года в React

✓ Используйте конструктор Date() для получения текущего года в React, например new Date().getFullYear().
✓ Метод getFullYear() вернет число, соответствующее текущему году.

1,484

React | Разработка приложений

18 Aug, 09:10

💡 Изменение текста кнопки при нажатии с задержкой

Чтобы изменить текст кнопки при нажатии и изменить его обратно после задержки:
✓ Отслеживайте текст кнопки в переменной состояния.
✓ Установите реквизит onClick для элемента кнопки.
Когда кнопка будет нажата, обновите переменную состояния.
✓ Используйте метод setTimeout(), чтобы изменить текст обратно после задержки.

1,385

React | Разработка приложений

17 Aug, 09:10

🔥 Изменение текста кнопки при нажатии в React

Чтобы изменить текст кнопки по щелчку в React:
✓ Отслеживайте текст кнопки в переменной состояния.
✓ Установите реквизит onClick на элементе кнопки.
✓ Когда кнопка будет нажата, обновите переменную состояния.

1,158

React | Разработка приложений

16 Aug, 09:11

🔥 Слияние двух массивов в React.js

Используйте spread оператор (...) для объединения массивов в React, например const arr3 = [...arr1, ...arr2]. Синтаксис spread используется для распаковки значений двух или более массивов в новый массив.

Тот же подход можно использовать для слияния двух или более массивов при установке состояния.

1,242

React | Разработка приложений

15 Aug, 09:10

👉 Использование цикла for...of вместо forEach()

Можете использовать цикл for...of аналогично тому, как мы использовали метод forEach().

Если используете for...of вместо метода forEach(), тогда вам нужно использовать ключевое слово break для преждевременного выхода из цикла.

Ключевое слово break нельзя использовать в методе forEach(), но оно поддерживается в цикле for...of.

1,126

React | Разработка приложений

14 Aug, 09:10

🔥 Обработка событий двойного щелчка в React

Для обработки событий двойного щелчка в React:

✓ Добавьте свойство onClick к элементу.
✓ Используйте свойство detail на объекте события, чтобы получить количество щелчков.
✓ Если количество щелчков равно 2, обработайте событие двойного щелчка.

969

React | Разработка приложений

12 Aug, 09:10

👉 Использование метода forEach() в React

Метод forEach() можно использовать для итерации по массиву вне JSX-кода в React.

Если вам нужно выполнить итерацию по массиву и отобразить его элементы непосредственно в коде JSX, используйте метод map().

1,042

React | Разработка приложений

11 Aug, 09:10

🔹 Генерация случайного числа в React

Используйте функцию Math.random() для генерации случайного числа в React, например, Math.floor(Math.random() * (max - min + 1)) + min.

Функция Math.random возвращает число в диапазоне от 0 до менее 1, но также может быть использована для генерации числа в определенном диапазоне.

964

React | Разработка приложений

10 Aug, 09:10

💡 Установка цвета текста в React

Используйте встроенные стили для установки цвета текста элемента в React.js,
<span style={{color: 'green'}}>colorful</span>.

Цвет текста будет применяться только к элементу, к которому он был добавлен, и его дочерним элементам.

981