different ways to write a function in jsx

 in class

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

==

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

=

import React from 'react';

import ReactDOM from 'react-dom/client';

class Car extends React.Component {

  render() {

    return <h2>Hi, I am a Car!</h2>;

  }

}

const container = document.getElementById('sandy');

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Car />);

=

usign funciton 

function Car(props) {

  return <h2>I am a {props.color} Car!</h2>;

}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Car color="red"/>);

          

======