Hello, everyone.
In this we do we will create reusable components that can be used for creating a list of related articles
that can be displayed at the bottom of the articles page.
So to create reusable articles inside our components folder.
We need to create a new file and name with this article.
Start to.
And I looked at it and press that.
Now let's go to article list companies or page from here.
We need to cut this out.
And we need to go to articles component and we need to do and this will be solved about this and instead
of this stuff, we will keep up the fragment, OK, maybe save this file now instead of importing article
content, we will get this as a prop.
So I will write the name of the project, which is which will be articles, OK, and we will get this
from this particular speech.
So instead this I will import articles from so import articles from dot org, slash conference, slash
articles and we need to parse this articles.
And we need to write articles, which is the name of the problem, and inside this, we will pass this
article on.
So let me follow up with this and and me close this fight and the component we don't require.
So I need to get this out of this file and let's go to articles and Twitter and Facebook.
And instead of this article, I copied and pasted it and let's save this fight.
So the reason for doing this is that it allows us to use the same component to display a different list
of articles.
For example, we can display a list of most popular articles or a list of related articles.
OK, so now the setup is then let's check it in the browser the file is working on.
Okay, so if I go to articles, click on any articles, so it is working exactly the same, but now
it is using the reusable thumbprint behind this.
Now let's add a little articles list at the bottom of the pages.
And the way we do is is like this.
Let's go to the first of your code and inside the article page, we need to import the articles something
so import articles from the slash company, slash articles.
And after this code, we will take a heading.
OK, so we will take an actual tax to an attack.
And inside this X1 tag, a title, which is other articles, and we need to add some thesis classes.
So the last thing that is going to be small or small device text Lexcen text cell phone Bohrer margin
for margin, bottom for text video, which is going to be nine hundred.
OK, so let me see this file.
And after this at one time we will take a div and we, we need to add some classes for that as well.
So let's select CIDRAP and minus margin for the distance and we will initiate this I think is important.
So we will intented this particular component.
We need to write the name of the properties articles and now we need to filter out the actual content
so that the other articles include all the article except articles, which we are on.
OK, so for that we are after this information we will create a new idea so fast.
Other articles that is equal to we need to for this article contain.
So let me let me copy this district here further and inside this article and will begin at a function.
So I think the name, which will be not equal to the name, which we are getting it from here.
So it will be named OK.
And we need to copy this other articles and it.
OK.
And let's close this company.
So let's save this file and let's take it in the browser.
So here we are getting other articles on every article.
So if I go to this article, How to build a Node.
So so the other two articles.
OK.
If I go to, let's say, my thought on learning, the act is so now, these are the two articles.
OK, so we have successfully created a usable component for our Arctica list, and we are using this
component, this reusable component on other article as well as your articles.
So this is the magic of this weekend, created usable component and we can use it anywhere else in our
application.
So this is it for this video and in the next video.