REACT MASTER CLASS /// LEARN JSX /// EVALUATE EXPRESSIONS /// SEMANTIC STRUCTURE /// REACT MASTER CLASS /// LEARN JSX /// EVALUATE EXPRESSIONS /// SEMANTIC STRUCTURE /// REACT MASTER CLASS ///

React JSX Basics

Learn how React blends HTML and JavaScript. Master expressions, syntax rules, and component structure.

Component.jsx
1 / 10
1234567
⚛️

Tutor:Welcome to JSX! It looks like HTML, but it's actually JavaScript. It allows us to write UI structures easily inside our React components.


Skill Matrix

UNLOCK NODES BY LEARNING NEW RULES.

Concept: Syntax

JSX looks like HTML, but it's JS. Because of this, some attributes change. For instance, you must use className instead of class.

System Check

Which attribute is used to define a CSS class in JSX?

Community Holo-Net

Showcase Your Components

ACTIVE

Built a cool UI structure? Share your JSX examples with others.

Support Us

React JSX Basics

Author

Pascual Vila

Frontend Instructor // Code Syllabus

JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file.

The Rules of JSX

JSX is stricter than HTML. You must return a single root element (like a <div> or a <>Fragment</>). You also must explicitly close all tags, even those that don't have closing tags in regular HTML, like <img />.

camelCase Attributes

JSX turns into JavaScript, and attributes written in JSX become keys of JavaScript objects. Since variables can't contain dashes, attributes like stroke-width become strokeWidth, and class becomes className.

JavaScript inside JSX

You can pass any JavaScript expression (like strings, variables, or functions) as dynamic values inside JSX by wrapping them in curly braces { }. This is how React makes UIs dynamic.

View Full Transcript+

This section contains the full detailed transcript of the video lessons. It covers how JSX transforms into `React.createElement` calls, why fragments are important to avoid DOM bloat, and the strictness of XML-like syntax.

JSX Glossary

JSX

A syntax extension for JavaScript that lets you write HTML-like markup in JS.

snippet.jsx

Expression {}

Use curly braces to embed dynamic JavaScript expressions inside JSX.

snippet.jsx

Fragment <>

Lets you group a list of children without adding extra nodes to the DOM.

snippet.jsx

className

The JSX equivalent of the HTML 'class' attribute. Needed because class is a JS reserved word.

snippet.jsx

Self-closing tag

Tags with no children must be explicitly closed with a forward slash.

snippet.jsx

Component

A JavaScript function that returns JSX markup.

snippet.jsx