InfoparkDailyCAREER TOOLS

React · Lesson 2 of 7

JSX

Writing HTML-like markup in JavaScript, expressions in braces and JSX rules.

JSX lets you write markup inside JavaScript. It looks like HTML but is turned into JavaScript function calls.

  • Put any JavaScript expression inside { }: {user.name}, {price * 12}.
  • A component must return one parent element — wrap siblings in a <div> or a fragment <>…</>.
  • Use className instead of class, and htmlFor instead of for.
  • Close every tag, including <img /> and <br />.
  • Inline styles take an object: style={{ color: "red" }}.

Try it yourself

Edit the code and press Run (or Ctrl/⌘ + Enter). Code runs only in your browser, in a sandbox.

Key points

  • { } holds JavaScript expressions.
  • Return one parent element (or a fragment).
  • className, htmlFor, and self-closing tags.

Quick check

Which attribute sets a CSS class in JSX?

Practice task

Add a skills array to job and show it as a comma-separated line using {job.skills.join(", ")}.

Interview corner

Can browsers run JSX directly?

No. A compiler such as Babel, SWC or esbuild turns JSX into React.createElement (or the new JSX runtime) calls before the browser runs it.

Why can't you use if/else directly inside JSX braces?

Braces accept expressions, not statements. Use a ternary, &&, or compute the value before the return.

Further reading

Official documentation, linked for deeper study. These are outside sites; this lesson's text is our own.

Original lesson written by the InfoparkDaily team · © 2026 InfoparkDaily · Free to learn — no paid course or subscription.