Руслан Куянец | Reactify

Полезная теория

ProductWithReviews расширяет функциональность ProductDetails, но не модифицирует его.

Клиентский код, который использовал ProductDetails, может продолжать использовать его без изменений, или же использовать ProductWithReviews, если нужно отобразить отзывы.

#code #react #solid

Liskov Substitution Principle

Принцип подстановки Барбары Лисков (Liskov Substitution Principle, LSP) в контексте React подразумевает, что объекты в программе должны быть заменяемыми на экземпляры их подтипов, не изменяя корректности выполнения программы. В контексте компонентов, это означает, что дочерние компоненты должны дополнять, а не изменять поведение родительских компонентов.

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

Чтобы реализовать принцип подстановки Лисков, важно обеспечить, чтобы методы и свойства базового компонента были сохранены и правильно реализованы в расширенном компоненте. Типы пропсов, состояния и контекста должны быть совместимы, а также следует избегать переопределения методов и свойств, чтобы сохранить ожидаемое поведение.

#обучающийПост #react #solid

😆👍
А потом сын на собеседовании:

- "Ну я разрабатываю сложные системы, пишу чистый код, могу с нуля настроить конфиги"
- "Ага, мы знаем"

Принцип открытости-закрытости

#solid #live #react #ocp

😁

15к просмотров и 1к лукосов💪

Сегодня задумался, знаете о чём? О том, насколько существующие сервисы и приложения недоработаны и сколько ещё предстоит работы разработчикам.

Почему это происходит? Потому что компании устраивают гонку, часто забывая о существующем коде, чтобы писать новый. На рефакторинг времени нет. Вы не представляете, какой хаос творится в больших компаниях. Знакомые и друзья рассказывают, как их нанимают в крупные компании и ставят на легаси проекты, оставляя там тухнуть. Да, за большую зарплату, но на таких проектах ты быстро выгораешь.

Что даст нам ИИ? Возможность ускорить разработку. Например, у бизнеса стоит выбор: отправить программиста на 3 месяца делать новую фичу, которая принесёт деньги, или на 3 месяца отправить на рефакторинг УЖЕ РАБОЧЕГО КОДА, КОТОРЫЙ СПРАВЛЯЕТСЯ С ЗАДАЧЕЙ. Очевидно - новая фича. НО что если с ИИ ты будешь рефакторить код не 3 месяца, а 1.5? И фичу новую писать тоже 1.5 месяца. Это меняет дело. Плюс, с ИИ можно отправить джуна на рефакторинг, пусть практикуется, ковыряется.

Я всё это к тому, что какой же ужасный Ростелеком 🥲 Древний чат, отвечают раз в 30 минут, нет нормальной поддержки.
И есть МТС, который решает твои проблемы за 5 минут. Кончился трафик? Напиши - добавят бесплатно. Произошло списание средств? Напиши - вернут.

#code #solid #react

Open/Closed Principle

Принцип открытости-закрытости (Open/Closed Principle, OCP) в контексте React подразумевает, что компоненты должны быть открыты для расширения, НО закрыты для модификации. Это означает, что мы можем добавлять новые функциональности, не изменяя существующий код, что уменьшает риск ошибок и увеличивает масштабируемость.

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

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

#обучающийПост #react #solid

Крутой канал о программировании. Качественные, интересные видео. Почти каждое видео я смотрю👌🏻

https://youtube.com/@AlekOS

Channel name was changed to «Reactify | Frontend Разработка»

🤦 возьмите ребят, начинающих прогеров

Про принцип единственной ответственности

#solid #spr #live #react

Паттерны проектирования

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

ОСНОВНЫЕ КАТЕГОРИИ ПАТТЕРНОВ:

Порождающие: Отвечают за оптимальное создание объектов. Примеры: Одиночка (Singleton), Фабричный метод (Factory Method), Прототип (Prototype).

Структурные: Занимаются компоновкой объектов. Примеры: Адаптер (Adapter), Декоратор (Decorator), Фасад (Facade).

Поведенческие: Описывают взаимодействие между объектами. Примеры: Наблюдатель (Observer), Стратегия (Strategy), Команда (Command).

ЗАЧЕМ ОНИ НУЖНЫ?

Повторное использование: Паттерны предоставляют проверенные решения, которые можно многократно использовать.
Читаемость и поддержка: Код, основанный на паттернах, легче понимать и модифицировать.
Сокращение ошибок: Применение паттернов может уменьшить вероятность ошибок, так как они базируются на опыте многих разработчиков.

Для изучения:
https://refactoring.guru/ru/design-patterns/catalog

#facts #tutorial #programming #DesignPatterns #development

#code #solid #react

Single Responsibility Principle

Принцип единственной ответственности (Single Responsibility Principle, SRP) в контексте React означает, что каждый компонент должен иметь только одну причину для изменения. Это помогает сделать код более читаемым, поддерживаемым и упрощает тестирование.

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

Чтобы соблюсти принцип единственной ответственности, можно разделить компонент на два: один для отображения информации о пользователе, другой для редактирования информации.

#обучающийПост #react #solid

Создал общий канал, где будут новости, новинки, разные истории и тд. Буду тоже вести его, для того чтобы расширять кругозор и быть в теме✌️

🖥 React.js - это JavaScript библиотека от Facebook для быстрой и эффективной разработки интерактивных пользовательских интерфейсов с использованием компонентов и виртуального DOM.

#react #technology #frontend

Буду тестировать, возможно на более мелких задачах будет лучше. Например сверстать карточку какую-нибудь.