What are the types of React component ?

  • It is one of the core building blocks of React.
  • In React we develop every application and it will be made of pieces, that is known as component.
  • Components make the task of building UIs much easier.
  • We see that UI broken down into multiple individual pieces called components and work on them independently and merge them all in a parent component which will be your final UI.
  • React Component basically return a piece of JSX code that tells what should be rendered on the screen.
  • In React component there are two types:
    • Functional Components
    • Class Components

Functional Components

  • Functional components are simply JS functions.
  • In React we can create Functional Component by writing a JS function.
  • To create React app efficient, we use functional component only when we are sure that our component does not require to interact with any other components.
  • It does not require data from other components.

For example,

const Democomponent=()=>

    {

            return <h1>Welcome to Kaashiv!</h1>;

    }

Class Components

  • The class components are much like the functional component but has a few additional capabilities that makes class component a little more complicated than the functional components.
  • The class components can work with each other where functional components are not aware of the other components in your program.
  • From one class component to other class components, we can pass the data.
  • In React we use JavaScript ES6 classes to create class-based components.

For example,

class Democomponent extends React.Component
   {
       render(){
             return <h1>Welcome to Kaashiv!</h1>;
      }
  }
Leave a Reply

Your email address will not be published.

You May Also Like

What is Prop Drilling ?

We pass a prop with another component with the help of all the components that come between, this method is known as prop drilling. Prop drilling is basically a situation…
View Answer

What is React DOM ?

It is an object which exposes a number of top level APIs to interact with the browser DOM. It provides DOM-specific methods that can be used at the top level…
View Answer

What is React Hooks ?

Hooks are the new feature added in the React 16.8 It lets you use state and different React functions without writing a class. React concepts does not replace your knowledge.…
View Answer