TGViewer
Channel Public Channel
React JS

React JS

@react_tg

React программирование

@haarrp - admin

@itchannels_telegram - 🔥лучшие ит-каналы

@javascriptv - продвинутый javascript

@programming_books_it - бесплатные it книги

@ai_machinelearning_big_data - ml

№ 5037566384
Subscribers
16.2K
Photos
706
Videos
104
Links
811

Showing posts older than #393 · Back to latest

Older Posts 20 shown
Post #391 5.35K
🍔 Beat Burger

Приложение на React, анимированное библиотекой gsap. При нажатии на элементы проигрываются звуки.

#react #js

https://codepen.io/ste-vg/pen/MWpxKYR

@react_tg
  • ❤ 18
  • 👍 9
  • 🔥 2
Post #389 6.07K
🖥 Принципы SOLID в React: так ли все с ними гладко?

Поговорим о принципах SOLID с точки зрения приложений React. Я прекрасно понимаю, что статей на эту тему уже достаточно много, и знаю это потому, что прочитал большинство из них.

Должен сказать, что не согласен с тем, как подается информация в таких материалах (иначе я бы, конечно, не стал публиковать эту статью).

Проблема, на мой взгляд, заключается в том, что авторы рассказывают только о том, как прекрасны принципы SOLID, не упоминая об их возможных изъянах и подводных камнях.

Никто не задается вопросом: а применимы ли вообще принципы SOLID в React-приложениях? Именно это мы и обсудим, так что читайте дальше.

📌 Читать дальше

@react_tg
  • 👍 16
  • ❤ 3
  • 🥴 3
  • 🔥 1
  • 🤡 1
Post #388 6.85K
Как реализовать простой контроль версий с помощью 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
  • ❤ 12
  • 👍 11
  • 🔥 1
Post #386 8.93K
🖥 Если вы хотите попрактиковаться в React разработке попробуйте создать этот проект: ипотечный калькулятор.

Вы узнаете о функциональных компонентах, Material UI, работе с пропсами и многом другом.

▪Смотреть

@react_tg
  • 👍 16
  • 😢 2
  • 🐳 2
  • ❤ 1
  • 🔥 1
Post #385 7.07K
🖥 Тестирование приложений React - ключевая часть процесса разработки.

И в этом подробном руководстве объясняет, как это сделать с помощью Cypress.

Вы узнаете, что такое сквозное тестирование, как организовать и запустить тесты, как отладить код и многое другое.

https://www.freecodecamp.org/news/cypress-for-end-to-end-testing-react-apps/

@react_tg
  • 👍 13
  • 🤡 2
  • ❤ 1
  • 🔥 1
Post #384 7.17K
🔥 Дайджест полезных материалов из мира 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
  • 👍 7
  • ❤ 3
  • 🔥 1
Post #382 7.01K
Чистая архитектура фронтенда

В этой статье речь пойдет об архитектуре фронтенда, проектирование которой подчиняется множеству принципов, в том числе SOLID, KISS, DRY и DDD.

В чем важность архитектуры фронтенда?

Функциональные и нефункциональные требования должны применяться не только к бэкенду, но и к фронтенду. Именно архитектура фронтенда позволяет полностью реализовать потребности бизнеса. Кроме того, она дает более четкое представление о сложности проектов, тем самым сокращая время их создания, риски и стоимость. Однако, на мой взгляд, наибольшая ценность фронтенд-архитектуры заключается в том, что она обеспечивает поддерживаемость и масштабируемость любого проекта.

Что представляет собой архитектура фронтенда?

📌 Читать

@react_tg
  • 👍 23
  • ❤ 5
  • 🔥 3
Post #381 7.01K
Совет React: используйте пользовательский хук для обработки состояний массива в ваших компонентах ↓

@react_tg
  • ❤ 34
  • 💯 5
  • 👍 3
  • 🔥 3
Post #380 7.43K
⚛️ Я не слишком беспокоюсь о повторных рендерах в React. (если только я не вижу проблем с производительностью).

Однако мне важно понимать, как работает процесс рендеринга.

@react_tg
  • 👍 20
  • ❤ 4
  • 🔥 1
Post #379 7.11K
🔥 Дайджест полезных материалов из мира React за неделю

Почитать:
— Многооконное веб приложение — решение для перегруженных интерфейсов
— Как мы отказались от styled-components в React Native приложениях
— Билдер Vue 3 веб приложений
— 8 бесплатных курсов по большим языковым моделям
— Современные варианты баз данных
— Typescript: лучшие практики
— Архитектура серверного рендеринга для SPA
— Интересные трюки HTML. Экстремальный минимализм
— Как сгенерировать безопасный, типизированный Node.js API с использованием Prisma, TypeGraphQL и graphql-query-purifier
— Unveiling the Unparalleled Style: Essentials Hoodie Collection by Fear of God
— Animated 3D text with bubble background using html,css
— Reinforcing my ReactJS Knowledge
— Solid.js vs React: Which is Better in 2024?
— Yes! There’s a Technology that’s Faster than React!
— Resolving React Hook Error and Building a Simple Todo List Page
— Uncovering the React Universe: The Starter Guide
— Mastering useState: A Guide to Avoiding Common Pitfalls in React Development
— Mastering React Performance: In-Depth Guide to useCallback and useMemo. 🚀
— 3 Things I Learned by Building a Portfolio Website

Посмотреть:
🌐 Ollama — модель уровня GPT. Используй GPT без ограничений и абсолютно бесплатно.
🌐 Refactoring a React component - Design Patterns
🌐React Zero to Hero (5 Days)
🌐 WTF Do These Even Mean (⏱ 13:44)
🌐 This New Tailwind Feature Is A Game Changer (⏱ 00:59)

Хорошего дня!

@react_tg
  • 👍 10
  • ❤ 4
  • 🔥 2
Post #378 5.64K
React JS 🖥 Полезные сайты, на которых вы можете попрактиковаться в использовании JavaScript: 1. Codewars http://codewars.com 2. JS challenger http://jschallenger.com 3. W3resource https://w3resource.com/javascript-exercises/ 4. Герой JS https://jshero.net/en/koans/var.html…
🖥 Представляем Million.js 3.0!

Million.js - это чрезвычайно быстрый и легкий (<4 кб) виртуальный DOM, который позволяет ускорить работу компонентов React на 70 %.

Сделайте React быстрее⚡️.

▪Github
▪Документация

@react_tg
  • 🥴 14
  • 👍 5
  • ❤ 2
Post #375 5.46K
🖥 Compound components - это подход, в котором вы объединяете несколько компонентов одной общей сущностью и общим состоянием. Отдельно от этой сущности вы их использовать не можете, тк они являются единым целым.

Это как в BEM нельзя использовать E - элемент, отдельно от B - блока.

На гифке пример, как вы можете использовать этот паттерн, чтобы сделать свои компоненты открытыми для расширения и закрытыми для модификации.

@react_tg
  • 👍 21
  • ❤ 3
  • 🔥 2
  • 🤩 1
Post #374 5.93K
🔥🔥 Вышел Redux Toolkit 2.0!!!🔥🔥

В свежей версии добавлены новые возможности, ускорена работа, уменьшен размер пакета и удалены устаревшие опции.

Она сопровождается обновлениями для всех наших пакетов семейства Redux.

https://github.com/reduxjs/redux-toolkit/releases/tag/v2.0.0

@react_tg
  • 🔥 40
  • 👍 7
  • ❤ 3
Post #373 5.78K
🐈‍⬛ Действительно хороший вариант кнопки, никогда не видел ничего подобного.

Даже немного поиграл с ней 😅.

http://rive.app

@react_tg
  • 👍 41
  • ❤ 14
  • 🔥 5
Post #372 4.94K
🖥 Сайты вы найдете сниппеты кода Javascript:

➽ javascripting - http://javascripting.com

➽ codepen - http://codepen.io

➽ codemyui - http://codemyui.com

➽ jsfiddle - http://jsfiddle.net

➽ jsbin - http://jsbin.com

➽ 30secondsofcode - http://30secondsofcode.org/js/p/1/

➽ freefrontend - http://freefrontend.com

➽ snippit - http://snippit.io

➽ codesandbox - http://codesandbox.io

➽ glitch - http://glitch.com

➽ tabnine - http://tabnine.com

➽ github - http://github.com

@react_tg
  • ❤ 13
  • 👍 4
  • 🔥 2
  • 🤣 2
Post #370 6.43K
⚡️ 10 сайтов для отработки навыков работы с фронтендом:

1. Frontend Mentor
http://frontendmentor.io

2. Codewars
http://codewars.com

3. Codewell
http://codewell.cc

4. JavaScript30
http://javascript30.com

5. Кодербайт
http://coderbyte.com

6. CSS Battle
http://cssbattle.dev

7. FreeCodeCamp
http://freecodecamp.org/learn/

8. Frontend Practice
http://frontendpractice.com

9. Задачи CodePen
http://codepen.io/challenges/?re

10. Dev Challenges
http://devchallenges.io

@react_tg
  • 👍 33
  • ❤ 8
  • 🔥 3
Post #369 5.13K
⭐️Совет по CSS!⭐️

Для создания инвертированного эффекта :hover вы можете использовать режим mix-blend-mode с настраиваемыми свойствами :hover.
button > span {
left: calc(var(--x, 0) * 1px);
top: calc(var(--y, 0) * 1px);
mix-blend-mode: difference;
}


Классная фишка в том, что использование режима mix-blend-mode действует как инвертор цвета, что хорошо работает с монохромными элементами управления.

Что касается того, как переместить этот код в JavaScript?

const UPDATE = ({target, x, y }) => {
const bounds = target.getBoundingClientRect()
target .style.setProperty('--x', x - bounds.left)
target .style.setProperty('--y', y - bounds .top)
}

const BTNS = document.querySelectorAll('button')
BTNS.forEach(BTN => BTN.addEventListener('pointermove', UPDATE))


button:is(:hover, :focus-visible) {
--active: 1;
}
button span {
transform: translate(-50%, -50%) scale(calc(var(--active, 0) * 3);
transition: transform 0.25s;
}

@react_tg
  • 👍 23
  • 🔥 10
  • ❤ 5
Post #368 5.05K
🏆 Stagger Cube — вращающийся куб с анимацией расширения-уменьшения квадратиков в каждой из сторон. Реализована с помощью CSS и JavaScript

https://codepen.io/hexagoncircle/pen/qBdEGrj

@react_tg
  • 👍 9
  • 🔥 3
  • ❤ 1
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →