What are the ways to write react components?

here are two ways of writing a react component

• Functional component
  • It uses a simple function which returns the JSX
• Class-based component
  • It used the class keyword introduced in ES6. it implements render lifecycle method which returns the JSX.

Example of functional component

Example of class-based component

/* Class based component */
import React, { Component } from 'react';
import { Text } from 'react-native';

export default class Greeting extends Component {
    render() {
        return (
            <Text>Hello {this.props.name} !</Text>
        );
    }
}

/* Functional component */
import React, { Component } from 'react';
import { Text } from 'react-native';

export default function Greeting(props) {
        return (
            <Text>Hello {props.name} !</Text>
        );
}

cases are known as a presentational or dumb component. The functional component gets information via props from its parent component and renders the information. You can see that the functional component accepts props as an argument. ES6 arrow function also is used to define a functional component. The functional component doesn’t store any state and also doesn’t override any lifecycle method of React component. The class-based component has the ability to store state within the component and based on its state value behave differently. The latest version of React 16.8 has included a new feature called React hooks by which we can add state in a functional component.