REACT MASTER CLASS /// LEARN JSX /// BUILD COMPONENTS /// CAMEL CASE /// REACT MASTER CLASS /// LEARN JSX /// BUILD COMPONENTS /// CAMEL CASE ///

React Syntax & JSX

Learn the language of React components. Write declarative UIs embedding logic seamlessly.

App.jsx
1 / 12
12345
⚛️

Tutor:Welcome to JSX. JSX stands for JavaScript XML. It allows us to write HTML directly inside React, making our code easier to understand and maintain.


Skill Matrix

UNLOCK NODES BY LEARNING JSX RULES.

Concept: JSX Basics

JSX lets us put HTML tags right into JS. Under the hood, it compiles to standard JS.

System Check

What does JSX stand for?

Community Holo-Net

Showcase Your Components

ACTIVE

Built a complex UI with clean JSX syntax? Share your creations!

Support Us

Understanding JSX Rules

Author

Pascual Vila

Frontend Instructor // Code Syllabus

JSX is a syntax extension for JavaScript. It looks like a template language, but it comes with the full power of JavaScript.

1. Return a Single Root Element

To return multiple elements from a component, wrap them with a single parent tag. If you don't want to add extra <div> tags to your HTML, you can use a Fragment: <>...</>.

2. Close All The Tags

JSX requires tags to be explicitly closed: self-closing tags like <img> must become <img />, and wrapping tags like <li>oranges must be written as <li>oranges</li>.

3. camelCase Most Things!

JSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. Therefore, JSX uses camelCase for most attributes. E.g., class becomes className, and onclick becomes onClick.

Under the Hood+

Babel compiles JSX down to React.createElement() calls. This means JSX is basically syntactic sugar. Writing <h1 className="greeting">Hello</h1> is exactly the same as writing:React.createElement('h1', {className: 'greeting'}, 'Hello').

JSX Glossary

JSX

A syntax extension for JS that allows writing HTML-like markup inside a JavaScript file.

snippet.jsx

Fragment

A syntax used to group multiple elements without adding an extra node to the DOM.

snippet.jsx

Expression

Any piece of JavaScript code that resolves to a value. Embedded in JSX with curly braces.

snippet.jsx

className

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

snippet.jsx

camelCase

The naming convention required by JSX for HTML attributes and event handlers.

snippet.jsx

Self-Closing Tags

Tags without children must be closed with a forward slash immediately before the `>`.

snippet.jsx