What are Components in React JS?

In React JS, components are the building blocks of a user interface. They encapsulate the UI elements and their behavior, promoting reusability and maintainability. React components can be broadly categorized into two types: functional components and class components. Here's an overview of each:

1. Functional Components:

   - Functional components are stateless and primarily responsible for presenting UI elements. They are simple functions that take props (properties) as input and return React elements.

   - Example:

     ```jsx

     const FunctionalComponent = (props) => {

       return <div>{props.message}</div>;

     };

     ```

2. Class Components:

   - Class components are stateful and can manage their own state. They are defined as ES6 classes and can have additional features such as lifecycle methods.

   - Example:

     ```jsx

     class ClassComponent extends React.Component {

       constructor(props) {

         super(props);

         this.state = { count: 0 };

       }

       render() {

         return <div>{this.state.count}</div>;

       }

     }

     ```

3. JSX Elements:

   - JSX (JavaScript XML) is a syntax extension for JavaScript that looks similar to XML or HTML. JSX allows developers to write HTML elements and components in their JavaScript code. It gets transpiled to JavaScript for the browser to understand.

   - Example:

     ```jsx

     const element = <h1>Hello, React!</h1>;

     ```

4. State and Props:

   - State represents the internal data of a component and can change over time. Props are properties passed to a component by its parent, providing a way to customize and configure the component.

   - Example:

     ```jsx

     class ExampleComponent extends React.Component {

       constructor(props) {

         super(props);

         this.state = { message: 'Hello, React!' };

       }

       render() {

         return <div>{this.state.message}</div>;

       }

     }

     ```

5. Higher-Order Components (HOC):

   - HOCs are functions that take a component and return a new component with enhanced functionality. They are a way to reuse component logic.

   - Example:

     ```jsx

     const withLogger = (WrappedComponent) => {

       return class extends React.Component {

         componentDidMount() {

           console.log('Component is mounted!');

         }

         render() {

           return <WrappedComponent {...this.props} />;

         }

       };

     };

     const EnhancedComponent = withLogger(SomeComponent);

     ```

6. React.Fragment:

   - React.Fragment is a way to group multiple elements without adding an extra DOM element. It is useful when you need to return multiple elements from a component's render method.

   - Example:

     ```jsx

     const MyComponent = () => {

       return (

         <React.Fragment>

           <p>Paragraph 1</p>

           <p>Paragraph 2</p>

         </React.Fragment>

       );

     };

     ```

These are the key components in React JS, each serving a specific role in creating modular and maintainable user interfaces.