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

Создали плагин для оптимизации медленного кода в VSCode. Расширение предлагает подсказки для оптимизации кода. Разраб поделился, что его приложение стало в три раза быстрее — отклик уменьшился с 21 до 6 секунд. Установка здесь. Попробую 👽

Всем привет, друзья! Как вы могли заметить, данный канал временно находится в паузе из-за личных обстоятельств Для тех, кто не хочет скучать и хочет продолжать свое развитие, я могу порекомендовать вам канал моего товарища — @FrontendPortal. Там можно найти кучу полезного контента по frontend-разработке Скоро мы вернемся с новыми идеями и контентом! Благодарим за ваше терпение и поддержку!

Прототип (смыслы) — является самой дорогой составляющей сайта. Поэтому прокачать в себе навык написания смысловых прототипов — прямая дорога к повышению дохода. Я никогда не работал со смыслами, что делать? 1️⃣ Ты дизайнер. План простой, учишься писать смысловые тексты, создаёшь прототип и дизайн, а верстку и разработку делегируешь. Или делаешь лендинг на Тильде. Тут уже от навыков зависит. Но лучше делегировать, чем разбираться самому. 2️⃣ Ты верстальщик. Обучаешься писать смысловые тексты и создаёшь прототип. Дизайн и перенос на CMS делегируешь. 3️⃣ Ты разработчик. Научился писать смысловые тексты и создавать прототип. Дизайн и верстку делегируешь. Верстку можешь сам делать, если некому передать. Смысловые тексты на сайте — это про убеждение ЦА оставить заявку и максимальную конверсию на сайте. А за это заказчик готов платить больше, чем просто за сайт. Обучаться можно двумя способами. 1️⃣ Бесплатно. Самому искать информацию и изучать. Длинный путь с множеством препятствий, как в любой сфере. 2️⃣ Найти наставника. Те, кто уже работал с наставником, то знают, что это самый короткий и простой путь. Этим вариантом воспользовался я. Не помню кто сказал, но слова я запомнил: "Если хочешь чего то достичь, то самый простой способ — это найти человека который это уже достиг и пойти к нему на обучение. Он уже прошел этот путь в достижении цели и точно знает самый простой способ как это сделать." Для тех, кто хочет попробовать бесплатно, начните с закреплённого поста в канале @fobesko_landolog. Там вы найдёте самые вкусные посты на темы: – Бесплатные файлы для веб-разработчика; – Как искать клиентов; – Как продавать свои услуги дороже. Я лично пошел вторым путем и купил наставничество у @fobesko. После того, как прочитаете статьи из закреплённого поста в канале @fobesko_landolog, напишите в комментарии что думаете, что забираете себе и чем будете пользоваться?

⚛️ Выкарыстоўвайце React пры распрацоўцы? Дапамажыце перакласці яго дакументацыю. Інструкцыя: github.com/reactjs/be.react.dev #пераклад | @GNULinuxBe

Создаём микроразметку Schema.org для сайта Мы, люди, когда открываем сайт, сразу понимаем — сверху вот название и меню, чуть ниже большими буквами — заголовок статьи, под ним изображение-иллюстрация, а под ним уже сама статья. Но вот какая штука — компьютерный интеллект всё это ещё не совсем понимает, хотя и старается. И вообще — когда поисковый робот заходит на сайт, он не видит всей этой красоты из параллаксов и svg-анимаций, а видит код, с которым и работает. Для того, чтобы облегчить работу роботам была придумана семантическая микроразметка. Посетителям сайта она совершенно не видна, но робот её сразу видит и понимает, что где находится. Источник: https://anatolykulikov.ru/lesson/create-data-markup-for-site/ ➖➖➖➖➖➖➖➖➖➖➖ 2023 год у меня начался с проекта в котором нужно было учесть такую разметку, а я без понятия что это и для чего. Работал в паре с СЕОшником и разбирался где и какой тег ставить. Сейчас нашел вот эту статью и по моему в ней всё предельно понятно расписано. Странно, что никто не упоминает эту тему при обучении созданию сайтов 🤔 Или она не нужна для сайта?

📌 Проверьте, установлен ли флажок в React Чтобы проверить, установлен ли флажок в React: ✓ Объявите переменную состояния boolean, которая будет хранить состояние флажка. ✓ Установите свойство onChange на элементе ввода. ✓ Используйте свойство target.checked на объекте события, чтобы проверить, установлен ли флажок.

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

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

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

На оплачиваемое онлайн исследование приглашаем Разработчиков и специалистов по дистрибуции! Добрый день, приглашаем принять участие в удаленном исследовании: 1) Разработчиков приложений 2)Специалистов по дистрибуции. Разработчиков–партнеров В исследовании участвует ВСЯ РОССИЯ! Даты: с 28.08 Длительность: 2 часа Установить на ПК Zoom и подключиться к видео-конференции Вознаграждение: 5000р на карту в день участия! ЗАПИСАТЬСЯ После заполнения анкеты, с вами свяжется рекрутер для более подробной информации по исследованию!

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

Создавайте приложения без кода IT сейчас манит всех, но что делать, если совсем не манит программирование? Идти учиться на курс «Разработка веб-приложений без кода» от OTUS! На нем вы научитесь: ✅ Создавать техническое задание в сфере разработки приложений ✅ Работать в самом популярном на сегодня графическом редакторе Figma ✅ Создавать реляционные базы данных любой сложности ✅ Верстать веб-страницы в рамках платформы Bubble.io ✅ Создавать рабочие процессы и сложные логические цепочки ✅ Интегрировать платежные системы и сторонние сервисы по API ✅ Обеспечивать безопасность приложения ✅ Тестировать веб-приложения на финальной стадии ✅ Разрабатывать полноценные веб-приложения ✅ Вести переговоры с заказчиком ✅ Презентовать свои проекты и искать заказы на рынке ✅ Курировать проекты во время разработки А ещё получите в свое портфолио 2 проекта и 12 ключевых навыков ноукодера. Программа рассчитана на изучение с нуля. Старт курса – 28 сентября. Оставьте заявку прямо сейчас: https://otus.pw/Ynvv/ 16+ Нативная интеграция. Информация о продукте на сайте

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

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

⚡ Выделение жирным определенного текста в React.js. Извлечение элемента span в компонент. Если вам нужно делать это часто, извлеките элемент span в компонент, который отображает его дочерние элементы. Этот пример кода достигает того же результата. Что бы мы ни передали между открывающим и закрывающим тегами компонента BoldText, к нему будет применен жирный стиль.

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

🖥 Как устроена современная система аналитики данных? Несмотря на множество разрозненной информации на просторах интернета, до сих пор очень сложно получить целостное представление о том, как устроена вся механика BIG DATA, место SQL в ней и структуру работы аналитики данных в крупном бизнесе 👾 Особенно сложно разобраться в этом новичкам и тем кто хочет связать свой путь с работой в аналитике больших данных 😐 Если вам интересно это направление и вы хотите получить комплексную, незамутненную информацию в понятном, просто виде, мы рекомендуем подписаться на единственный в своём роде тг канал Left Join 🌚 Авторы канала Left Join максимально доступно и подробно разъясняют все аспекты работы современной BIG DATA 🤓

▪️ Установка входного значения с помощью Ref в React Чтобы установить значение поля ввода с помощью ref в React: ✓ Установите ref на элементе ввода. ✓ При наступлении определенного события обновите значение ref. ✓ Например, ref.current.value = 'Новое значение'.

⚡ Получение элемента по ID с помощью ref в React Чтобы получить элемент по ID в React: ✓ Установите свойство ref на элемент. ✓ Используйте текущее свойство для доступа к элементу в хуке useEffect.

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