React - Components

Buliding Blocks

Reusable

n React, components are the building blocks of a user interface. A component is a self-contained piece of code that defines a part of the UI and its behavior. Components can be reused and combined to create complex user interfaces.

Types of Components
Functional Components ( state less components)

These are simple JavaScript functions.
They take input (called props) and return JSX.
Example:
jsx
Copy code
function Greeting(props) {
return

Hello, {props.name}!

;
}

// Usage

Class Components ( state components)

These are ES6 classes that extend React.Component.
They have more advanced features, such as lifecycle methods and state.
Example:
jsx
Copy code
class Greeting extends React.Component {
render() {
return

Hello, {this.props.name}!

;
}
}

// Usage

Features of Components
Reusability

Components can be reused across the application, making your code more organized and modular.
Props (Properties) - default {obj}

Props are inputs passed to components to make them dynamic.
Example:
jsx
Copy code
function Welcome(props) {
return

Welcome, {props.user}!

;
}
State

State is used to store data inside a component. It can change over time.
Example:
jsx
Copy code
function Counter() {
const [count, setCount] = React.useState(0);

return (

Count: {count}

setCount(count + 1)}>Increase

);
}
Composition

Components can contain other components to build complex UIs.
Example:
jsx
Copy code
function App() {
return (

);
}
Why Use Components?
Maintainability: Keeps your code clean and easy to debug.
Reusability: Write once and use multiple times.
Modularity: Breaks down a large UI into smaller, manageable parts.
Scalability: Makes it easier to scale applications as the codebase grows.

function

function App() {

let user ="Ranjith";

return (

<>

{/* function call /}
{/ */}

{/* props */}

{/* component call */}
    {/* <Footer/> */}

{/*props */}
    <Footer user ="srt"/>

<Content/>


</>

);

}

export default App;

EX :

function Header() {
return (

Todo List

);
}

class

import React from "react"; //react library

// c.name inheritance component
class Footer extends React.Component {
// class function
render() {

   console.log(this.props);

return (
  <footer>
    <h2>footer</h2>
  </footer>
)

}
}

export default Footer;