In React content rendered by a component can contain other components also, this features allow us to create more complex applications.
Create React App
Type the following command to create a new react app:
npx create-react-app demo
Now, go to the project folder:
cd demo
Create new Header component and type out the below code into Header.js
src\components\Header.js
Example
import React, { Component } from 'react';
class Header extends Component {
render() {
return (
<div>
This is header component.
</div>
);
}
}
export default Header;
Create new Footer component and type out the below code into Footer.js
src\components\Footer.js
Example
import React, { Component } from 'react';
class Footer extends Component {
render() {
return (
<div>
This is Footer component.
</div>
);
}
}
export default Footer;
Now, update default App.js with below code snippet
src\App.js
Example
import React, { Component } from 'react';
import Header from './components/Header';
import Footer from './components/Footer';
class App extends Component {
render() {
return (
<div>
<Header />
<Footer />
</div>
);
}
}
export default App;
When one component uses another like this, a parent-child relationship is formed. In above example, the App component is the parent to the Header and Footer components, and the Header and Footer components are the child of the App component.
Most Helpful This Week
How to pass data from child component to its parent in ReactJS?
How to pass properties from parent component to child component in React JS?
React JS onClick event handler
Example of React Bootstrap Datatable
Create Functional Component using ES6 Arrow Syntax
React JS Count number of checkboxes are checked