React JS

⚛ Создание UI-компонентов React на продвинутом уровне React — хорошая библиотека. Так давайте сделаем ее еще лучше, создавая многоразовые компоненты на высокопрофессиональном уровне. Для использования этого руководства достаточно базовых знаний о React, TypeScript и Tailwind CSS. В качестве примера поработаем с button, но принципы, которым будем следовать здесь, применимы к любому HTML-тегу. const Button = ({children, className}) => { return ( <button className={className}>{children}</button> ) } Приведенный выше код работает, но что, если понадобится ввести ARIA (accessible rich internet application attribute — доступные полнофункциональные интернет-приложения), ссылки или любые другие свойства обычного тега button? Можно просто добавить больше свойств и на этом закончить. const Button = ({children, className, ref, type}) => { return ( <button className={className} ref={ref} type={type}>{children}</button> ) } Это одно из решений, но оно не эффективно. Чтобы сделать его более действенным, поработаем с TypeScript и React. Быстро создать проект с использованием React и TypeScript поможет документация Vite. Первым шагом будет импорт необходимых типов из React и создание интерфейса для свойств кнопки (button). 📌 Продолжение @react_tg

🖥 5 лучших библиотек всплывающих окон для React Примеры профессионального использования всплывающих окон включают раскрывающиеся меню навигации, средства выбора дат и экскурсии во время процесса регистрации. В экосистеме React эту потребность удовлетворяют многие библиотеки, предлагая различные уровни настройки, стратегии позиционирования и оперативности. 1 Popper.js 2 act-tiny-popover 3 react-laag 4 reactjs-popup 5 react Joyride #js #react #ru ▪ Подробнее @react_tg

Прокачайте скилы c Холдингом Т1! 💙 🚀 ➕ Если вы уже более года работаете разработчиком JS+React и хотите освоить новые перспективы для развития внутри профессии, то Открытые школы Холдинга Т1 для вас! Мы поможем вам улучшить свои навыки и пригласим лучших в нашу команду! В программе интенсива:  🔹 Паттерны и принципы программирования 🔹 Тестирования ПО, написание юнит тестов 🔹 Микросервисная архитектура + микрофронты Как это работает: 🔹 подать заявку на сайте  🔹 пройти входное тестирование 🔹 достаточно 8 часов в неделю: 4 часа на вебинары и 4 часа на практические задания 🔹 всё онлайн и без отрыва от работы Продолжительность - 1 месяц, стартуем уже в январе 🎓 🌟 Подавайте заявку до 24 января! Реклама. ООО "ГК "ИННОТЕХ". ИНН 9703073496.

Стильный слайдер для сайта #html #css #js #slider https://codepen.io/theseventh/pen/LYVqMYb @javascriptv

Дайте старт вашей карьере с нашим бесплатным курсом по JavaScript! 🎓 Курс включает 39 уроков, 46 упражнений и 129 тестов для закрепления знаний. Вы освоите создание программ с использованием основных конструкций языка, сможете составлять программы из нескольких модулей и научитесь анализировать ошибки в коде с помощью отладочной печати. 💡 Научитесь не только теории, но и применять знания на практике. Поддержка в «Обсуждениях» поможет вам разобраться с темами, которые вызывают трудности. Обучение с самого нуля, с акцентом на практику. Подходит для начинающих программистов! Добро пожаловать в мир JavaScript😉 Реклама. АНПОО "ХЕКСЛЕТ КОЛЛЕДЖ". ИНН 7839056670.

🖥 ShareDrop - это бесплатное веб-приложение с открытым исходным кодом, которое позволяет легко и безопасно обмениваться файлами непосредственно между устройствами, не загружая их сначала на какой-либо сервер https://github.com/szimek/sharedrop #opensource @react_tg

Начать учиться никогда не поздно, ведь сфера IT развивается с каждым днем, а специалистов готовых делать качественную работу единицы. Попробовать свои силы можно на нашем бесплатном интенсиве по фронтенд-разработке: ✔️ На интенсиве мы с нуля по макету напишем лендинг для Автомастерской. ✔️ Реализуем адаптив под все устройства от десктопа до смартфона ✔️ Напишем форму для записи на осмотр или ремонт, выбор даты и времени. Начните старт в IT с одного простого шага по ссылке - https://tglink.io/4fdaf5f077b9?erid=LjN8KTV2v  Реклама. ИП Кислов Сергей Михайлович. ИНН 272198970024.

🖥 Чтобы уверенно работать на React, нужно создавать реальные проекты. Но какие проекты стоит создавать в 2024 году? Представляем список из семи проектов, которые, подходят для того, чтобы стать получить хорошую практику на React, - от простых до сложных приложений. Так же описан весь технологический стек, который можно использовать для создания каждого проекта, а также о том, как пошагово сделать каждый из них. ▪Читать @react_tg

🖥 Вот как можно использовать контекстный API React для создания структурированного способа управления и передачи данных через дерево компонентов @react_tg

🦖 2024 Источники бесплатного обучения 👇 •HTML: 🌐 http://w3schools.com •CSS: 🎨 http://web.dev/learn/css •JavaScript: 🚀 http://javascript.info •Git & GitHub: 📚 http://git-scm.com •SQL: 🔍 http://SQLzap.com @react_tg

💻 7 приложений и сайтов, которые облегчат работу UX/UI дизайнера Никто не будет спорить, что Figma круто изменила работу для UX/UI дизайнера, делая все проще и объединяя все необходимое в одном месте. Однако даже со всеми потрясающими возможностями и плагинами в Figma существуют и другие приложения и сайты, которыми дизайнеры пользуются каждый день и которые Figma заменить не может. Каждое из них выполняет особую задачу, которая выходит за пределы возможностей Figma. Поэтому хочется поделиться 7 приложениями и сайтами, которые можно использовать вместе с Figma. Этот список покажет, что иногда для достижения лучших результатов нужно использовать несколько инструментов. 1. Mobbin 2. Lyssna 3. Maze 4. Typeform 5. Fonts in Use 6. Designstripe 7. PaletteMaker ▪Читать @react_tg

Успей ухватить 7 дней бесплатного обучения фронтенд-разработке! 18-24 января Роман Чернов, веб-разработчик с 10-летним стажем, проведёт онлайн-интенсив с практикой и обратной связью. На эти 7 дней план такой: - Сверстаешь веб-сайт на HTML + CSS; - Реализуешь функционал на JavaScript; - Используешь фронтенд-фреймворк Angular; - Подключишь Backend и загрузишь сайт на хостинг; - Получишь советы по доработке своего проекта. В итоге ты разработаешь качественный сайт, который не стыдно добавить в портфолио или продать, освоишь азы работы с фреймворком Angular и получишь море бесценного опыта в вёрстке сайтов. 👉 Забрать бесплатно 7 дней обучения frontend-разработке А тем, кто ещё только думает переходить в IT, дадим пошаговый план как стать успешным frontend-разработчиком с нуля.

🍔 Beat Burger Приложение на React, анимированное библиотекой gsap. При нажатии на элементы проигрываются звуки. #react #js https://codepen.io/ste-vg/pen/MWpxKYR @react_tg

Научитесь пользоваться библиотекой React, использовать type-скрипт и напишите полноценное React-приложение. Если вы не уверены, что справитесь с курсом — пройдите бесплатный вступительный тест. → Начните учиться бесплатно

🖥 Принципы SOLID в React: так ли все с ними гладко? Поговорим о принципах SOLID с точки зрения приложений React. Я прекрасно понимаю, что статей на эту тему уже достаточно много, и знаю это потому, что прочитал большинство из них. Должен сказать, что не согласен с тем, как подается информация в таких материалах (иначе я бы, конечно, не стал публиковать эту статью). Проблема, на мой взгляд, заключается в том, что авторы рассказывают только о том, как прекрасны принципы SOLID, не упоминая об их возможных изъянах и подводных камнях. Никто не задается вопросом: а применимы ли вообще принципы SOLID в React-приложениях? Именно это мы и обсудим, так что читайте дальше. 📌 Читать дальше @react_tg

Как реализовать простой контроль версий с помощью JavaScript, чтобы лучше разобраться в Git Что такое Git и управление версиями в целом? Это система, которая помогает отслеживать проект во времени. Так, с помощью Git мы можем легко погрузиться в историю исходного кода и посмотреть, как он выглядел в определенное время в прошлом. Зачем разбираться в Git? Во-первых, чтобы не использовать команды бездумно, когда что-то пойдет не так. Во-вторых, важно понимать, как работает система, с которой мы взаимодействуем каждый день. Мы разберем основные понятия Git на примере реализации упрощенной системы управления версиями под названием Gitj. Реализация Выполнение первой команды Init Как вы, наверное, знаете, мы запускаем проект командой git init, после чего Git создает папку .git и сохраняет в ней данные. Нам предстоит это реализовать. Две важные папки, которые создает git, — это refs и objects. Objects (объекты) — это строительные блоки Git. Они могут быть 3 типов (на самом деле их 4): commit, tree и blob. Сейчас мы подробно рассмотрим каждый из этих типов. В папке refs есть подпапка heads, содержащая ветви и последний коммит каждой ветви (из названия должно быть понятно, что в ней хранится голова ветви). У нас также есть важный файл HEAD, который хранит текущую ветвь или коммит (иногда необходимо выполнить проверку в коммите, а не в ветви). Создадим эти папки при вызове функции init. const fs = require("fs"); function init() { // создается папка .gitj и подпапки .gitj/objects,.gitj/refs и .gitj/refs/heads fs.mkdirSync(".gitj"); fs.mkdirSync(".gitj/objects"); fs.mkdirSync(".gitj/refs"); fs.mkdirSync(".gitj/refs/heads"); // создается файл с именем .gitj/refs/heads/master fs.writeFileSync(".gitj/refs/heads/master", ""); // создается файл с именем .gitj/HEAD fs.writeFileSync(".gitj/HEAD", "ref: refs/heads/master"); } init(); Git Add. Добавление файлов в индекс 📌 Продолжение @react_tg

🖥 CSS Reaction — анимация в стиле логотипа React, реализованная на чистом CSS https://codepen.io/pavlovsk/pen/OXGdoN @react_tg

🖥 Если вы хотите попрактиковаться в React разработке попробуйте создать этот проект: ипотечный калькулятор. Вы узнаете о функциональных компонентах, Material UI, работе с пропсами и многом другом. ▪Смотреть @react_tg

🖥 Тестирование приложений React - ключевая часть процесса разработки. И в этом подробном руководстве объясняет, как это сделать с помощью Cypress. Вы узнаете, что такое сквозное тестирование, как организовать и запустить тесты, как отладить код и многое другое. https://www.freecodecamp.org/news/cypress-for-end-to-end-testing-react-apps/ @react_tg

🔥 Дайджест полезных материалов из мира React за неделю Почитать: — Сложность алгоритмов. Разбор Big O — Я счастлив, что больше не веб-разработчик — Mobile Web, навигация и при чем тут Nginx — Микрофронтенд для самых маленьких — Кастомизация бессерверных функций без применения промежуточного ПО — KISS your website или как написать уважаемый сайт на аутсорсе, глава первая — Что выбрать: Npm, Yarn или Pnpm? — Pixel Combats Api — Анатомия shadcn/ui — Валидация формы с помощью AJV, Vue.js и TypeScript — How Validate Form Input Data In React Or Any JavaScript Web Application ? — Fixing Fetch Waterfalls in React — Svelte journey | Part 2 — How many of you use cloud emulators for testing? — Svelte : Toji Fushiguro of Javascript Frameworks. — Efficient React Development: A Deep Dive into Components, Hooks, and Performance Optimization — Unveiling the Power of React Hooks: A Comprehensive Guide — Tips for styling React apps in JavaScript — This Week In React #167: Hydration, Remix, Server Components, cache, perf, Glow, Unistyles, Expo, :has(), Tailwind, date-fns... — Mastering Redux Toolkit in Your React Projects Посмотреть: 🌐 Type Predicates Solve This Common TypeScript Error (⏱ 05:01) 🌐 You Should Be Using Types Instead Of Interfaces In TypeScript (⏱ 00:52) Хорошего дня! @react_tg