JSX: Söz Dizimi ve Dönüştürme
JSX yazın, Babel'in bunu React.createElement çağrılarına nasıl derlediğini öğrenin ve tek kök öğe, className ve kendi kendine kapanan etiket kurallarını uygulayın.
JSX: Söz Dizimi ve Dönüştürme, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
JSX Nedir
JSX (JavaScript XML), JavaScript içinde HTML benzeri biçimlendirme yazmanızı sağlayan bir söz dizimi uzantısıdır. Bu, tarayıcıya ait bir özellik değildir; Babel veya TypeScript, çalıştırılmadan önce JSX'i JavaScript işlev çağrılarına dönüştürür.
JSX Dönüşümü
Babel, JSX'i React.createElement() çağrılarına dönüştürür. Yeni JSX dönüşümüyle (React 17+), React'i içe aktarmanız gerekmez; Babel gerekli içe aktarmaları otomatik olarak ekler.
// JSX:
const element = <h1 className="title">Hello</h1>;
// Compiled to (new transform):
import { jsx as _jsx } from 'react/jsx-runtime';
const element = _jsx('h1', { className: 'title', children: 'Hello' });JSX Kuralları: Tek Kök Öğe
JSX ifadeleri tam olarak bir kök öğeye sahip olmalıdır. Ek DOM düğümleri eklemekten kaçınmak için kardeş öğeleri <div> içine alın veya Parçalar kullanın (<></> ya da <React.Fragment>).
// Error: adjacent elements need a wrapper
return (
<h1>Title</h1>
<p>Body</p>
);
// Use Fragment:
return (
<>
<h1>Title</h1>
<p>Body</p>
</>
);className ve htmlFor
JSX öznitelikleri camelCase kullanır. class ve for JavaScript'te ayrılmış sözcükler olduğundan bunların yerine className ve htmlFor kullanın.
<div className="card active">
<label htmlFor="email">Email</label>
<input id="email" type="email" />
</div>Kendini Kapatan Etiketler
JSX'te tüm etiketler düzgün biçimde kapatılmalıdır. Alt öğesi olmayan öğelerde kendini kapatan eğik çizgi kullanılmalıdır: <img />, <br />, <input />.
JSX'te İfadeler: {}
Herhangi bir JavaScript ifadesini küme parantezleriyle JSX içine yerleştirebilirsiniz. Değişkenler, işlev çağrıları, üçlü ifadeler ve aritmetik işlemler kullanılabilir. Deyimler (if, for) kullanılamaz.
const name = 'Alice';
const count = 5;
return (
<div>
<h1>Hello, {name}!</h1>
<p>You have {count} messages.</p>
<p>Double: {count * 2}</p>
{isLoggedIn ? <Dashboard /> : <Login />}
</div>
);JSX ve Dizeler
Yan yana bulunan metin ve JSX ifadeleri otomatik olarak birleştirilir. Bir öğenin içinde metinleri ve ifadeleri serbestçe karıştırabilirsiniz.
<p>Welcome, {user.name}! You joined on {formatDate(user.createdAt)}.</p>Hiçbir Şey Oluşturmama: null ve false
Hiçbir şey oluşturmamak için null veya false döndürün. Her ikisi de hiçbir DOM çıktısı üretmeyen geçerli JSX değerleridir. Koşullu oluşturma için kullanışlıdır.
function Banner({ show }: { show: boolean }) {
if (!show) return null; // renders nothing
return <div className="banner">Important notice!</div>;
}style Özniteliği — Nesne Söz Dizimi
JSX'te satır içi stiller dize yerine nesne kullanır. Özellik adları camelCase biçimindedir.
<div style={{ backgroundColor: '#f7fafc', padding: '16px', borderRadius: '8px' }}>
Styled box
</div>JSX JavaScript'tir
JSX JavaScript'e derlendiği için JSX'i değişkenlere atabilir, işlevlerden döndürebilir, özellik olarak aktarabilir ve dizilerde saklayabilirsiniz. React öğeleri, düz JavaScript nesneleridir.
const elements = ['apple', 'banana', 'cherry'].map(fruit => (
<li key={fruit}>{fruit}</li>
));
return <ul>{elements}</ul>;TypeScript ve JSX: .tsx Dosyaları
JSX içeren TypeScript dosyaları için .tsx uzantısını kullanın. TypeScript, JSX'in tür denetimini yaparak özellik türü hatalarını ve eksik özellikleri derleme zamanında yakalar.
Hızlı Kontrol
JSX'te neden class yerine className kullanırız?
Özet: JSX
JSX, React.createElement() için söz dizimsel bir kolaylıktır. Her ifade için bir kök öğe veya Parça kullanılır. Ayrılmış sözcük olan öznitelikler için className ve htmlFor kullanılır. İçeriği olmayan tüm öğeleri kendini kapatacak şekilde yazın. İfadeleri {} ile yerleştirin. Hiçbir şey oluşturmamak için null/false döndürün. Satır içi stiller camelCase nesne söz dizimini kullanır. JSX JavaScript'tir; onu bir değer olarak ele alın.
Sıkça Sorulan Sorular
“JSX: Söz Dizimi ve Dönüştürme” dersi ücretsiz mi?
Evet — “JSX: Söz Dizimi ve Dönüştürme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“JSX: Söz Dizimi ve Dönüştürme” dersinde ne öğreneceğim?
JSX yazın, Babel'in bunu React.createElement çağrılarına nasıl derlediğini öğrenin ve tek kök öğe, className ve kendi kendine kapanan etiket kurallarını uygulayın. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“JSX: Söz Dizimi ve Dönüştürme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- JSX: Söz Dizimi ve Dönüştürme
- İşlevsel Bileşenler ve Props
- useState Hook'u: Durum ve Yeniden Oluşturmalar
- Listeler, Anahtarlar ve Koşullu Oluşturma