JSX

In Creating a React Application, we saw how to set up a React project. Now we get into actual React code. The syntax you use to write UI in React is called JSX -- this lesson covers what JSX is and its basic rules, with examples kept as simple as possible.

What Is JSX?

JSX is a syntax that looks a lot like HTML, but is actually an extension of JavaScript. Most React components use JSX to describe what the UI should look like:

// JSX, HTML'e benziyor ama aslında JavaScript'in bir uzantısı.
// Tarayıcı bunu doğrudan anlamaz -- bir derleyici (Babel/Vite) bunu
// arka planda normal bir JavaScript fonksiyon çağrısına çevirir.
const element = <h1>Merhaba, React!</h1>;

// Yukarıdaki satır, aşağıdakiyle aynı anlama gelir (JSX olmadan yazılsaydı):
// const element = React.createElement("h1", null, "Merhaba, React!");

console.log(element);

This code looks like HTML, but it's really assigning a value to a JavaScript variable (element). The browser can't understand JSX directly -- a compiler (Babel) that runs automatically inside a Vite project turns this code into plain JavaScript function calls the browser understands. You never need to do this step by hand.

HTML vs. JSX

JSX looks like HTML, but it isn't the same thing. One of the most important differences: JSX is, in the end, a JavaScript value -- you can assign it to a variable, return it from a function, or put it in a list. Plain HTML can't do any of that.

There's also a naming difference (we'll see this in "Attributes and className" below). But overall, the look is largely the same as HTML -- tags like <div>, <h1>, and <button> will look familiar.

JavaScript Inside JSX: Curly Braces `{ }`

The most powerful part of JSX is that you can embed real JavaScript inside it. You do this with a single curly brace { }:

// Süslü parantez { } içine, sonuç üreten HERHANGİ bir JavaScript ifadesi
// yazabilirsin: bir değişken, bir toplama işlemi, bir fonksiyon çağrısı...
const name = "Ayşe";
const greeting = <h1>Merhaba, {name}!</h1>;

const a = 5;
const b = 3;
const total = <p>Toplam: {a + b}</p>;

function shout(text) {
  return text.toUpperCase();
}
const loud = <p>{shout("react öğreniyorum")}</p>;

console.log(greeting, total, loud);

Anything that produces a value can go inside the curly braces: a variable ({name}), a calculation ({a + b}), or a function call ({shout(...)}). Things that don't produce a value (like an if block) can't go here -- we'll see why in "A Quick Look at Conditional Rendering" below.

Attributes and className

You use HTML attributes (src, alt, class, etc.) in JSX too, but with two important differences:

// JSX'te attribute'lar HTML'e çok benzer, ama birkaç fark var:
// 1) "class" yerine "className" kullanılır (class, JavaScript'te ayrı bir anlam taşıyor).
// 2) Attribute değerleri de { } ile bir JavaScript değişkeni olabilir.
const userName = "ayse";

const avatar = (
  <img className="avatar" src={`/images/${userName}.png`} alt="Kullanıcı avatarı" />
);

// Etiketin kendisi kapanmıyorsa (örn. <img>, <input>, <br>), JSX'te
// "self-closing" olmak ZORUNDADIR -- sonuna / eklenir.
const divider = <hr />;

console.log(avatar, divider);

First: instead of HTML's class, JSX uses className (because class already means something else in JavaScript). Second: just like with text content, you can bind an attribute's value to a JavaScript expression using curly braces { }.

JSX Rules

JSX has a few simple rules you need to follow:

// JSX'in birkaç basit ama kesin kuralı var:

// 1) Bir JSX bloğu, TEK bir kök (root) elemente sahip olmalı.
// Bu ÇALIŞMAZ: <h1>Başlık</h1><p>Metin</p>  (iki kardeş element, tek kök yok)
// Bunun yerine bir <div> ile (ya da aşağıdaki gibi <> </> ile) sarmalanır:
const withDiv = (
  <div>
    <h1>Başlık</h1>
    <p>Metin</p>
  </div>
);

// <> </> ("Fragment"), fazladan bir <div> eklemeden aynı işi yapar --
// DOM'a görünmeyen, yalnızca JSX kuralını karşılamak için var olan bir sarmalayıcı.
const withFragment = (
  <>
    <h1>Başlık</h1>
    <p>Metin</p>
  </>
);

// 2) Attribute isimleri camelCase yazılır: "onclick" değil "onClick",
// "tabindex" değil "tabIndex".

// 3) JavaScript'te "class" bir anahtar kelime olduğu için "className" kullanılır.

console.log(withDiv, withFragment);

The most important one: a JSX block must have a single root element -- you can't return two sibling elements side by side. You can wrap them in a <div>, or use <> </> (a "Fragment") if you don't want to add an extra HTML element. The other rules: attribute names are written in camelCase (onClick, tabIndex), and self-closing tags (<img>, <input>) must always be closed with a / in JSX (<img />).

A Quick Look at Conditional Rendering

We saw that curly braces { } can only hold something that "produces a value" -- that's why you can't write if directly inside JSX (if doesn't produce a value, it just decides whether to run a block of code). Instead, you use something that does produce a value, like a ternary (? :):

// JSX içinde "if" yazamazsın (if bir ifade/expression değil, bir statement'tır) --
// ama { } içine bir "expression" koyabildiğin için, ternary (? :) ya da && gibi
// expression tabanlı araçlar burada işe yarar. Bu konuya "Conditional Rendering"
// bölümünde (State & Events kategorisinde) çok daha detaylı gireceğiz -- burada
// yalnızca JSX'in bunu neden bu şekilde yaptığını görüyoruz.
const isLoggedIn = true;

const message = isLoggedIn ? <p>Hoş geldin!</p> : <p>Lütfen giriş yap.</p>;

console.log(message);

This is just a quick preview -- we'll cover showing different UI based on a condition ("conditional rendering") in much more depth in the "Conditional Rendering" lesson, in the State & Events category.

Summary and Glossary

JSX is a syntax that looks like HTML but is actually JavaScript. You can embed JavaScript expressions inside it with curly braces { }. It uses className instead of class, every JSX block must have a single root element, and self-closing tags must be closed with /.

Glossary

JSX — A syntax that looks like HTML but is actually an extension of JavaScript.

Expression — A piece of code that produces a value (e.g. a + b); only this kind of code can go inside { } in JSX.

className — JSX's equivalent of HTML's class attribute.

Fragment (<> </>) — A JSX tool for grouping multiple elements under a single root without adding an extra HTML element.

Root Element — The single, outermost element in a JSX block -- every JSX block must have exactly one.

Practical Project

There's a real, runnable example project that brings together the concepts from this category (What Is React?, Creating a React Application, JSX): React Fundamentals Demo.

It shows JSX, JavaScript expressions with curly braces { }, attributes, and a short conditional-rendering preview with a ternary, all working together. You can download it and run it yourself, and read through the code line by line:

git clone https://github.com/cdurgun/react-course-projects.git
cd react-course-projects
npm install
cd projects/react-fundamentals
npm run dev

The react-course-projects repo uses npm workspaces -- npm install only needs to run once, at the repo root, and every project folder shares the same dependencies (no separate node_modules per folder). If you've already run npm install at the root, you can just cd react-course-projects/projects/react-fundamentals and run npm run dev.

JSX

JSX