React design patterns

#react

I am about to take a LinkedIn learning course on React design patterns.

This blog entry will serve as a public note for others. A lot of people can't access the course since it is tied to a premium subscription. I hope my notes at least help you understand the nitty gritty of writing design patterns in your react applications.

What are design patterns?
Shaun defines design patterns as effective solutions to common application development challenges.

Common Challenges in creating react apps which we would be applying design patterns to include:

Creating reusable layouts
Reusing complex logic between multiple components
Working with forms -- specifically why I have a gist on it
Incorporating functional concepts into our code -- I think this would include not mutating state and stuff.

First, we are gonna look at Layout Components.
Layout components are react components that have a primary function of arranging other components on the page.

Normally, when we create a component, we include the container div and the styles along with it.
an example of that is:

<div styles={...}>
   <h1>Component Code...</h1>
</div>

We could instead use a layout component that would have the structure and the styles of our app or a specific part of the app and then render children inside of it

<div styles={...}>
  {children}
</div>

-- split the layout styles into their own component
-- display the component itself inside the layout component

why do we do this?

It's in a bid to separate the component itself from where it's being displayed on the page.

In Summary:
The idea of layout components is that our components shouldn't know where they are being displayed.

Here's a sandbox illustrating it better:

Layout components should be written in such a way as to enhance developer experience. Remember, the goal of any software design pattern is not only to solve the problem but to also reduce complexity while doing it.