JSX looks like HTML but has slightly different rules, such as using 'className' instead of 'class' for design styles. Most words use camelCase, which means joining words by capitalizing the second one.

JSX vs Standard HTML

Think of these as magic windows into your logic. They allow you to place math, names, or values directly inside your visual elements.

Using Curly Braces

In JSX, elements that don't have text inside must be closed with a slash. This keeps the code clean and easy for the computer to read.

Self-Closing Tags

A way to group multiple items together without adding extra invisible boxes to the final web page. It keeps the website's behind-the-scenes structure tidy.

Grouping with Fragments

Custom building blocks must start with a capital letter. This tells the computer you are using a unique piece you built rather than a standard web tag.

Big Letter Components

Short for 'properties,' these are like labels or settings you give to your building blocks. They allow you to reuse the same piece but with different text or colors.

Passing Information Props

The ability to only show a specific part of the page if a certain rule is true. For example, showing a 'Logout' button only when a user is logged in.

Showing Things Conditionally

A technique to take a list of data and automatically turn each item into a visual element. It is commonly used for showing things like search results or social media posts.

Repeating Items in Lists

How to tell the code what to do when a user clicks a button or types in a box. It connects user behavior to the logic of the app.

Handling User Actions

In TSX, you can define exactly what kind of information a component expects. This prevents bugs, like accidentally trying to use a word where a number is needed.

Setting Data Rules

How the computer automatically figures out what your data is based on how you use it. This helps provide helpful hints while you are typing.

Automatic Type Guessing

A specific way to add comments inside your visual code that the browser will ignore. These are notes meant for you or other people reading the code later.

JSX / TSX Syntax Concepts