# TSX Fundamentals
Course: [React](https://www.devtutorials.ai/learn/react) · Section: React Fundamentals
Source: https://www.devtutorials.ai/learn/react/react-fundamentals/tsx-fundamentals
> What TSX is and why React uses it, TSX syntax, the rules every TSX element follows, putting values inside { }, comments, rendering elements to the page, and Fragments.
## TSX Introduction
**TSX** (TypeScript XML) lets you write HTML-like code inside a TypeScript file. Files that use it end in `.tsx`.
A React component uses TSX to describe what should appear on the screen. TSX is the TypeScript version of **JSX** (JavaScript XML).
### Real-World Example
A product page in an online shop shows the title, price and stock of one book. The developer writes the layout once in TSX: `
{book.title}
` and `
Price: ₹{book.price}
`.
When the page loads a different book, the same TSX shows the new values. No HTML is copied or changed by hand.
TSX is HTML-like code inside TypeScript. It describes what a React component shows on the screen.
## Why TSX?
Without TSX, you would build every element with a function call. TSX gives you a shorter way to write the same thing.
- **Easy to read** — The code looks like the page it creates.
- **HTML and logic together** — Values and conditions sit right next to the markup that uses them.
- **Type safety** — TypeScript warns you about mistakes, such as a missing prop, before the app runs.
- **Helpful errors** — The compiler points to the exact line of a broken tag.
### TSX Is Turned Into JavaScript
The browser cannot read TSX. Before the app runs, the TypeScript compiler turns every tag into a plain JavaScript function call.
These two lines create the same heading:
```tsx
// With TSX
const heading =
Book Corner
;
// What the compiler turns it into (simplified)
const heading = jsx("h1", { className: "title", children: "Book Corner" });
```
Every Run button in this course does the same thing: it compiles your TSX with the TypeScript compiler, then runs the result.
TSX is compiled to JavaScript before the browser runs it.
## Introduction to TSX Syntax
A TSX element looks like an HTML tag. You can store it in a variable, return it from a function, or pass it to another function.
{welcome}
Fresh books every week.
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
The variable `welcome` holds a TSX element. Writing `{welcome}` inside the `
` puts it on the page.
### Multi-Line TSX
When TSX spans more than one line, wrap it in round brackets `( )`. This tells TypeScript where the TSX starts and ends.
```tsx
return (
Book Corner
);
```
## TSX Rules and Conventions
TSX looks like HTML, but it follows stricter rules. Breaking a rule gives an error when the code is compiled.
### Rule 1: Return One Parent Element
A component must return a single element at the top. Wrap sibling elements in one parent, such as a `
`.
```tsx
// Wrong: two elements at the top
return (
Book Corner
Fresh books every week.
);
```
The compiler stops with: `JSX expressions must have one parent element.`
A component returns one parent. A Fragment groups the elements without adding a tag.
### Rule 2: Close Every Tag
Every tag must be closed. Tags with no content, such as ``, `` and ` `, close themselves with `/>`.
```tsx
```
### Rule 3: Use className Instead of class
`class` is a reserved word in JavaScript. In TSX, write `className` to add a CSS class.
### Rule 4: Use camelCase for Attributes
Attributes with two words join them, with the second word capitalised. For example, `onclick` becomes `onClick` and `tabindex` becomes `tabIndex`.
### Rule 5: Start Component Names With a Capital Letter
`` is a component. `` is treated as an unknown HTML tag.
The lab below follows all five rules.
Book Corner
);
}
`,
"App.css": `.shop {
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 12px;
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
Press **Search** in the preview. The console shows "Search clicked", because `onClick` connects the button to the function.
Try removing the `/` from ` ` and press ▶ Run. The compiler shows an error and names the line.
## Embedding Expressions in TSX
Curly braces `{ }` let you put a JavaScript value inside TSX. Anything inside the braces is worked out first, and the result is shown on the page.
You can put these inside `{ }`:
- **Variables** — `{title}`
- **Maths** — `{price * 2}`
- **Function calls** — `{title.toUpperCase()}`
- **Conditions** — `{stock > 0 ? "In stock" : "Out of stock"}`
{title}
Price: {formatPrice(price)}
Two copies: {formatPrice(price * 2)}
Shout it: {title.toUpperCase()}
{stock > 0 ? "In stock" : "Out of stock"}
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
The last line shows "Out of stock" because `stock` is `0`. Change `stock` to `5` and press ▶ Run.
### Expressions in Attributes
You can also use `{ }` for attribute values. Use quotes for fixed text and braces for values.
```tsx
```
### What You Cannot Put Inside { }
Only **expressions** work inside `{ }`. An expression is code that produces a value. Statements such as `if` and `for` do not produce a value, so they cause an error.
```tsx
// Wrong
{if (stock > 0) { "In stock" }}
// Correct
{stock > 0 ? "In stock" : "Out of stock"}
```
Inside `{ }`, use a value, not an instruction. Use the `? :` operator instead of `if`.
## TSX Comments
Inside TSX, a comment goes inside curly braces: `{/* comment */}`. Outside TSX, in normal TypeScript code, use `//` as usual.
{shopName}
A comment can also
span several lines.
*/}
Open every day, 9 am to 9 pm.
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
The preview shows only the heading and the paragraph. The comments are removed when the code is compiled.
## Rendering TSX Elements
**Rendering** means showing a TSX element on the page. React needs two things for this: a place on the page, and the element to show there.
1. `index.html` has an empty box: ``.
2. `createRoot` connects React to that box.
3. `render` shows the element inside the box.
```tsx
const root = createRoot(document.getElementById("root")!);
root.render();
```
The `!` after `getElementById(...)` tells TypeScript that the element is sure to exist.
React shows your element inside the empty div id="root" box.
### Rendering Updates the Page
Calling `render` again with a new element updates the page. React changes only the parts that are different.
Book Corner
Visitors today: {visitors}
);
}
showCounter();
setInterval(showCounter, 1000);
`,
}}
/>
The number goes up every second. Each call to `render` creates a new element, and React updates only the number.
In real apps, you call `render` once, for ``. Components then update themselves with **state**, which you will learn in a later lesson.
## Fragments in TSX
A component can return only one element. If you have two or more elements, you must put them inside one wrapper.
A **Fragment** is a wrapper that does not show on the page. You write it as `<>` at the start and `` at the end.
You can also use a `
` as the wrapper. But a `
` is added to the page as an extra tag. A Fragment adds nothing.
A div wrapper stays on the page. A Fragment leaves nothing behind.
Atomic Habits
by James Clear
);
}
return (
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
// Print the real HTML that React created.
setTimeout(() => {
console.log(document.getElementById("root")!.innerHTML);
}, 100);
`,
}}
/>
Look at the console. The `
` and `
` sit directly inside `
`. The Fragment left no tag of its own.
### The Long Form: Fragment
Sometimes a Fragment needs extra information, called a `key`. React uses a key when you show a list of items. You will learn about it later.
The short form `<>` cannot hold a key. So in that case, use the long form: import `Fragment` from React and write `` and ``.
```tsx
import { Fragment } from "react";
{book.title}
{book.author}
```
Easy Way to Remember: need a wrapper but no extra tag? Use `<>` and ``.
## Common mistakes
| Mistake | What you see | Fix |
|---|---|---|
| Returning two elements side by side | `JSX expressions must have one parent element.` | Wrap them in `<>` and `` or a `
` |
| Leaving a tag open, such as ` ` | `JSX element 'br' has no corresponding closing tag.` | Close it: ` ` |
| Writing `class="title"` | The class may not work, and TypeScript warns | Write `className="title"` |
| Writing `onclick` in lower case | The click does nothing | Write `onClick` |
| Putting `if` inside `{ }` | `Expression expected.` | Use `condition ? a : b` |
| Writing a comment as `` | The comment shows on the page or causes an error | Write `{/* comment */}` |
| Forgetting `{ }` around a variable | The page shows the word `title`, not its value | Write `{title}` |
| Multi-line TSX without `( )` after `return` | The component shows nothing | Wrap the TSX in `( )` |
## Check Yourself
## Exercises
## What to Remember
- TSX is HTML-like code in TypeScript. The compiler turns it into JavaScript before the app runs.
- Use `{ }` to put values in TSX, return one parent element, and close every tag.
- Use a Fragment `<> ` to group elements without adding an extra tag.
Next: Components
