React Components

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

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.

Using a component 

Now that you’ve defined your Profile component,

you can nest it inside other components. For example, you can export a Gallery component that uses multiple Profile components:

Class Component

A class component must include the extends React.Component statement. This statement creates an inheritance to React.Component, and gives your component access to React.Component's functions.

The component also requires a render() method, this method returns HTML.

import React, { Component } from 'react'

 class Car extends React.Component {

  render() {

    return (

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

    )

  }

}

export  default Car

For example, you can export a Car component  into App.js File.

Create App.js file and the following code.

import React, { Component } from 'react';

import './App.css';

import Hello from './components/Hello';

function App{

  return (

   <div>

    <Hello/>

      

    </div>

  );

}

output is:--

Hello I m Car Class