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

Component = Reusable UI Block

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;

import Welcome from './Welcome';

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

export default App;

Component Naming Rules:

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

Component name must start with a Capital Letter.