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 use arrow function in React stateless components?
3 Different Examples - How State Works in React?
Component displays Height and Width on window resize
How to create simple React Router to navigate multiple pages?
React JS update Div content on click
React JS Blog CRUD operation
React Props
onClick Event binding and get event name in ReactJs
How to use function inside JSX expression?
Loop inside React JSX