How to use Composition in React JS?
Oct 20, 2022 . Admin
Hello Friends,
Today, I would like to show you how to use composition in react js. In this article, we will implement a use composition in react js. if you have a question about react js use composition then I will give a simple example with a solution. you will learn composition in react js example.
In this example how to use composition in react js. I will simply explain in use of composition in react js. So, let's start with the following example.
Step 1: Create React JS AppIn this step, open your terminal and execute the following command on your terminal to create a new react app:
npx create-react-app reactjs-my-exampleStep 2: Create index.js file src/index.js
import React from 'react' import ReactDOM from 'react-dom/client'; //create FancyBorder component function FancyBorder(props){ return( // use children Composition <div style={{background:(props.color),color:'#fff',padding:'20px'}}> {props.children} </div> ); } function Dialog() { return ( <FancyBorder color="blue"> <h1 className="Dialog-title"> Hello Mywebtuts.com </h1> <p> This Is a Blog Web Site: </p> </FancyBorder> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Dialog />);Run React JS App:
npm start
Output: