Building with React: Dive into JSX, Components, and Props! (React Day 2)

Source: Dev.to

🎉 Welcome Back, React Rookies‑Turned‑Pros!

After Day 1’s big‑picture overview, today we dive into the core pieces that make React tick:

• JSX – the syntax that lets you write UI‑like markup inside JavaScript.
• Functional components – the building blocks of modern React.
• Props – the read‑only data that flows from parent to child.
• Reusability & composition – how to stitch components together for killer apps.

We’ll demystify JSX, compare it to vanilla JS, share best practices, give live‑code examples (compatible with the Vite setup from Day 3), highlight common pitfalls, and visualize key flows with diagrams. Real‑world scenarios illustrate each concept in action. By the end you’ll be crafting UIs like a seasoned dev. Let’s component‑ize!

📦 JSX (JavaScript XML)

JSX is React’s syntax extension that lets you write HTML‑like code directly inside JavaScript. It isn’t real HTML—Babel transpiles it into React.createElement calls.

Why JSX Matters

• Blends markup and logic seamlessly.
• Improves readability and maintainability vs. manual DOM manipulation.

Behind the Scenes

1. Write JSX →
2. Babel transpiles to plain JavaScript (React.createElement).
3. React uses those element objects to build the virtual DOM.

Live Example

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

Transpiled version:

// JavaScript after Babel
const element = React.createElement('h1', null, 'Hello, React!');

Rendering in a component

import React from 'react';

function App() {
  return <h1>Hello, React!</h1>;
}

Paste this into src/App.jsx (or App.tsx) and run npm run dev. The heading appears instantly.

JSX vs. Plain JavaScript

Bottom line: JSX is just syntactic sugar; browsers ultimately see the JavaScript version.

Diagram – JSX Transpilation Process

JSX code
   │
   ▼  (Babel)
React.createElement calls
   │
   ▼  (React runtime)
Virtual DOM → Real DOM

Best Practices

• Component names → PascalCase (MyComponent).
• Self‑closing tags → <Component />.
• Multi‑line returns → wrap in parentheses: return (…);.
• Prefer CSS classes over inline‑style objects (use inline styles only when necessary).

Common Mistake

Treating JSX like a string and concatenating it. JSX produces objects, so compose UI with components instead of string concatenation.

Real‑World Scenario

In a blog app, a post preview is rendered with:

// Example placeholder – insert actual JSX for a post preview here

JSX lets you mix data (post.title) and structure (<h2>{post.title}</h2>) effortlessly.

⚛️ Functional Components

Functional components are plain JavaScript (or TypeScript) functions that return JSX. Since React 16.8 (Hooks), they’re the default choice, replacing most class components.

Why Functional?

• Simpler syntax, no this binding.
• Pair perfectly with Hooks for state, side‑effects, context, etc.

Live Example

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

function App() {
  return <Welcome name="Sara" />;
}

Renders “Hello, Sara!”.

Structuring Tips

• Keep components small – one UI concern per component (Single Responsibility Principle).
• One file per component – export default the component.
• Use arrow functions for brevity:

const Button = () => <button>Click</button>;

• Folder layout (scalable):

src/
 └─ components/
      └─ Button/
           ├─ index.jsx
           └─ styles.module.css

Common Mistake

Returning multiple sibling elements without a wrapper. Fix with Fragments:

return (
  <>
    <div>One</div>
    <div>Two</div>
  </>
);

Real‑World Scenario

A ProductCard functional component displays an item’s image, name, price, and “Add to Cart” button. The same component is reused across product grids, search results, and recommendation carousels.

📤 Props (Properties)

Props are read‑only data passed from a parent component to a child, similar to function arguments. They enable dynamic, reusable UI.

How Props Work

// Parent → Child
<Child name="Alice" age={30} />

// Child receives them
function Child(props) {
  return (
    <p>{props.name} is {props.age} years old.</p>
  );
}

Live Example

function Greeting(props) {
  return (
    <p>Hi, {props.name}! You are {props.age} years old.</p>
  );
}

function App() {
  return (
    <>
      <Greeting name="Bob" age={25} />
      <Greeting name="Carol" age={28} />
    </>
  );
}

Two personalized greetings appear. Props flow one‑way (parent → child).

Common Pitfalls

Visualizing Props Flow

Parent Component
   │  passes props
   ▼
Child Component (receives props)
   │  may pass further down
   ▼
Grandchild …

Real‑World Scenario

In a social‑media feed, a Post component receives:

<Post author={user} content={text} timestamp={date} />

The component renders each post without hard‑coding any data.

🔁 Reusability

Reusability means writing a component once and using it everywhere with different props or configurations.

How to Achieve It

• Design components to accept generic props.
• Keep internal logic independent of specific data.

Live Example – Reusable Button

function Button({ label, color, onClick }) {
  return (
    <button style={{ backgroundColor: color }} onClick={onClick}>
      {label}
    </button>
  );
}

function App() {
  return (
    <>
      <Button label="Submit" color="green" onClick={() => alert('Submitted!')} />
      <Button label="Cancel" color="red" onClick={() => alert('Canceled!')} />
    </>
  );
}

One component, two distinct behaviors → DRY and flexible.

Best Practices

• Make optional props truly optional (provide sensible defaults).
• Use TypeScript or prop-types to enforce prop shapes and catch errors early.

Real‑World Scenario

A Chart component in a dashboard receives:

<Chart type="line" data={salesData} options={chartOptions} />

The same component renders different visualizations without duplication.

🧩 Composition

Composition is the art of nesting components to build complex UIs from simple, reusable pieces. The special children prop enables flexible “slots”.

How It Works

• Parent wraps children in JSX.
• Child renders them via {props.children}.

Live Example – Card Composition

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

function App() {
  return (
    <Card>
      <h2>Product Title</h2>
      <p>Short description of the product.</p>
      <button>Add to cart</button>
    </Card>
  );
}

Card provides the layout; the caller decides the inner content.

Benefits

• Separation of concerns – layout vs. content.
• Extensibility – swap out any child without touching the parent.

✅ TL;DR Checklist

• ✅ Use JSX for readable markup; remember it compiles to React.createElement.
• ✅ Write functional components; keep them small and focused.
• ✅ Pass props read‑only from parent → child; avoid mutating them.
• ✅ Design components for reusability – generic props, TypeScript/prop‑types.
• ✅ Leverage composition (children) to build flexible UI structures.

Now go ahead, create a tiny UI with a reusable Button, a Card wrapper, and a couple of Greeting components—just like the examples above. Happy coding! 🚀

Component Example

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

function App() {
  return (
    <Card title="Profile">
      <p>Name: Dana</p>
      <p>Job: Developer</p>
    </Card>
  );
}

The Card component composes arbitrary content. You can nest deeper for hierarchies.

Best Practices

• Favor composition over inheritance – React encourages building UI by combining small, reusable components rather than relying on class‑based inheritance.
• Keep nesting logical – If a component tree becomes too deep, consider refactoring into smaller, focused components.

Real‑World Scenario

In a news app, an Article component might be composed of:

• Header
• Body
• Comments

Each section is reusable across different stories, while the Article component allows custom inner content (e.g., different layouts, ads, or related links).

Recap & Next Steps

• You’ve mastered JSX, functional components, props, and the art of reuse/composition – the core of scalable React apps.
• Try it yourself: Build a mini profile page using the Card pattern above.
• Common theme: Keep your UI declarative and modular.
• Stuck on a mistake? Debug with React DevTools.

Next up: Day 3 – State and Lifecycle!
What’s your favorite example so far? Keep building! 🚀