-

Welcome to Prodos Application, a Product Management Tool
   
   
   );
}
}
export default ProdosHeader
You can see that we created a ProdosHeader component for our React application. This is a stateless component and let’s create a footer React
component for our PRODOS React application as shown in the following code:
import React, { Component } from ‘react’;
import ‘./App.css’;
class ProdosFooter extends Component {
   render() {
   return (
   
   
   
   
   
   
PRODOS a Product Management Tool © 
Dinesh on Java

---

   
   );
   }
   }
   export default ProdosFooter
We created a ProdosFooter React component for our React application. Now, we will use these React components (ProdosHeader and
ProdosFooter) in the Prodos front-end application. Let’s see the following code using the header and footer:
import React, { Component } from ‘react’;
import ProdosHeader from ‘./ProdosHeader’;
import ProdosFooter from ‘./ProdosFooter’;
class ProdosApp extends Component {
   constructor(props) {
   super(props);
   this.state = {
   product1: “Samsung A6 Plus”,
   product2: “iPhone X Plus”,
   product3: “Vivo V15 Pro”
   }
   }
   render() {
   return (