├── Home.js
├── HomeClass.js
└── index.js


/Home.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | function home(props) {
 4 |     return (
 5 |         <div>
 6 |             <h1>
 7 |                 Welcome to  - {props.name} {props.age} </h1> <p>{props.obj.department}-{props.obj.college}</p>
 8 |                 {props.Arr.map((data)=>{return(<p>{data}</p>)})}
 9 |             
10 |         </div>
11 |     );
12 | }
13 | 
14 | export default home;


--------------------------------------------------------------------------------
/HomeClass.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | class HomeClass extends Component {
 5 |     constructor(props) {
 6 |         super(props);
 7 |         this.state={
 8 |             college:'MKCE',
 9 |             department:'AIDS'
10 |         }
11 | 
12 |     }
13 |     ChangeDepartment=() => {
14 |         this.setState({department:'AIML'})
15 | 
16 |     
17 | 
18 |     render() {
19 |         return (
20 |             <div>
21 |                 <h4>College Name:{this.state.college}</h4>
22 |                 <h4>Department Name:{this.state.department}</h4>
23 |                 <button onClick={this.ChangeDepartment}>Change Departmenst Name</button>
24 | 
25 |             </div>
26 |         );
27 |     }
28 | }
29 | 
30 | HomeClass.propTypes = {
31 | 
32 | };
33 | 
34 | export default HomeClass;


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | import Home from './Home';
 7 | import HomeClass from './HomeClass';
 8 | 
 9 | const root = ReactDOM.createRoot(document.getElementById('root'));
10 | root.render(
11 |   <HomeClass />
12 |   //<Home name={'React JS'}
13 |  // age={25}
14 |   //obj={{department:"AIML",college:'MKCE'}}
15 |   //Arr={['Javascript', 'Python','Java']}
16 |   //jsx={<h4>Happy Learning</h4>}/>
17 | );
18 | 
19 | // If you want to start measuring performance in your app, pass a function
20 | // to log results (for example: reportWebVitals(console.log))
21 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
22 | reportWebVitals();
23 | 


--------------------------------------------------------------------------------