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

@react_org

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

React | Разработка приложений - это канал в Telegram, который посвящен разработке приложений с использованием React. React - это JavaScript библиотека, которая позволяет создавать красивые и динамичные веб-приложения. Если вы заинтересованы в изучении React и разработке современных веб-приложений, то этот канал идеально подходит для вас. nnЗдесь вы найдете информацию о последних трендах в разработке, полезные уроки, советы от опытных разработчиков, а также новости о выпусках React и связанных с ним технологий. Этот канал станет вашим надежным источником знаний в мире React. nnКанал React | Разработка приложений создан для того, чтобы объединить сообщество разработчиков, которые используют React в своей работе. Здесь вы сможете общаться с единомышленниками, обмениваться опытом и задавать вопросы. Мы стремимся создать дружественное и полезное сообщество, которое поможет вам расти и развиваться в области разработки приложений. Присоединяйтесь к нам и участвуйте в обсуждениях, учите новое и делитесь своими знаниями! nnЕсли вы хотите быть в курсе последних новостей и тенденций в разработке с использованием React, подписывайтесь на канал React | Разработка приложений прямо сейчас. Узнавайте новое, общайтесь с профессионалами и становитесь успешным разработчиком с нами!

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

31 Aug, 09:10

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

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

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

3,344

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

30 Aug, 09:10

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

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

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

2,717

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

29 Aug, 09:10

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

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

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

2,083

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

28 Aug, 09:10

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

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

1,608

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

26 Aug, 09:10

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

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

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

1,316

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

25 Aug, 09:10

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

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

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

1,628

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

24 Aug, 09:10

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

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

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

1,205

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

23 Aug, 09:10

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

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

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

1,250

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

22 Aug, 09:10

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

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

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

1,118

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

21 Aug, 09:10

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

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

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

1,038

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

19 Aug, 09:10

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

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

1,466

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

18 Aug, 09:10

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

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

1,388

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

17 Aug, 09:10

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

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

1,101

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

16 Aug, 09:11

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

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

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

1,259

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

15 Aug, 09:10

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

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

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

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

1,154

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

14 Aug, 09:10

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

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

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

972

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

12 Aug, 09:10

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

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

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

1,064

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

11 Aug, 09:10

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

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

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

968

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

10 Aug, 09:10

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

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

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

985