JSX Basics

Master JSX syntax and build your first interactive DataFlow dashboard components

JSX looks like HTML. But it's not. It's JavaScript that creates React elements. Think of JSX as HTML that can run JavaScript expressions inside curly braces. Regular HTML sits there. JSX responds to data changes and user interactions. That's the magic React brings to web development.

What Makes JSX Different

You write something that looks like HTML tags. Babel transforms it into JavaScript function calls. React takes those calls and builds a virtual representation of your UI. Here's the transformation happening behind the scenes:

// DataFlow header — JSX version (what you write)
const header = DataFlow Analytics;

// JavaScript version (what Babel creates)
const header = React.createElement('h1', null, 'DataFlow Analytics');

The JSX version wins every time. Easier to read. Faster to write. Feels natural if you know HTML.

JSX Rules You Must Follow

JSX has stricter rules than HTML. Miss these and your code breaks:

Single Parent Element
Every JSX return needs one parent wrapper. Use fragments if you don't want extra divs.

Self-Closing Tags
Tags like img, input, br must close themselves. <img/> not <img>

camelCase Attributes
HTML's class becomes className. onclick becomes onClick. For example becomes htmlFor.

JavaScript in Braces
Use curly braces to escape into JavaScript land. Variables, expressions, function calls all work.

Your First DataFlow Component

Time to build something real. The DataFlow dashboard needs a stats card that shows key metrics. Revenue, users, orders, growth rate.

// DataFlow stats card — shows revenue metric
function StatsCard() {
  const revenue = 127580;
  const growth = 12.5;
  
  return (
    
      Monthly Revenue
      ${revenue.toLocaleString()}
      +{growth}%
    
  );
}

What just happened?

JSX rendered JavaScript variables inside curly braces. The revenue variable got formatted with toLocaleString() and the growth percentage appeared with a plus sign. Try changing the numbers and running again.

JavaScript Expressions in JSX

Curly braces are your gateway between JSX and JavaScript. Variables, calculations, function calls, conditional logic — all fair game inside those braces.

// DataFlow user greeting with dynamic content
function UserGreeting() {
  const user = "Sarah Chen";
  const hour = new Date().getHours();
  const isWorkingHours = hour >= 9 && hour <= 17;
  
  return (
    
      Hello, {user.split(' ')[0]}
      Current time: {new Date().toLocaleTimeString()}
      Status: {isWorkingHours ? 'Online' : 'Away'}
    
  );
}

What just happened?

Three different JavaScript expressions ran inside JSX. String splitting with split()[0], date formatting with toLocaleTimeString(), and conditional logic with the ternary operator. Try refreshing to see the time update.

Conditional Rendering Patterns

Sometimes you want to show something. Sometimes you don't. JSX handles conditional rendering with JavaScript's logical operators and ternary expressions.

// DataFlow alert system — shows warnings when needed
function AlertBanner() {
  const serverStatus = "online";
  const criticalAlerts = 0;
  const warnings = 3;
  
  return (
    
      {serverStatus === "offline" && (
        Server Down!
      )}
      
      {criticalAlerts > 0 ? (
        {criticalAlerts} Critical Issues
      ) : (
        warnings > 0 && {warnings} Warnings
      )}
    
  );
}

What just happened?

The logical AND operator (&&) shows elements only when conditions are true. The ternary operator (? :) picks between two options. Since there are no critical alerts but 3 warnings, only the warning banner appears. Try changing criticalAlerts to 2.

JSX Attributes and Event Handlers

HTML attributes become JSX props. Event handlers get the on prefix and camelCase names. Functions go inside curly braces.

// DataFlow search bar with event handling
function SearchBar() {
  const handleSearch = (event) => {
    console.log('Searching for:', event.target.value);
  };
  
  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Search submitted!');
  };
  
  return (
    
      
      
    
  );
}

What just happened?

Event handlers attached to JSX elements. onChange fires on every keystroke, onSubmit fires when the form submits. The event.preventDefault() stops the page from refreshing. Type something and check the browser console to see the search logging.

Building a Complete Dashboard Header

Now for something bigger. A complete DataFlow header with logo, navigation, and user info. Multiple JSX concepts working together.

// DataFlow main header component
function DashboardHeader() {
  const user = { name: "Alex Rivera", avatar: "AR", role: "Admin" };
  const notifications = 7;
  const isOnline = true;
  
  return (
    
      
        ⚡
        DataFlow
      
      
      
        Dashboard
        Analytics
        Reports
      
      
      
        {notifications > 0 && (
          {notifications}
        )}
        
          {user.avatar}
          
            {user.name}
            
              
              {isOnline ? 'Online' : 'Offline'}
            
          
        
      
    
  );
}

What just happened?

A complete JSX component combining multiple concepts. Object property access with user.name, conditional rendering for the notification badge, dynamic className with the ternary operator, and nested JSX structure. This is production-ready dashboard code.

JSX Performance Tip

Avoid creating objects and functions directly inside JSX. Bad: onClick={() => doSomething()}. Good: define the handler outside JSX and reference it. React optimizes better when functions don't recreate on every render.

Common JSX Mistakes

Everyone makes these mistakes. Knowing them saves hours of debugging.

Mistake #1: Using class instead of className

JSX compiles to JavaScript. class is a reserved word. Always use className for CSS classes.

Mistake #2: Forgetting to close tags

HTML lets you skip closing tags sometimes. JSX doesn't. <img> must become <img/>.

Mistake #3: Multiple root elements

JSX returns must have one parent element. Use <>...</> fragments when you don't want extra div wrappers.

The DataFlow team runs into these regularly. Set up your linter and these errors catch themselves.

Quiz

Next: Components Overview

Break down complex UIs into reusable component pieces that work together like building blocks.

← Previous Course Index Next →