REACT Components

REACT Components
Components are like functions that return HTML elements.
React Components

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.

Components come in two types, Class components and Function components, in this tutorial we will concentrate on Function components.

In older React code bases, you may find Class components primarily used.

It is now suggested to use Function components along with Hooks, instead of Class components.

Class components are still supported, check the Class components section for more information.
Create Your First Component

When creating a React component, the component's name MUST start with an upper case letter.

React components returns HTML code.

Example

Create a Function component called Car

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

Rendering a Component

Now your React application has a component called Car, which returns an

element.

To use this component in your application, refer to it like this:
Example

Display the Car component in the "root" element:

createRoot(document.getElementById('root')).render(
  <Car />
)
``
**Props**

Arguments can be passed into a component as props, which stands for properties.

You send the arguments into the component as HTML attributes.

You will learn more about props in our React Props chapter.
**Example**

Use an attribute to pass a color to the Car component, and use it in the render function:

function Car(props) {
return (

I am a {props.color} Car!

);
}

**Components in Components**

We can refer to components inside other components:
**Example**

Use the Car component inside the Garage component:

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

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Garage />
);

**Reference**
https://www.w3schools.com/react/react_components.asp