Welcome back to our React Learning Series!, we already set up React, and created a portfolio page. Today, we’ll dive into JSX and Components, the heart of React.

What is JSX?

JSX stands for JavaScript XML.
It allows us to write HTML-like code inside JavaScript, which React then transforms into actual DOM elements.

👉 Without JSX:

const element = React.createElement("h1", null, "Hello, React!");

const element = React.createElement("h1", null, "Hello, React!");

👉 With JSX:

const element = <h1>Hello, React!</h1>;

const element = <h1>Hello, React!</h1>;

Features of JSX:

1. Looks like HTML but is actually JavaScript.
2. Expressions in Curly Braces {} – You can use variables inside JSX.

const name = "Anand";
const element = <h2>Hello, {name}!</h2>;

const name = "Anand";
const element = <h2>Hello, {name}!</h2>;

Must return a single parent element –

return (
  <div>
    <h1>Title</h1>
    <p>Description</p>
  </div>
);

return (
  <div>
    <h1>Title</h1>
    <p>Description</p>
  </div>
);

❌ You can’t return two sibling elements without a parent.

What are Components?

Components are independent, reusable pieces of UI.
Think of them like LEGO blocks – each block is small, but when combined, they create something bigger.

Types of Components in React

Functional Component (Modern & Preferred)

A Functional Component is a plain JavaScript function that accepts props (if needed) and returns JSX to display UI.

A simple JavaScript function that returns JSX.

• It does not need a class or this keyword.
• It’s the most common and modern way to write components.

function Welcome() {
  return <h2>Welcome to React!</h2>;
}

export default Welcome;

function Welcome() {
  return <h2>Welcome to React!</h2>;
}

export default Welcome;

Arrow Function Component

An Arrow Function Component is a functional component written with arrow function syntax (()=>{}) to make code shorter and modern.

A shorter version of functional components using ES6 arrow function syntax.

• Cleaner and preferred for small components.

const Welcome = () => {
  return <h2>Welcome to React!</h2>;
};

const Welcome = () => {
  return <h2>Welcome to React!</h2>;
};

Class Component (Older, Less Used Now)

A Class Component is a component created using ES6 classes. It includes a render() method and can use lifecycle methods, but is less common today because functional components + hooks are more powerful and simpler.

Before hooks(We will learn in React Hooks later) were introduced (React 16.8), developers used class components to handle state and lifecycle methods.

• They use the class keyword and extend React.Component.
• Require render() method to return JSX.

import React, { Component } from "react";

class Welcome extends Component {
  render() {
    return <h2>Welcome to React!</h2>;
  }
}

export default Welcome;

import React, { Component } from "react";

class Welcome extends Component {
  render() {
    return <h2>Welcome to React!</h2>;
  }
}

export default Welcome;

Quick Comparison

Creating Your First Component

👉 Create a new file Header.jsx in the src/components/ folder.

function Header() {
  return (
    <header>
      <h1>My Portfolio</h1>
      <p>Learning React step by step 🚀</p>
    </header>
  );
}

export default Header;

function Header() {
  return (
    <header>
      <h1>My Portfolio</h1>
      <p>Learning React step by step 🚀</p>
    </header>
  );
}

export default Header;

👉 Import it in App.jsx:

import Header from "./components/Header";

function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

export default App;

import Header from "./components/Header";

function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

export default App;

🎉 Congratulations! You just created and used your first React component.

Why Use Components?

• Reusable – You can use the same component in multiple places.
• Readable – Small, separate files make your app easier to understand.
• Maintainable – Updating one component automatically updates everywhere it’s used.

Example:

function Button() {
  return <button>Click Me</button>;
}

// Can be reused in multiple places:
<Button />
<Button />

function Button() {
  return <button>Click Me</button>;
}

// Can be reused in multiple places:
<Button />
<Button />

Summary of Day 3

• JSX lets us write HTML-like syntax inside JavaScript.
• Components are the building blocks of a React app.
• We built our first component (Header) and used it in App.jsx.
• React apps are simply a tree of components working together.

Next (Day 4): Props in React – Passing Data to Components