Hi Guys.
I'm very happy to share with you my first post in this great website.
So, in this post, I will talk about container pattern.
The Container Design pattern(or simply Component pattern) ensures to separate the data fetching logic, managing state from the presentational part. The presentational part has got a dumb name, dumb component. It is because the responsibility of the presentational part is just to render the information passed to it. The smart work of data fetching, working on it, and state management occurs elsewhere.
When you come to meet for a job as a React developer, or any programming language
The most important thing they focus on is the way you write the code in your projects. So that they can see if you can make a component that is usable, maintainable, upgradable or not…
Many programmers, especially beginners, overlook this thing. The purpose is not that you are making a code and it will be executed, and salvation. The purpose is that you make a code that can be tested, maintained, and used in the future. The company that will hire you will work with it. Its projects go through many stages and sometimes they change back to the previous job based on the feedback, the right of the customer, or sometimes it is in development, and this thing needs code to be implemented in an architecture which is Good, clean, bug-free, and code ramifications.
Today I will talk about a pattern for writing code in React, this pattern is called container design pattern.
In short, this pattern is very, very important, especially when you have to fetch data from the server. The idea is of this type, we can summarize it as
The component doesn't know where the data comes from..
In the sense that the component belongs to you, you leave it in a container, and the container is the one who performs the process of fetching the data and based on the data, the component will be displayed for you..
For example, if you have a component that displays the details of the video inside the card, and a second component that displays the details of a movie inside the card as well.
We want to make a container that we can use with the two components, so that the component does not have any relationship from where the data will come or how it will come. Or how many cards will be displayed or how long the data will come. The code will be like this
Here, if we have, for example, a thousand users, and a thousand movies, they will be shown very naturally, without having anything to do with the data coming from where. Of course, we can use the container to put any other ingredient in it.
The entire code is available on my GitHub account, so you can view it and take it and modify it as well. It will help you a lot..
https://github.com/MhdGmal1998/react-design-patter-container/
Top comments (1)
Hey @mhdgmal1998 great article on resusable components.
Unfortunately there are some styling issues in your article, which is totally fine. Since this is your first article I guess you are simply not familiar with markup.
Tip: to add space between two paragraphs, click enter twice.
Also, your code example is not showing. To do so, you have to use backsticks (or simply select the code and click on the code button in the action menu bar)
Single backticka for one line of code, three backsticks in the beginning and end when having more lines of code, where the backsticks are on a line for themselves.
Check out the markdown guide here.
Markdown Cheatsheet for developers
Rattanak Chea ・ Nov 13 '18 ・ 3 min read