3.8 jsx presentation

Let's now talk about JSX. If you open your browser's developer tools, switch to the Source tab and walk through the static folder, you will find a number of files that were generated when the React project was built. These files come from the React library itself and from the dependencies declared in package.json.

What's interesting is the code you can see inside those files. It looks unusual — it is not the plain JavaScript you might be used to. You can see HTML-like tags written directly inside what should be JavaScript modules. This is precisely the special syntax called JSX: a friendlier way to describe the markup we want React to render, embedded right next to our component logic.

Why JSX exists

• It lets us write our UI declaratively, with a syntax that looks like HTML.
• A build step (Babel) transforms JSX into regular JavaScript function calls like React.createElement.
• The browser only ever runs the transformed, plain JavaScript output.

So JSX is not actually pure JavaScript — it is a syntax extension that gets compiled down to JavaScript at build time. Feel free to inspect those files yourself: seeing the difference between the JSX we author and the JavaScript the browser ultimately runs is the best way to understand what JSX really is, and why React uses it.

Summary

This lesson introduces JSX, React's syntax extension that bridges HTML-like syntax with JavaScript. The instructor explains how to inspect JSX code using browser developer tools (Sources tab) and clarifies that JSX is not pure JavaScript but rather syntactic sugar that helps developers write code more conveniently. JSX files are integrated into the React library and the overall package structure.

Key points

• JSX is syntactic sugar, not pure JavaScript—it requires transformation to standard JavaScript
• You can inspect JSX code using browser developer tools by navigating to the Sources tab and examining the static folder
• JSX files are part of the React library and the project's package.json structure
• Understanding JSX as a language extension rather than native JavaScript is fundamental to React development

FAQ

What is JSX and why do we need it?

JSX is a syntax extension that allows you to write HTML-like code inside JavaScript. It's part of React and makes component code more readable and convenient, even though it must be compiled into regular JavaScript before execution.

Is JSX actual JavaScript code?

No, JSX is not pure JavaScript. It's syntactic sugar provided by React that gets transformed into standard JavaScript during the build process.

How can I view and inspect JSX code in the browser?

Open your browser's developer tools, navigate to the Sources tab, and look in the static folder. Here you'll see the compiled code structure and can inspect how JSX is processed and transformed.