Components in React.js

Posted on by

In React.js, components are the building blocks used to create user interfaces. They encapsulate the logic and rendering of a portion of the UI, making it easier to manage and reuse code.

There are two main types of components in React:

  1. Functional Components:
    Functional components are JavaScript functions that receive props (short for properties) as input and return React elements to describe what should appear on the screen. They are typically used for simpler components that don’t need to manage state or lifecycle methods. Example:
   import React from 'react';

   const FunctionalComponent = (props) => {
       return <div>Hello, {props.name}!</div>;
   };

   export default FunctionalComponent;
  1. Class Components:
    Class components are ES6 classes that extend the React.Component class. They have more features than functional components, including the ability to manage state and lifecycle methods such as componentDidMount, componentDidUpdate, etc. Example:
   import React, { Component } from 'react';

   class ClassComponent extends Component {
       render() {
           return <div>Hello, {this.props.name}!</div>;
       }
   }

   export default ClassComponent;

Components can be composed together to create complex user interfaces. They can also accept input data through props, maintain their own internal state (in the case of class components), and communicate with other components by passing callbacks through props.

To use a component, you import it into your application and include it in the JSX markup like any other HTML element. For example:

import React from 'react';
import ReactDOM from 'react-dom';
import FunctionalComponent from './FunctionalComponent';
import ClassComponent from './ClassComponent';

ReactDOM.render(
    <div>
        <FunctionalComponent name="John" />
        <ClassComponent name="Jane" />
    </div>,
    document.getElementById('root')
);

This renders both the FunctionalComponent and the ClassComponent with their respective props passed to them.