fabrizioserial / Design-Patterns-for-React

⚛️ This project shows examples about how we can apply design patterns in React.

Design Patterns with ReactJs & Typescript

By Fabrizio Serial

This project shows how can we apply Design Patterns to React. All of them has a Readme file where you can find the description of the pattern and the disadvantage of use it!

What is a Design Pattern?

Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice. The pattern has four essentials elements:

Name

It's a way that we have to describe the pattern, the problem, the solution and his consequences when we talk with colleagues, documentation and even to ourselves.

Problem

Describe the problem and its context. Sometimes will include a list of conditions that must be met before it makes sense to apply the pattern

Solution

Describes the elements that make up the design, their relationships, responsibilities, and collaborations. The solution does not describe a particular implementation, because this provides a template with an abstract description of how can we use some elements to solve the problem.

Consequences

Are the results and trade-offs of applying the pattern. They are critical for evaluating design alternatives and for understanding the costs and benefits of applying the pattern

Principles

• SOLID
  • Single Responsibility Principle
  • Open-closed Principle
  • Liskov Substitution Principle
  • Interface Segregation Principle
  • Dependency Inversion Principle

Patterns

• Proxy
• Provider
• Presentational
• Render Props
• Hooks
• High Order Components (HOC)
• Compound