All Roadmaps›⚛️ React Mastery›Phase 3›JSX Deep Dive

JSX Deep Dive

0/2 in this phase0/36 across the roadmap

📖 Concept

JSX (JavaScript XML) is a syntax extension for JavaScript. It looks like HTML but comes with the full power of JavaScript.

How JSX works: Browsers cannot read JSX. It must be transformed into regular JavaScript. Modern tools like Vite or Babel use react/jsx-runtime to transform JSX into _jsx() function calls.

Key Rules of JSX:

  1. Return a Single Root Element: Every component must return exactly one root element (or a Fragment). This is because a function can only return one value.
  2. Close All Tags: Unlike HTML, all tags in JSX must be self-closed (e.g., <img />) or have a closing tag.
  3. camelCase Everything: Since JSX is JS, attributes are camelCase. class becomes className, onclick becomes onClick, and tabindex becomes tabIndex.
  4. JavaScript in Curly Braces: You can embed any valid JS expression inside { }.

Wait, why not just use HTML? JSX allows you to keep your logic (JS) and your markup (UI) in the same place. This "Locality of Reference" makes components easier to understand and maintain compared to the traditional separation of HTML and JS files.

💻 Code Example

codeTap to expand ⛶
1import React from 'react';
2

3function JsxShowcase() {
4  const user = {
5    name: 'Jane Doe',
6    avatar: 'https://i.pravatar.cc/150?u=jane',
7    isOnline: true
8  };
9

10  const getStatusColor = (online) => online ? 'bg-green-500' : 'bg-gray-500';
11

12  return (
13    <div className="max-w-sm rounded overflow-hidden shadow-lg p-4 bg-white">
14      {/* 1. Attributes are camelCase (className) */}
15      <div className="flex items-center space-x-4">
16        
17        {/* 2. Self-closing tags are required */}
18        <img 
19          className="w-12 h-12 rounded-full" 
20          src={user.avatar} 
21          alt={user.name} 
22        />
23

24        <div className="flex-1">
25          {/* 3. Expressions in curly braces */}
26          <h3 className="text-lg font-semibold">{user.name}</h3>
27          
28          <div className="flex items-center space-x-2">
29            {/* 4. Conditional rendering inside JSX */}
30            <span className={`w-3 h-3 rounded-full ${getStatusColor(user.isOnline)}`}></span>
31            <span className="text-sm text-gray-600">
32              {user.isOnline ? 'Active Now' : 'Offline'}
33            </span>
34          </div>
35        </div>
36      </div>
37

38      {/* 5. Using logical && for short-circuiting */}
39      {user.isOnline && (
40        <button className="mt-4 w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600">
41          Send Message
42        </button>
43      )}
44    </div>
45  );
46}
47

48export default JsxShowcase;

🏋️ Practice Exercise

  1. Convert a snippet of plain HTML (like a navigation bar) into JSX.
  2. Write a component that renders an array of user names into an unordered list using .map().
  3. Try to return two <div> elements from a component without a parent or a Fragment and see what error you get.
  4. Use the 'Babel REPL' (online) to see what a JSX block looks like after it's compiled to plain JavaScript.

⚠️ Common Mistakes

  • Using 'class' instead of 'className'.

  • Forgetting to wrap multiple elements in a Fragment or a parent div.

  • Putting a block-level statement (like a 'for' loop or 'if/else') inside curly braces (only expressions are allowed).

  • Not self-closing tags like
    or .

💼 Interview Questions

🎤 Mock Interview

Practice a live interview for JSX Deep Dive

← PreviousScalable Project StructureNext →Components & Props