Mastering React: A Complete Tutorial Series for Beginners and Beyond

Chapter 3: Core React Concepts — Components, Props, and Events

This chapter covers the heart of React development — creating components, passing data with props, handling user interactions through events, and conditionally rendering content. These concepts are essential for building dynamic, maintainable, and scalable UIs.

🧠 Why This Chapter Matters

Every React application is built using components — reusable blocks of UI logic. To make these components powerful, you pass props, listen for events, and decide when or whether to render parts of the UI using conditional logic.

This chapter teaches you how to:

• Write function and class components
• Pass and validate props
• Bind and handle events
• Use conditional rendering techniques

✅ 1. React Components — Functional and Class-Based

In React, a component is a function or class that returns JSX. It can be reused and composed with other components to build complex interfaces.

🔹 Functional Component (Modern Standard)

function Welcome() {

  return <h1>Welcome to React!</h1>;

}

🔹 Class-Based Component (Legacy)

import React, { Component } from 'react';

class Welcome extends Component {

  render() {

    return <h1>Welcome to React!</h1>;

  }

}

✅ Functional components with hooks are now the preferred approach.

✅ 2. React Class — Understanding Legacy React

Even though functional components are the present and future, many codebases still use class components.

🔹 Class Component with Props

class User extends React.Component {

  render() {

    return <p>Hello, {this.props.name}</p>;

  }

}

✅ Key concepts:

• this.props accesses incoming data
• You must include a render() method
• Requires super() if using constructor

✅ 3. React Props — Passing Data to Components

Props (short for "properties") are used to pass data from parent to child components.

Example:

function Greeting(props) {

  return <h2>Hello, {props.name}!</h2>;

}

<Greeting name="Alex" />

✅ Destructuring Props (Cleaner Syntax)

function Greeting({ name }) {

  return <h2>Hello, {name}!</h2>;

}

🔹 Default Props

Greeting.defaultProps = {

  name: "Guest"

};

🔍 Props vs State (Preview)

✅ 4. React Events — Handling User Interaction

React wraps native DOM events with its own synthetic event system for better performance and compatibility.

🔹 Handling Click Events

function Button() {

  const handleClick = () => {

    alert("Button clicked!");

  };

  return <button onClick={handleClick}>Click Me</button>;

}

🔹 Input Change Event Example

function InputBox() {

  const handleChange = (e) => {

    console.log("Value:", e.target.value);

  };

  return <input type="text" onChange={handleChange} />;

}

⚠️ Event Binding in Class Components

class Clicker extends React.Component {

  constructor() {

    super();

    this.handleClick = this.handleClick.bind(this);

  }

  handleClick() {

    alert("Clicked!");

  }

  render() {

    return <button onClick={this.handleClick}>Click</button>;

  }

}

✅ With function components and arrow functions, binding is no longer required.

✅ 5. React Conditionals — Conditional Rendering

React offers several ways to conditionally show/hide content.

🔹 Using if (inside function body)

function Status({ isLoggedIn }) {

  if (isLoggedIn) {

    return <h1>Welcome Back!</h1>;

  }

  return <h1>Please Log In</h1>;

}

🔹 Using Ternary Operator (inline)

<p>{isAdmin ? "You have access." : "Access denied."}</p>

🔹 Using && (show only if true)

{cartItems.length > 0 && <p>You have items in your cart.</p>}

🧪 Mini Project: Conditional Greeting Component

function Greeting({ name }) {

  return (

    <div>

      <h2>Hello, {name ? name : "Guest"}!</h2>

      {name && <p>Welcome back, {name}!</p>}

    </div>

  );

}

✅ Use this to test props + conditionals + rendering together

✅ Recap Table: Core React Concepts