For example:

import React, { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("blue");

  return (
    <>
      
My favorite color is {color}!

              type="button"
        onClick={() => setColor("yellow")}
      >Yellow
              type="button"
        onClick={() => setColor("blue")}
      >Blue
              type="button"
        onClick={() => setColor("orange")}
      >Orange
              type="button"
        onClick={() => setColor("violet")}
      >Violet
    
  );
}

ReactDOM.render(, document.getElementById('root'));

We must import Hooks from react. The useState is used to track the application state.

Rules of Hooks:

• Call Hooks from React function components.
• Call Hooks from Top level.
• It cannot be conditional.

Advantages of React

• Makes JavaScript coding easier.
• Template designing made easy.
• Provides amazing developer tools.
• Reusable Components.
• SEO Friendly.

Disadvantages of React

• JSX as a barrier.
• Lack of Documentation.
• Poor Documentation.
• It Covers only the UI Layers of the app and nothing else.

Features of React

Jsx :

• JSX is a preferable choice for many web developers.
• It makes the syntax just like HTML and is used to create React components by developers.
• It is a syntax extension to JavaScript.
• It is super easy for developers to write the building blocks.

  Virtual DOM :

• In this object is a perfect description of the original DOM object
• It will modify only that object in real DOM instead of updating whole objects.
• It compares the difference between the new DOM and previous DOM representation.
• It will reduces the time and cost taken for development.

Performance :

• React divides the complex user interface into unique elements.
• It increase the development time, multiple users can work on each element simultaneously.
• It will perform efficiently.

One-way Data binding :

• It provides good control throughout the application.
• This gives better control over it.
• It is designed to the extent that it can support One-way data binding or Unidirectional dataflow.

Declarative UI :

• It is the best for creating engaging and interactive user interfaces for mobile.
• It will generate a simple view for each state of the application
• In this feature makes React code more readable and easier to fix bugs.

Components :

• Components are the heart and soul of React
• The applications of ReactsJS are created with multiple components.
• React JS components play a huge part in deciding the app visuals and interactions.
• It is made up of several components.