A Component in React is a reusable piece of UI (User Interface).

Component = Reusable UI Block

Components help divide the UI into small reusable parts.

• Header
• Footer
• Navbar
• Login Form
• Button

1. Functional Component:

This is the most commonly used component in React.

function Welcome() {
  return <h1>Hello React</h1>;
}

export default Welcome;

Using functional Component

import Welcome from './Welcome';

function App() {
  return (
    <div>
      <Welcome />
    </div>
  );
}

export default App;

2. Class Component:

Class components use JavaScript classes.

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello React</h1>;
  }
}

export default Welcome;

Component Naming Rules:

function Header() {} // Correct
function header() {} // Wrong

Component name must start with a Capital Letter.

Component Example

Header

function Header() {
  return <h1>Website Header</h1>;
}

export default Header;

Footer

function Footer() {
  return <h1>Website Footer</h1>;
}

export default Footer;

Use Header Footer Component:

import Header from './Header';
import Footer from './Footer';

function App() {
  return (
    <div>
      <Header />
      <p>Main Content</p>
      <Footer />
    </div>
  );
}

export default App;