1.Component What is component? means function return HTML elements javaScript functions that return JSX independent and reusable bits of code Starts with Capital letters in one file, multiple components why components is used? Reusability – use the same UI in many places Modularity – split big UI into small parts Easy to manage & update Clean, organized code Types of Functional Component 1.Functional component syntax: JavaScript Function State: useState() LifeCycle:useEffect() Hooks: supported code length: less performance:faster React Recommendation:Preferred example function App(){ return( <div> <h1> Hello React </h1> <p> This is my first React App </p> </div> ); } export default App; Enter fullscreen mode Exit fullscreen mode 2.Class Component syntax: ES6 State: this.state LifeCycle:lifecycle methods Hooks: not supported code length: more performance:slightly slower React Recommendation:old example import React, { Component } from "react"; class App extends…