Part 2: Understanding JSX, Components, and Props

Welcome back to our React.js series! In this second installment, we’ll explore the core concepts of JSX syntax, React components, and how to use props to make your components dynamic and reusable.

What is JSX?

JSX (JavaScript XML) is a syntax extension that allows you to write HTML-like code in your JavaScript files. It makes React components more readable and easier to write.

// JSX Example
const element = <h1>Hello, JSX!</h1>;

// This compiles to:
const element = React.createElement('h1', null, 'Hello, JSX!');

Key JSX Rules:

• Always return a single root element (use fragments <></> for multiple elements)
• Use className instead of class
• Close all tags (<img />, <br />)
• Use camelCase for attributes (onClick, not onclick)

---

Creating Components

1. Function Components

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

// Usage: <Greeting />

2. Arrow Function Components

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

3. Component Composition

function App() {
  return (
    <div>
      <Greeting />
      <p>This is a composed component</p>
    </div>
  );
}

---

Understanding Props

Props (properties) allow you to pass data to components, making them reusable.

Basic Props Example

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

// Usage: <Welcome name="Sarah" />

Destructuring Props

function Welcome({ name, age }) {
  return (
    <h1>
      Hello, {name}! You are {age} years old.
    </h1>
  );
}

// Usage: <Welcome name="Mike" age={30} />

Children Prop

function Card({ children }) {
  return <div className="card">{children}</div>;
}

// Usage:
<Card>
  <h2>Title</h2>
  <p>Content goes here</p>
</Card>

---

Practical Example: User Profile Component

function UserProfile({ name, bio, avatarUrl }) {
  return (
    <div className="profile">
      <img src={avatarUrl} alt={name} />
      <h2>{name}</h2>
      <p>{bio}</p>
    </div>
  );
}

// Usage:
<UserProfile
  name="Jane Doe"
  bio="Frontend Developer | React Enthusiast"
  avatarUrl="https://example.com/avatar.jpg"
/>

---

What’s Next?

In Part 3, we’ll cover:
✅ State management with useState
✅ Event handling in React
✅ Conditional rendering techniques

Exercise for You

Create a Button component that accepts text and onClick props. Use it in your App component with different button texts and click handlers.

---

Enjoyed this tutorial? Subscribe for Part 3! 🎯

Questions? Ask in the comments below!

---

Series Navigation:

🔹 Part 1: Introduction to React
🔹 Part 2: JSX, Components & Props (You’re here)
🔹 Part 3: State and Events
🔹 Part 4: Conditional Rendering