How to create reusable component in react js.

React is popular for its reusable component nature and it's quite useful when we are creating huge projects in which the same element is repeated multiple times. Creating a reusable component is pretty simple, and we can also add dynamic data to components using props (it will work like the same component but with different data). We will understand with a very simple and lite example. Let's assume you have created a card which you want to use multiple times in your project, but the catch is you also want to change its content. So let's start with it. <h3>1. Create a reusable component (component for card).</h3> We will create a file with the name <span>SimpleCard.jsx</span>, and inside it, we will create a very simple card which contains a title and a little description. Instead of adding the title and description directly, we are going to use <span>{props.title}</span> and <span>{props.desc}</span>. <imgdiv><img src="https://meetprvt.github.io/blogassets/blogassets/react_props_1.png"></imgdiv> <h3>2. Importing reusable component</h3> We are going to import the component in our <span>App.jsx</span>, and we want two cards in <span>App.jsx</span>, so we are going to use our card twice. <imgdiv><img src="https://meetprvt.github.io/blogassets/blogassets/react_props_2.png"></imgdiv> <h3>3. Add title and description using props.</h3> Now we have imported the cards, but we don't have titles or descriptions, so we are going to add them by adding <span>title</span> and <span>desc</span> to our <span><SimpleCard></span>. <imgdiv><img src="https://meetprvt.github.io/blogassets/blogassets/react_props_3.png"></imgdiv> Below is the final output. <imgdiv><img src="https://meetprvt.github.io/blogassets/blogassets/react_props_output.png"></imgdiv> That's all; this is how you can create, import, and use reusable components in React.js.