JSX / React Calisma Zamani

1JSX Calisma Zamani nedir?#

JSX, React'in kullandigi ve JavaScript icinde HTML benzeri kod yazmanizi saglayan bir sozdizimi uzantisidir. Tarayicilar ve WebView JSX'i dogrudan calistiramaz; once derlenmesi gerekir.

JSX Calisma Zamani ozelligi, React ve Babel Standalone'u uygulamaniza calisma zamaninda yukler; boylece ham JSX kodu derleme araci gerekmeden calisir.

2Ne zaman kullanilir#

JSX Calisma Zamanini su durumlarda etkinlestirin:

• Ozel JS alanina React/JSX kodu yaziyorsunuz
• HTML dosyalariniz <script type="text/babel"> etiketleri iceriyor
• Yapay zeka ile JSX kodu urettiniz
• React bilesenlerini bir derleme hatti kurmadan kullanmak istiyorsunuz

⚠️ ZIP projesi yuklerseniz GEREKMEZ; yerlesik esbuild paketleyici ZIP yuklemeleri icin JSX'i zaten isler.

3Nasil etkinlestirilir#

1. Sihirbazda 4. Adim'a (Gelismis Ozellikler) gidin
2. '⚛️ JSX / React Calisma Zamani'ni ACIN
3. JSX'inizi Ozel JS alanina veya HTML'inize yazin
4. APK'nizi normal sekilde olusturun

Uygulama ilk sayfa yuklemesinde React 18 + Babel'i CDN'den yukler.

4Ozel JS icinde JSX yazmak#

JSX Calisma Zamani etkinken, React kodunu dogrudan Ozel JS alanina yazabilirsiniz:

const App = () => (
<div>

<h1>Hello from React!</h1>
<p>This JSX is compiled at runtime</p>

</div>
);

const root = ReactDOM.createRoot(
document.getElementById('root')
);
root.render(<App />);

Babel, JSX'i calistirmadan once otomatik olarak donusturur.

5HTML'de <script type="text/babel"> kullanmak#

Web siteniz veya cevrimdisi HTML'iniz JSX iceren script etiketleri kullaniyorsa, bunlari type="text/babel" ile isaretleyin:

<script type="text/babel">
function Greeting({ name }) {

return <h1>Hello, {name}!</h1>;

}
ReactDOM.createRoot(document.getElementById('app'))

.render(<Greeting name="World" />);

</script>

Babel Standalone bu etiketleri otomatik olarak bulur ve derler.

6Onemli notlar#

• Ilk yuklemede internet baglantisi gerektirir (CDN)
• Babel derlemesi icin yaklasik 200-500 ms baslangic gecikmesi ekler
• React 18 ve ReactDOM 18 otomatik olarak yuklenir
• Diger tum ozelliklerle (reklamlar, push, yan menu vb.) birlikte calisir
• Buyuk kod tabanli uretim uygulamalari icin, bunun yerine esbuild paketlemeli ZIP yuklemeyi dusunun; daha hizlidir ve cevrimdisi calisir