Question

How to create components in React? Explain with example.

Answer 1

Components are the building blocks of creating User Interfaces(UI) in React. There are two possible ways to create a component.

1. Function Components: This is the simplest way to create a component. Those are pure JavaScript functions that accept props object as the first parameter and return React elements to render the output:

   function Greeting({ message }) {
     return <h1>{`Hello, ${message}`}</h1>;
   }

2. Class Components: You can also use ES6 class to define a component. The above function component can be written as a class component:

   class Greeting extends React.Component {
     render() {
       return <h1>{`Hello, ${this.props.message}`}</h1>;
     }
   }