Previous

React Components

  • In React, a component is a fundamental building block.
  • It is a reusable and self-contained piece of code.
  • Components represent specific parts of the user interface (UI).

Benefits of Components

  • Reusability: Components can be reused throughout the application.
  • Modularity: They allow breaking down the UI into smaller, manageable pieces.
  • Maintainability: Code becomes more modular, making it easier to understand and maintain.

Creating React Components

Functional Components

Basic components can be functional. Example:

import React from 'react';

const Greeting = () => {
  return <h1>Hello, Ranjan!</h1>;
};

Class Components

Before Hooks, class components were commonly used. Example:

import React, { Component } from 'react';

class Counter extends Component {
  // ... constructor, state, and render method
}

Props

Components can receive data through props (properties). Example:

import React from 'react';

const WelcomeMessage = (props) => {
  return <h2>Welcome, {props.name}!</h2>;
};

Lifecycle Methods

Class components have lifecycle methods for specific actions. Example:

import React, { Component } from 'react';

class LifecycleDemo extends Component {
  // ... componentDidMount and componentWillUnmount
}

 

Summary

React components serve as the cornerstone of building user interfaces. Understanding their purpose, different types, and features like props and lifecycle methods is crucial for effective React development.

 

Previous