React Components: Building Blocks of UI

React applications are built from reusable UI elements called components. Think of them as building blocks. Each component is responsible for rendering a specific part of the user interface and managing its own state.

Key Characteristics of Components:

• Reusability: Components can be used multiple times throughout your application, reducing code duplication.
• Composability: Components can be composed together to create more complex UIs.
• Encapsulation: Components encapsulate their own logic and data, making them independent and easier to maintain.

Types of Components:

• Functional Components: Simple JavaScript functions that return JSX. Recommended for most cases.
• Class Components: JavaScript classes that extend React.Component. Used for more complex logic, state management, and lifecycle methods (though Hooks have largely replaced the need for these).

Example: Functional Component

 function Greeting(props) {
  return (
    <h1>Hello, {props.name}!</h1>
  );
}

function App() {
  return (
    <Greeting name="World" />
  );
} 

Example: Class Component (Less common now)

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

class App extends React.Component {
  render() {
    return (
      <Greeting name="World" />
    );
  }
} 

JSX: JavaScript XML

JSX is a syntax extension to JavaScript that allows you to write HTML-like structures directly within your JavaScript code. It makes your UI code more readable and maintainable.

Key Features of JSX:

• HTML-like Syntax: Uses familiar HTML tags and attributes.
• JavaScript Expressions: Allows you to embed JavaScript expressions within your JSX code using curly braces {}.
• Transpilation: JSX code needs to be transformed into standard JavaScript using tools like Babel.

Example: JSX with JavaScript Expressions

 const name = "Alice";
const element = <h1>Hello, {name.toUpperCase()}!</h1>;

// This JSX renders to: 
Hello, ALICE!

Key Differences from HTML:

• className instead of class: Use className for specifying CSS classes.
• camelCase Attributes: HTML attributes with dashes (e.g., tabindex) are written in camelCase (e.g., tabIndex).
• Must Return a Single Root Element: JSX must return a single root element (e.g., a <div> or a <Fragment>). If you need to render multiple elements, wrap them in a single parent element.

Creating Reusable UI Elements

The power of React lies in its ability to create reusable components. Designing components with reusability in mind leads to cleaner, more maintainable code.

Tips for Creating Reusable Components:

• Props: Use props to pass data into your components. This allows you to customize the component's behavior and appearance based on the data it receives.
• Composition: Design components that can be composed together to create more complex UIs.
• Clear Responsibilities: Ensure each component has a clear and well-defined responsibility.
• Avoid Hardcoding: Avoid hardcoding data or styles directly within your components. Use props or CSS variables instead.
• Documentation: Document your components so others can understand how to use them.

Example: Reusable Button Component

 function Button(props) {
  return (
    <button className={props.className} onClick={props.onClick}>
      {props.children}
    </button>
  );
}

function App() {
  return (
    <div>
      <Button className="primary-button" onClick={() => alert('Button Clicked!')}>
        Click Me!
      </Button>
    </div>
  );
} 

In this example, the Button component is reusable. You can pass different class names, click handlers, and child elements (text) to customize its appearance and behavior.

Anatomy of a React Component

Whether functional or class-based, React components generally share common elements:

• Imports: Import necessary modules and other components (e.g., import React from 'react';).
• Component Definition: The function or class that defines the component.
• Props (Properties): Input data passed from parent components.
• State (Optional): Internal data managed by the component (only in class components or using Hooks in functional components).
• Rendering Logic: The JSX code that determines what the component displays.

Example: Functional Component Structure

 import React from 'react'; // Optional in React 17+ with specific configurations.

function MyComponent(props) {
  // Access props: props.propertyName
  return (
    <div>
      <p>This is a component with the name: {props.name}</p>
    </div>
  );
}

export default MyComponent; // Make the component available for import elsewhere 

Component Lifecycle (Class Components - Less Common Now)

Class components have a lifecycle, which is a series of events that occur from when the component is created to when it is unmounted (removed from the DOM). These events are represented by lifecycle methods.

• constructor(): Called when the component is created. Typically used to initialize state.
• render(): Required. Returns the JSX to be rendered.
• componentDidMount(): Called after the component is first rendered to the DOM. Good for fetching data.
• componentDidUpdate(): Called after the component's props or state have changed.
• componentWillUnmount(): Called before the component is unmounted. Good for cleaning up resources (e.g., timers).
• static getDerivedStateFromProps(): Less commonly used, allows you to update state based on props.
• shouldComponentUpdate(): Can be used to optimize performance by preventing unnecessary re-renders.

Note: Functional components with Hooks provide equivalent functionality to many of these lifecycle methods through the useEffect Hook.

State Management (Functional Components with Hooks)

State is internal data managed by a component that can change over time. In functional components, state is typically managed using the useState Hook.

Example: Using useState

 import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Initial state is 0

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
} 

The useState Hook returns a state variable (count) and a function to update it (setCount). When setCount is called, React re-renders the component with the new state value.