React components

 

Definition:
A React Component is an independent and reusable block of code in ReactJS that represents a part of the user interface. Components behave like JavaScript functions but work in isolation and return JSX (HTML-like code). They are the building blocks of React applications and can be classified into Functional Components and Class Components.

---

5.3 React Components

React Components are the basic building blocks of any ReactJS application. Components are independent and reusable pieces of code which return HTML. They serve the same purpose as JavaScript functions but work in isolation.

Types of Components

There are two types of components in React:

1. Functional Components
2. Class Components

---

1. Functional Components

Functional components are simple JavaScript functions that return JSX (JavaScript XML). They are easy to understand and require less code. The function name must start with a capital letter.

Example:

function Welcome(props) {
  return <h1>Welcome {props.name}</h1>;
}

Alternatively, they can be created using arrow functions:

const Welcome = (props) => {
  return <h1>Welcome {props.name}</h1>;
};

Functional components are widely used for simple UI rendering.

---

2. Class Components

Class components are ES6 classes that extend React.Component. They must include a render() method which returns JSX.

Example:

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

Class components are useful when working with state and lifecycle methods.

---

Rendering a Component

To display a component, use it like an HTML tag:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Welcome name="Chitra" />);

---

Components in Components

React allows nesting components inside other components.

Example:

function Car() {
  return <h2>I am a Car!</h2>;
}

function Garage() {
  return (
    <div>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </div>
  );
}

---

Components in Files

React recommends creating separate files for reusability.

Example (Car.js):

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}
export default Car;

Import and use:

import Car from './Car.js';
root.render(<Car />);

---

Props (Properties)

Props are like function arguments passed to components via attributes. They allow data to be passed from one component to another.

Example:

function Car(props) {
  return <h2>I am a {props.color} Car!</h2>;
}
root.render(<Car color="red" />);

Props are read-only and cannot be modified by the child component.

---

State in React

State is a built-in object that stores data or information about a component. Unlike props, state is managed inside the component and can change over time. State is initialized in the constructor and updated using setState().

Example:

class Color extends React.Component {
  constructor(props) {
    super(props);
    this.state = { colorname: "Blue" };
  }

  changeColor = () => {
    this.setState({ colorname: "Golden" });
  }

  render() {
    return (
      <div>
        <h1>My Favorite Color is {this.state.colorname}</h1>
        <button onClick={this.changeColor}>Click to change color</button>
      </div>
    );
  }
}

When state changes, React automatically re-renders the component.

---

Component Constructor

If a component has a constructor(), it initializes state and ensures inheritance using super().

Example with State:

class Car extends React.Component {
  constructor() {
    super();
    this.state = { color: "Red" };
  }

  render() {
    return <h2>I am a {this.state.color} Car!</h2>;
  }
}

Example with Props in Constructor:

class Car extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h2>I am a {this.props.model}!</h2>;
  }
}
root.render(<Car model="Mustang" />);

---

Inter-Component Communication

React applications often require data exchange between components. Parent components can pass data to child components via props.

Example:

class Student extends React.Component {
  render() {
    return (
      <div>
        <h2>Student Information</h2>
        <p>Roll No: {this.props.Roll}</p>
        <p>Name: {this.props.Name}</p>
        <p>Total Marks: {this.props.Marks}</p>
        <Marks English={this.props.English} Maths={this.props.Maths} Science={this.props.Science}/>
      </div>
    );
  }
}

class Marks extends React.Component {
  render() {
    return (
      <div>
        <h3>Marks of Each Subject</h3>
        <p>English: {this.props.English}</p>
        <p>Maths: {this.props.Maths}</p>
        <p>Science: {this.props.Science}</p>
      </div>
    );
  }
}

Here, data flows from Student (parent) to Marks (child) using props.

---

✅ This is the continuous, exam-ready flow covering:

• Definition of Components
• Functional & Class Components with examples
• Rendering Components
• Components in Components & Files
• Props
• State and setState()
• Constructor usage
• Difference between Functional vs Class
• Inter-Component Communication

---