Profile Photo

React component

Created on: Aug 31, 2024

React Components are the building block of React Application. They are the reusable code blocks containing logics and and UI elements. Components promote efficiency and scalability in web development by allowing developers to compose, combine, and customize them as needed.

Types of Components in React

  1. Functional Components
  2. Class based Components

Functional Component

Functional components are just like JavaScript functions that accept properties and return a React element.

function demoComponent() {
  return <h1>Welcome Message!</h1>;
}

Class Component

These are ES6 classes that extend React.Component.They must have a render() method that returns JSX.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Important points

  • It is recommended in React to break down a component into the smallest possible units and then merge them to create a parent component to increase the code modularity and reusability.

Reference