React Functional Components

Functional components

React components are simply a mixture of HTML and JavaScript, which are rendered by React to display our UI. Functional components are components created by using a JavaScript function. This concept is simpler to conceptualize than the class-based one.

const Navbar = () => {
     return (
         <p style={{background: "red", padding: 10 + "px"}}>
           <a href="#">Home</a> |
           <a href="#">About</a> |
           <a  href="#">Play</a>
         </p>
  );
}

Exporting this Navbar function into our application creates a rudimentary navbar. The class-based React components have a render method used to render the elements of the UI. This render method is absent from the functional component. We only have to use the return keyword to return our elements so that React can render them.

Look at the widget below. We have a component called App that’s the parent or root component. This means that ReactDOM renders the App component. All other components inside our application must be put inside the App component. This component can also have a state like the class-based component. This is achieved with hooks.

Make changes to the application, and click the “Run” button to see the changes.