How to reuse components in React.js?

How to use Components in React.js?»

Now you’re going to create a new component called LayoutSection, inside of which you’ll be putting the NewsSection component. Keep in mind, LayoutSection is going to be an independent section which can contain other components as well. That means, NewsSection won’t be hardcoded inside the LayoutSection.LayoutSection component will have three buttons, Like, Comment and Share.

To start off, create a new file inside the src folder and name it LayoutSection.js. Write the following code to create a component, use Bootstrap card and make it exportable.

Component nesting

import React from 'react';

const LayoutSection = () => {
return (
<div className="card">
<div className="card-body">
<p className="card-text">
</p>
<button className="btn btn-primary">Like</button>
<button className="btn btn-primary">Comment</button>
<button className="btn btn-primary">Share</button>
</div>
</div>
);

};

export default LayoutSection;

Preview Changes (opens in a new tab)

Leave a Comment