React Introduction & JSX

Component-based UI architecture and JSX syntax

React is a JavaScript library created by Meta for building dynamic user interfaces. React allows developers to build large web applications that can change data without reloading the page.

Understanding JSX

JSX stands for JavaScript XML.

JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.

JSX tags can be self-closing, and attributes use camelCase (like className instead of class).

First React Component with JSX

Try It Yourself »

function WelcomeBanner({ username, level }) {
  return (
    <div className="banner p-4 bg-slate-900 text-white rounded-lg">
      <h1 className="text-2xl font-bold">Hello, {username}!</h1>
      <p className="text-emerald-400">Current Level: {level}</p>
    </div>
  );
}

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Which attribute in JSX replaces the standard HTML "class" attribute?

Next: React Components & Props »