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

👉 Использование изображения в качестве ссылки в React.js Чтобы использовать изображение в качестве ссылки в React, оберните изображение в тег <a> или тег Link, если используется react router. Изображение будет отображаться вместо ссылки, а щелчок по изображению приведет к переходу браузера на указанную страницу.

💡 Показать элемент при наведении в React Чтобы показать элемент при наведении в React: ✓ Установите реквизиты onMouseOver и onMouseOut для элемента. ✓ Отслеживайте, навел ли пользователь курсор на элемент, в переменной состояния. ✓ Условно отобразите другой элемент на основе переменной состояния.

⚡ Часть перед вопросительным знаком оценивается, и если она возвращает истинностное значение, оператор возвращает значение перед двоеточием, в противном случае он возвращает значение после двоеточия.

💡 Открытие ссылки в новой вкладке в React Чтобы открыть ссылку в новой вкладке в React, используйте элемент <a> и установите для него атрибут target со значением _blank. В качестве альтернативы вы можете установить свойство onClick для элемента и вызвать метод window.open() для загрузки ресурса в новой вкладке.

✔️ Использование метода find() в React Чтобы использовать метод find() в React: ✓ Вызовите find() для массива. ✓ На каждой итерации проверяйте, соответствует ли элемент условию. ✓ Отобразите результат.

⚡ Чтобы установить встроенные стили в React Установите определенные свойства и значения CSS для стиля элемента. Например, <div style={{backgroundColor: 'salmon', color: 'white'}}>.

Вам нравится читать контент на этом канале? Возможно, вы задумывались о том, чтобы купить на нем интеграцию? Следуйте 3 простым шагам, чтобы сделать это: 1) Регистрируйтесь по ссылке: https://telega.in/c/react_org 2) Пополняйтесь удобным способом 3) Размещайте публикацию Если тематика вашего поста подойдет нашему каналу, мы с удовольствием опубликуем его.

🛠 При работе с React или другой похожей на неё библиотекой map() — это самый распространённый способ трансформировать массив данных в компоненты, которые в итоге будут на странице.

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

🔥 Переключение класса по щелчку в React Чтобы переключить класс по щелчку в React: ✓ Установите параметр onClick для элемента. ✓ Сохраните активное состояние в переменной state. ✓ Условно добавьте класс с помощью тернарного оператора.

Погрузитесь в увлекательный мир веб-разработки с нашим бесплатным интенсивом «Ретрит по JavaScript»!  На два дня мы открываем доступ к самым топовым тренажерам веб-разработки. За пару дней вы окунетесь в основы JavaScript, покончите с прокрастинацией и найдете ответы на все свои вопросы. Если вы новичок и ничего не знаете о веб-разработке — этот интенсив идеально подойдет для вас. А опытные IT-гуру смогут проверить свои силы и навыки, чтобы стать ещё более крутыми специалистами. После окончания интенсива все участники смогут поучаствовать в розыгрыше призов от HTML Academy. Узнать подробнее.

Если вам нужно удалить атрибут из элемента, вы можете использовать метод removeAttribute. Метод removeAttribute удаляет атрибут с указанным именем из элемента. Если атрибут не существует в элементе, метод возвращается без ошибки.

В примере показано, как использовать метод setAttribute() в событии для установки или обновления data атрибута программным путем. Метод принимает 2 параметра: ✓  name - имя устанавливаемого атрибута. ✓  value - значение, которое нужно присвоить атрибуту. Если атрибут уже существует на элементе, значение обновляется, в противном случае добавляется новый атрибут с указанным именем и значением.

⚡ Установка data атрибутов в React Чтобы установить data атрибут на элемент в React, установите атрибут непосредственно на элемент, например, <button data-test-id="my-btn"> или используйте метод setAttribute(), например, el.setAttribute('data-foo', 'bar'). Вы можете получить доступ к элементу на объекте события или с помощью ссылки.

📌 Реверсирование массива в React ✓ Используйте синтаксис spreat оператора(...) для создания неглубокой копии массива. ✓ Вызовите метод reverse() для копии. ✓ Сохраните результат в переменной.

Профессия «Java-разработчик». Курс с нуля до трудоустройства за 10 месяцев. Освойте язык крупного бизнеса и финансовых технологий и научитесь разрабатывать веб-приложения на фреймворке Spring. 🎁 Мы подготовили для вас спецпредложения, чтобы решиться было проще! Выбирайте один из бонусов: 2 месяца академического отпуска, 1 месяц персональных консультаций с наставником и подготовка к техническому интервью, кешбэк 20 000 ₽ после полного прохождения программы.  Готовы попробовать прямо сейчас? Оставьте заявку, и мы расскажем, как пройти бесплатные курсы профессии!

⚡ Экспорт компонентов в React.js Использование именованных экспортов для экспорта компонента в React т.е. export function Button() {} Экспортированный компонент может быть импортирован с помощью именованного импорта, как import {Button} from './another-file.js'. В файле можно использовать столько именованных экспортов, сколько необходимо. При импорте мы заключили имена компонентов функций в фигурные скобки - это называется именованным импортом.

💡 Отключение кнопки в React Используйте disabled для отключения кнопки в React. Вы можете использовать этот атрибут для условного отключения кнопки на основе значения поля ввода или другой переменной или для предотвращения многократного нажатия на кнопку.

✔️ Выравнивание div по центру в React.js Чтобы выровнять div по центру в React.js, установите его свойство display в flex, а свойства alignItems и justifyContent в center. Содержимое div будет выровнено по горизонтали и вертикали. Если вы не хотите делать div во всю высоту, удалите свойство height из объекта style.

💡 Как обновить версию React Чтобы обновить версию React и установить последние версии пакетов react и react-dom, выполните следующие команды: 👇️ с NPM npm install react@latest react-dom@latest 👇️ если используете TypeScript npm install --save-dev @types/react@latest @types/react-dom@latest 👇️ с YARN yarn add react@latest react-dom@latest 👇️ если используете TypeScript yarn add @types/react@latest @types/react-dom@latest --dev