How to use multiple components in React.js?

How to use Components in React.js?»

So far, you’ve added only one news snippet. Now it’s time to add a few more. All you have to do is, copy the <div className=”row”></div> part of the code in index.js file that contains all the news section code and paste it two more times. It should look like this (Note: I’ve concatenated Lorem ipsum to save some space here):

<div className="row">
<div className="col-md-8">
<div className="news-title">
<h2>Some news title here</h2>
</div>
<div className="publishdate">
<p>
May 12, 2019
</p>
</div>
<div className="news">
<p>
Lorem Ipsum ...
</p>
</div>
</div>
<div className="col-md-4">
<img alt="news" className="img-responsive" src={faker.image.city()} style={{width: '100%'}}/>
</div>
</div>
<div className="row">
<div className="col-md-8">
<div className="news-title">
<h2>Some news title here</h2>
</div>
<div className="publishdate">
<p>
May 12, 2019
</p>
</div>
<div className="news">
<p>
Lorem Ipsum ...
</p>
</div>
</div
<div className="col-md-4">
<img alt="news" className="img-responsive" src={faker.image.business()} style={{width: '100%'}}/>
</div>
</div>
<div className="row">
<div className="col-md-8">
<div className="news-title">
<h2>Some news title here</h2>
</div>
<div className="publishdate">
<p>
May 12, 2019
</p>
</div>
<div className="news">
<p>
Lorem Ipsum ...
</p>
</div>
</div>
<div className="col-md-4">
<img alt="news" className="img-responsive" src={faker.image.people()} style={{width: '100%'}}/>
</div>
</div>

You’ll notice that there’s too much repetition of code and it becomes clumsy and difficult to manage the codebase. I’m sure you’d agree that this App component doesn’t look good anymore. You’ll come to know why you should create reusable components instead.

Save the file, open up your browser and you should see three article snippets written like this:

Reactjs Component Example

Leave a Comment