JSX ile React öğeleri nasıl oluşturulur?

  • 408 görüntüleme
  • 18 dakikalık okuma
Hadi Bahadori
  • 4 Temmuz 2024
0 Hisse senetleri
0
0
0
0
0
Hisse senetleri
0
0
0
0

giriiş

Bu eğitimde, öğeleri JSX ile nasıl tanımlayacağınızı öğreneceksiniz. JSX, JavaScript kodunuzda HTML benzeri bir sözdizimi yazmanıza olanak tanıyan bir soyutlamadır ve standart HTML biçimlendirmesine benzeyen React bileşenleri oluşturmanıza olanak tanır. JSX, React öğeleri için şablon dilidir ve bu nedenle React'in uygulamanızda sağladığı tüm biçimlendirmelerin temelini oluşturur.

JSX, işaretlemenizde JavaScript yazmanıza olanak sağladığından, dizi eşleme ve koşullar için kısa devre değerlendirmesi de dahil olmak üzere JavaScript işlevlerini ve yöntemlerini kullanabilirsiniz.

Eğitimin bir parçası olarak, düğme tıklama olaylarını doğrudan işaretlemede yakalayacak ve sözdiziminin standart HTML ile tam olarak eşleşmediği CSS sınıfları gibi şeyleri yakalayacaksınız. Bu eğitimin sonunda, yerleşik tıklama dinleyicisi olan bir öğe listesini görüntülemek için çeşitli JSX özelliklerini kullanan bir uygulamaya sahip olacaksınız. Bu, çerçeve kursu boyunca sıklıkla kullanacağınız React uygulamalarında yaygın bir kalıptır. Ayrıca, React'in küçük ve yeniden kullanılabilir kod oluşturmanıza nasıl olanak sağladığını görmek için standart HTML öğelerini JavaScript ile birleştirebileceksiniz.

Ön koşullar
  • Node.js çalıştıran bir geliştirme ortamına ihtiyacınız var.
  • Create React App ile bir uygulama oluşturabilmelisiniz.
  • Ayrıca temel JavaScript bilgisine de ihtiyacınız var.

Adım 1 – React öğesine işaretleme ekleyin

Daha önce de belirtildiği gibi, React'ın JSX adı verilen özel bir işaretleme dili vardır. HTML ve JavaScript sözdiziminin birleşiminden oluşan bu dil, aşağıdaki gibi görünür:

<div>
{inventory.filter(item => item.available).map(item => (
<Card>
<div className="title"}>{item.name}</div>
<div className="price">{item.price}</div>
</Card>
))
}
</div>

.filter ve .map gibi bazı JavaScript işlevleri ve ayrıca bazı standart HTML gibi işlevler <div> Tanıyacaksınız. Ancak HTML ve JavaScript gibi başka parçalar da var. <card> ve sınıfAdı.

Bu, React bileşenlerine JavaScript'in gücüyle HTML hissiyatı veren özel bir işaretleme dili olan JSX'tir.

Bu adımda, mevcut bir React öğesine HTML benzeri ilkel öğeler eklemeyi öğreneceksiniz. Başlamak için, bir JavaScript işlevine standart HTML öğeleri ekleyecek ve ardından derlenen kodu tarayıcıda görüntüleyeceksiniz. Ayrıca, öğeleri gruplandırarak React'in bunları minimum biçimlendirme ve temiz HTML çıktısıyla derleyebilmesini sağlayacaksınız.

Başlamak için yeni bir proje oluşturun. create-react-app komutunu kullanarak yeni bir proje yüklemek için komut satırınızda aşağıdaki betiği çalıştırın:

npx create-react-app jsx-tutorial

Proje tamamlandıktan sonra şu dizine geçin:

cd jsx-tutorial

Yeni bir sekmede veya terminal penceresinde, Create React App başlangıç betiğini kullanarak projeyi başlatın. Tarayıcı değişiklikleri yansıtacak şekilde otomatik olarak güncellenecektir, bu nedenle çalışırken sürekli olarak şu betiği çalıştırın:

npm start

Çalışan bir yerel sunucu alacaksınız. Proje bir tarayıcı penceresinde açılmazsa, http://localhost:3000/ adresinde bulabilirsiniz. Bunu uzak bir sunucudan çalıştırıyorsanız, adres http://IP_adresiniz:3000 olacaktır.

Tarayıcınız, React Uygulaması Oluştur'un parçası olarak dahil edilen bir React uygulamasıyla yüklenecektir.

Tamamen yeni bir özel bileşen seti oluşturacağınız için, boş bir projeniz olması için öncelikle bazı standart kodları temizleyerek başlamanız gerekecek. Başlamak için App.js'yi bir metin düzenleyicide açın. Bu, sayfaya eklenecek kök bileşendir. Tüm bileşenler buradan başlayacaktır.

Yeni bir terminalde proje klasörüne gidin ve src/App.js dosyasını aşağıdaki komutla açın:

nano src/App.js

Şu şekilde bir dosya göreceksiniz:

import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;

Şimdi, import logo from './logo.svg' satırını ve fonksiyondaki return ifadesinden sonraki her şeyi kaldırın. Bunu return null olarak değiştirin. Kodun son hali şöyle görünecektir:

import React from 'react';
import './App.css';
function App() {
return null;
}
export default App;

Kaydedip metin düzenleyiciden çıkın.

Son olarak logoyu silin. Terminal penceresine aşağıdaki komutu yazın:

rm src/logo.svg

Bu SVG dosyasını uygulamanızda kullanmayacaksınız ve kullanmaya devam ettikçe kullanılmayan dosyaları kaldırmalısınız. Bu, kodunuzun uzun vadede daha düzenli kalmasını sağlayacaktır.

Artık projenizin bu kısımlarını hallettiğinize göre, JSX özelliklerini keşfedebilirsiniz. Bu işaretleme dili, React tarafından derlenir ve nihayetinde bir web sayfasında gördüğünüz HTML'ye dönüştürülür. React, ayrıntılara çok fazla girmeden, JSX'i alır ve sayfanızın nasıl görünmesi gerektiğine dair bir model oluşturur, ardından gerekli öğeleri oluşturup sayfaya ekler.

Bu, HTML'ye benzeyen bir şey yazıp, işlenen HTML'nin de benzer olmasını bekleyebileceğiniz anlamına gelir. Ancak, birkaç püf noktası vardır.

Öncelikle sunucunuzu çalıştıran sekmeye veya pencereye bakarsanız şunu göreceksiniz:

Output
...
./src/App.js
Line 1:8: 'React' is defined but never used no-unused-vars
...

Bu satır, içe aktarılan React kodunu kullanmadığınızı belirtir. Kodunuza "React" React içe aktarma satırını eklediğinizde, JSX'i React koduna dönüştüren JavaScript kodunu içe aktarmış olursunuz. JSX yoksa, içe aktarmanıza gerek yoktur.

Biraz JSX ekleyerek değişiklik yapalım. İlk olarak null'ı bir Hello, World örneğiyle değiştirelim:

import React from 'react';
import './App.css';
function App() {
return <h1>Hello, World</h1>;
}
export default App;

Dosyayı kaydedin. Sunucu çalışırken terminale bakarsanız, uyarı mesajı kaybolacaktır. Tarayıcınızda ziyaret ederseniz, mesajı h1 öğesi olarak göreceksiniz.

Daha sonra, etiketin altında <h1>, JSX olarak yazdığım dizeyi içeren bir paragraf etiketi ekleyin. Kod şöyle görünecektir:

import React from 'react';
import './App.css';
function App() {
return(
<h1>Hello, World</h1>
<p>I am writing JSX</p>
)
}
export default App;

JSX birden fazla satıra yayıldığı için ifadeyi parantez içine almanız gerekir.

Dosyayı kaydedin. Bunu yaptığınızda, sunucunuzu çalıştıran terminalde bir hata göreceksiniz:

Output
./src/App.js
Line 7:5: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
5 | return(
6 | <h1>Hello, World</h1>
> 7 | <p>I am writing JSX</p>
| ^
8 | )
9 | }
10 |

Bir fonksiyon veya yönergeden JSX döndürdüğünüzde, tek bir öğe döndürmeniz gerekir. Bu öğenin iç içe geçmiş alt öğeleri olabilir, ancak en üst düzeyde bir öğe olmalıdır. Bu durumda, iki öğe döndürürsünüz.

Çözüm küçük bir kod değişikliğidir. Kodu boş bir etiketle çevreleyin. Boş etiket, içinde kelime olmayan bir HTML öğesidir. Şöyle görünür: <> .

Editörünüzde ./src/App.js'ye geri dönün ve boş etiketi ekleyin:

import React from 'react';
import './App.css';
function App() {
return(
<>
<h1>Hello, World</h1>
<p>I am writing JSX</p>
</>
)
}
export default App;

Boş etiket bir öğe oluşturur, ancak kod derlendiğinde son işaretlemeye eklenmez. Bu, React'e tek bir öğe verirken kodunuzun temiz kalmasını sağlar.

Kodu kaydedin ve dosyadan çıkın. Tarayıcınız yeniden yüklenecek ve paragraf öğesiyle güncellenmiş sayfa görüntülenecektir. Ayrıca, kod dönüştürüldüğünde boş etiketler kaldırılacaktır:

Artık bileşeninize bazı temel JSX'ler eklediğinize ve tüm JSX'lerin bir bileşen içinde nasıl iç içe yerleştirileceğini öğrendiğinize göre, bir sonraki adım bileşeninize bazı stil eklemektir.

Adım 2 – Niteliklere sahip bir öğeye stil ekleme

Bu adımda, bileşeninizdeki öğeleri biçimlendirerek HTML özniteliklerinin JSX ile nasıl çalıştığını öğreneceksiniz. React'te birçok biçimlendirme seçeneği vardır. Bazıları JavaScript'te CSS yazmayı içerirken, diğerleri ön işlemcileri kullanır. Bu eğitimde, CSS sınıfları ve içe aktarılan CSS ile çalışacaksınız.

Artık kodunuz hazır olduğuna göre, biraz stil eklemenin zamanı geldi. App.css'yi metin düzenleyicinizde açın:

nano src/App.css

Yeni bir JSX ile başladığınız için, mevcut CSS artık mevcut olmayan öğelere başvuracaktır. CSS'e ihtiyacınız olmadığı için onu kaldırabilirsiniz.

Kodu sildikten sonra boş bir dosyanız olacak.

Ardından metne biraz stil ekleyeceksiniz. src/App.css dosyasına aşağıdaki kodu ekleyin:

.container {
display: flex;
flex-direction: column;
align-items: center;
}

Bu kod bloğunda .container adında bir CSS sınıf seçicisi oluşturdunuz ve bunu display: flex kullanarak içeriği ortalamak için kullandınız.

Dosyayı kaydedin ve çıkın. Tarayıcı yenilenecek, ancak hiçbir şey değişmeyecek. Değişikliği görebilmeniz için, CSS sınıfını React bileşeninize eklemeniz gerekiyor. Bileşenin JavaScript kodunu açın:

nano src/App.js

CSS kodu zaten “./App.css.” içe aktarma satırıyla içe aktarılmıştır. Bu, Webpack'in son stil sayfasını oluşturmak için kodu içe aktaracağı anlamına gelir, ancak CSS'yi öğelerinize uygulamak için sınıfları eklemeniz gerekir.

İlk olarak, metin düzenleyicinizde boş etiketleri bulun <> ile <div> Değiştirmek.

import React from 'react';
import './App.css';
function App() {
return(
<div>
<h1>Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;

Bu kodda, boş etiketleri (<>) div etiketleriyle değiştirdiniz. Boş etiketler, ek etiketler eklemeden kodunuzu gruplandırmak için kullanışlıdır, ancak burada div kullanmalısınız çünkü boş etiketler herhangi bir HTML niteliğini kabul etmez.

Ardından, sınıf adını eklemeniz gerekiyor. JSX'in HTML'den sapmaya başladığı nokta burası. Normal bir HTML öğesine sınıf eklemek istiyorsanız, bunu şu şekilde yapabilirsiniz:

<div class="container">

Ancak JSX, JavaScript olduğundan birkaç sınırlaması vardır. Bunlardan biri, JavaScript'in ayrılmış anahtar sözcüklere sahip olmasıdır. Bu, belirli kelimeleri herhangi bir JavaScript kodunda kullanamayacağınız anlamına gelir. Örneğin, null adında bir değişken oluşturamazsınız çünkü bu kelime zaten ayrılmıştır.

Ayrılmış sözcüklerden biri de class'tır. React, bu ayrılmış sözcüğü küçük bir değişiklikle aşar. class özelliğini eklemek yerine, className özelliğini eklersiniz. Genel bir kural olarak, bir özellik beklendiği gibi çalışmıyorsa, camel case versiyonunu eklemeyi deneyin. Biraz farklı olan bir diğer özellik ise, etiketler için kullandığınız for özelliğidir. Birkaç tane daha var, ancak neyse ki liste nispeten kısa.

Artık React'te sınıf özniteliğinin nasıl kullanıldığını bildiğinize göre, kodunuzu stiller ekleyecek şekilde güncelleyebilirsiniz. Metin düzenleyicinizde, açılış div etiketinize className="container" ekleyin:

import React from 'react';
import './App.css';
function App() {
return(
<div className="container">
<h1>Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;

Dosyayı kaydedin. Bunu yaptığınızda sayfa yeniden yüklenecek ve içerik ortalanacaktır.

className niteliği React&#039;e özgüdür. Çoğu HTML niteliğini JSX&#039;e herhangi bir değişiklik yapmadan ekleyebilirsiniz. Örneğin, metin düzenleyicinize geri dönün ve öğeye greeting ID&#039;sini ekleyin. <h1> Kendi kodunuzu ekleyin. Standart HTML gibi görünecektir:

import React from 'react';
import './App.css';
function App() {
return(
<div className="container">
<h1 id="greeting">Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;

Sayfayı kaydedin ve tarayıcıyı yeniden yükleyin. İşte bu kadar.

JSX şimdilik standart bir işaretleme gibi görünüyor, ancak JSX'in avantajı, HTML gibi görünürken JavaScript'in gücüne sahip olmasıdır. Bu, değişkenler atayabileceğiniz ve özelliklerinizde bunlara başvurabileceğiniz anlamına gelir. Bir özelliğe başvurmak için, tırnak işaretleri yerine süslü parantezlerle ({}) sarın.

Metin düzenleyicinizde, bir özelliğe atıfta bulunmak için aşağıdaki vurgulanan satırları ekleyin:

import React from 'react';
import './App.css';
function App() {
const greeting = "greeting";
return(
<div className="container">
<h1 id={greeting}>Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;

Bu kodda, return ifadesinin üstünde greeting adında &quot;greeting&quot; değerine sahip bir değişken oluşturdunuz ve bunu etiketin id niteliğindeki değişkene atadınız. <h1> Kendini referans aldın.

Dosyayı kaydedip çıkın. Sayfa aynı olacak, ancak ID etiketi eklenecek.

Şimdiye kadar birkaç öğeyi tek başına kullandınız, ancak karmaşık sayfalar oluşturmak için JSX'i kullanarak birçok HTML öğesi ekleyebilir ve bunları iç içe yerleştirebilirsiniz.

Bunu göstermek için, emojilerden oluşan bir liste içeren bir sayfa oluşturun. Bu emojiler .

Başlamak için sayfaya birkaç öğe daha eklemeniz gerekiyor. Metin düzenleyicinizde src/App.js dosyasını açın. Bu aşamada açık tutun.

nano src/App.js

Öncelikle aşağıdaki vurguları ekleyerek bir emoji listesi oluşturun:

import React from 'react';
import './App.css';
function App() {
const greeting = "greeting";
return(
<div className="container">
<h1 id={greeting}>Hello, World</h1>
<p>I am writing JSX</p>
<ul>
<li>
<button>
<span role="img" aria-label="grinning face" id="grinning face">😀</span>
</button>
</li>
<li>
<button>
<span role="img" aria-label="party popper" id="party popper">🎉</span>
</button>
</li>
<li>
<button>
<span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
</button>
</li>
</ul>
</div>
)
}
export default App;

İşte bir etiket.

    Tutmak için bir emoji listesi oluşturdunuz. Her emoji bir elementin içinde yer alıyor.
  • Ayrı bir konumda bulunur ve .

    Emojiyi etiketle de kullanabilirsiniz. <span> Bunu birkaç başka özellikle çevrelediniz. Her bir span&#039;ın rol özniteliği img rolüne ayarlanmıştır. Bu, erişen yazılıma öğenin bir görüntü gibi davrandığını bildirir. Ayrıca, her bir <span> Bir aria etiketi ve emoji adında bir id niteliği vardır. aria etiketi, ekran okuyucu kullanan ziyaretçilere neyin görüntülendiğini bildirir. ID&#039;yi daha sonra etkinlik yazarken kullanacaksınız.

    Kodu bu şekilde yazdığınızda, sayfanın ekran okuyucular için erişilebilir ve kolay ayrıştırılabilir kalmasına yardımcı olan anlamsal öğeler kullanırsınız.

    Dosyayı kaydedip çıkın. Tarayıcınız yenilenecek ve şunu göreceksiniz:

    Şimdi biraz stil ekleyin. CSS kodunu metin düzenleyicinizde açın:

    nano src/App.css

    Butonların varsayılan arka planını ve kenarlığını kaldırmak ve yazı tipi boyutunu artırmak için aşağıdaki vurgulanan kodu ekleyin:

    .container {
display: flex;
flex-direction: column;
align-items: center;
}
button {
font-size: 2em;
border: 0;
padding: 0;
background: none;
cursor: pointer;
}
ul {
display: flex;
padding: 0;
}
li {
margin: 0 20px;
list-style: none;
padding: 0;
}

    Bu kodda, düğmelerin görünümünü ayarlamak ve yazı tipini değiştirmek için yazı tipi boyutu, kenar boşluğu ve diğer parametreleri kullandınız. Ayrıca liste stillerini kaldırdınız ve öğeye display: eklediniz.

      Yatay hale getirmek için bükün.

      CSS dosyasını kaydedip kapatın. Tarayıcınız yenilenecek ve şunu göreceksiniz:

      Artık normal HTML gibi görünen birkaç JSX öğesiyle çalıştınız. Sınıflar, kimlikler ve aria etiketleri eklediniz ve verilerle dizeler ve değişkenler olarak çalıştınız. Ancak React, öğelerinizin kullanıcı olaylarına nasıl yanıt vermesi gerektiğini belirtmek için öznitelikler de kullanır. Ardından, düğmeye olaylar ekleyerek sayfayı etkileşimli hale getirmeye başlayacaksınız.

      Adım 3 – Öğelere Olay Ekleme

      Bu adımda, belirli öznitelikleri kullanarak öğelere olaylar ekleyecek ve bir düğme öğesine tıklama olayı kaydedeceksiniz. Başka bir eylem göndermek veya dosya kapsamındaki diğer bilgileri kullanmak için olay bilgilerini nasıl yakalayacağınızı öğreneceksiniz.

      Artık bilgi içeren bir ana sayfanız olduğuna göre, ona bazı olaylar ekleme zamanı. HTML öğelerine ekleyebileceğiniz birçok olay işleyicisi vardır. React bunların hepsine erişmenizi sağlar. JavaScript kodunuz işaretlemenize dahil olduğundan, kodunuzu düzenli tutarken hızlıca olaylar ekleyebilirsiniz.

      Başlamak için bir onclick olay işleyicisi ekleyin. Bu, bir olay dinleyicisi eklemek yerine, doğrudan öğenize biraz JavaScript kodu eklemenize olanak tanır:

      import React from 'react';
import './App.css';
function App() {
const greeting = "greeting";
return(
<div className="container">
<h1 id={greeting}>Hello, World</h1>
<p>I am writing JSX</p>
<ul>
<li>
<button
onClick={event => alert(event.target.id)}
>
<span role="img" aria-label="grinning face" id="grinning face">😀</span>
</button>
</li>
<li>
<button
onClick={event => alert(event.target.id)}
>
<span role="img" aria-label="party popper" id="party popper">🎉</span>
</button>
</li>
<li>
<button
onClick={event => alert(event.target.id)}
>
<span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
</button>
</li>
</ul>
</div>
)
}
export default App;

      Bu JSX olduğundan, camelCased onclick'iniz var, yani onu onClick olarak eklediniz. Bu onClick özelliği, tıklanan öğe hakkında bilgi almak için anonim bir işlev kullanır.

      Tıklanan düğmeden olayı alan anonim bir ok işlevi eklediniz ve olayın hedefi öğe olacak <span> İhtiyacınız olan bilgi, event.target.id ile erişebileceğiniz id özelliğindedir. Uyarıyı alert() fonksiyonu ile etkinleştirebilirsiniz.

      Dosyayı kaydedin. Tarayıcınızda emojilerden birine tıklayın, isminin yazılı olduğu bir uyarı alacaksınız.

      Fonksiyonu bir kez bildirip her onClick eylemine aktararak bir yinelemeyi azaltabilirsiniz. Fonksiyon girdi ve çıktı dışında hiçbir şeye bağlı olmadığı için, ana bileşen fonksiyonunun dışında bildirebilirsiniz. Başka bir deyişle, fonksiyonun bileşen kapsamına erişmesi gerekmez. Bunları ayrı tutmanın avantajı, bileşen fonksiyonunuzun biraz daha kısa olması ve isterseniz fonksiyonu daha sonra ayrı bir dosyaya taşıyabilmenizdir.

      Metin düzenleyicinizde, olayı yakalayan ve bir tanımlayıcıyla alert() işlevini çağıran displayEmojiName adlı bir işlev oluşturun. Ardından, işlevi her onClick özelliğine geçirin:

      import React from 'react';
import './App.css';
const displayEmojiName = event => alert(event.target.id);
function App() {
const greeting = "greeting";
return(
<div className="container">
<h1 id={greeting}>Hello, World</h1>
<p>I am writing JSX</p>
<ul>
<li>
<button
onClick={displayEmojiName}
>
<span role="img" aria-label="grinning face" id="grinning face">😀</span>
</button>
</li>
<li>
<button
onClick={displayEmojiName}
>
<span role="img" aria-label="party popper" id="party popper">🎉</span>
</button>
</li>
<li>
<button
onClick={displayEmojiName}
>
<span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
</button>
</li>
</ul>
</div>
)
}
export default App;

      Dosyayı kaydedin. Tarayıcınızda bir emojiye tıkladığınızda aynı uyarıyı göreceksiniz.

      Bu adımda, her öğeye olaylar eklediniz. Ayrıca JSX'in öğe olayları için biraz farklı adlar kullandığını gördünüz ve bir fonksiyonu alıp birden fazla öğede yeniden kullanarak yeniden kullanılabilir kod yazmaya başladınız. Sonraki adımda, her bir öğeyi elle yazmak yerine JSX öğelerini döndüren yeniden kullanılabilir bir fonksiyon yazacaksınız. Bu, tekrarı daha da azaltır.

      Adım 4 – Öğeleri oluşturmak için verileri eşleme

      Bu adımda, JSX'i basit bir işaretleme aracı olarak kullanmanın ötesine geçeceksiniz. Kod yoğunluğunu azaltan ve okunabilirliği artıran dinamik işaretleme araçları oluşturmak için JSX'i JavaScript ile birleştirmeyi öğreneceksiniz. Kodunuzu, HTML öğeleri oluşturmak için üzerinde döngü kurduğunuz bir diziye dönüştüreceksiniz.

      JSX, HTML gibi sizi sınırlamaz. Ayrıca, JavaScript'i doğrudan işaretlemenizde kullanmanıza da olanak tanır. Niteliklere fonksiyonlar aktararak bunu biraz denediniz. Verileri yeniden kullanmak için değişkenler de kullandınız. Şimdi, standart JavaScript kodunu kullanarak doğrudan verilerden JSX oluşturma zamanı.

      Metin düzenleyicinizde, src/App.js dosyasında bir emoji verisi dizisi oluşturmanız gerekiyor. Dosyayı kapattıysanız, yeniden açın:

      nano src/App.js

      Emoji ve emoji adını içeren nesneleri içeren bir dizi ekleyin. Emojilerin tırnak işaretleri içine alınması gerektiğini unutmayın. Bu diziyi App fonksiyonunun üstüne oluşturun:

      import React from 'react';
import './App.css';
const displayEmojiName = event => alert(event.target.id);
const emojis = [
{
emoji: "😀",
name: "grinning face"
},
{
emoji: "🎉",
name: "party popper"
},
{
emoji: "💃",
name: "woman dancing"
}
];
function App() {
...
}
export default App;

      Artık verileriniz olduğuna göre, üzerinde döngü yapabilirsiniz. JSX içinde JavaScript kullanmak için, verileri süslü parantezlerle çevrelemeniz gerekir: {}. Bu, özniteliklere fonksiyon eklerken yaptığınız işleme benzer.

      React bileşenleri oluşturmak için verileri JSX öğelerine dönüştürmeniz gerekir. Bunu yapmak için verileri eşler ve bir JSX öğesi döndürürsünüz. Kod yazarken aklınızda bulundurmanız gereken birkaç nokta vardır.

      Öncelikle bir grup öğenin bir kap ile temsil edilmesi gerekir. <div> Çevrili. İkincisi, her öğenin anahtar adı verilen özel bir özelliğe ihtiyacı vardır. Anahtar, React&#039;in öğeleri takip etmek ve bileşeni ne zaman güncelleyeceğini bilmek için kullanabileceği benzersiz bir veri parçası olmalıdır. Anahtar, yalnızca dahili amaçlar için olduğu için derlenmiş HTML&#039;den kaldırılır. Döngülerle çalışırken anahtar olarak basit bir dize eklemelisiniz.

      İşte bir listedeki isimleri gösteren basit bir örnek: <div> Haritalandırır:

      ...
const names = [
"Atul Gawande",
"Stan Sakai",
"Barry Lopez"
];
return(
<div>
{names.map(name => <div key={name}>{name}</div>)}
</div>
)
...

      Sonuçta ortaya çıkan HTML şu şekilde görünecektir:

      ...
<div>
<div>Atul Gawande</div>
<div>Stan Sakai</div>
<div>Barry Lopez</div>
</div>
...

      Emoji listesi dönüşümü de benzer şekilde olacak. <ul> Bir konteyner olacak. Verileri ve bir <li> Emoji kısa ad anahtarını döndürün. Verileri etiketlere kodlayın. <button> Ve <span> Yüzük bilgisi ile değiştireceksiniz.

      Metin düzenleyicinize aşağıdakileri ekleyin:

      import React from 'react';
import './App.css';
const displayEmojiName = event => alert(event.target.id);
const emojis = [
{
emoji: '😀',
name: "test grinning face"
},
{
emoji: '🎉',
name: "party popper"
},
{
emoji: '💃',
name: "woman dancing"
}
];
function App() {
const greeting = "greeting";
return(
<div className="container">
<h1 id={greeting}>Hello, World</h1>
<p>I am writing JSX</p>
<ul>
{
emojis.map(emoji => (
<li key={emoji.name}>
<button
onClick={displayEmojiName}
>
<span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
</button>
</li>
))
}
</ul>
</div>
)
}
export default App;

      Kodda, etiketteki emoji dizisine tıklayın <ul> Harita ve bir <li> Geri dön. Herhangi bir şekilde <li> Birincil anahtar olarak emoji adını kullandınız. Düğme, normaldekiyle aynı işlevselliğe sahip olacak. Öğede <span>aria-label ve id&#039;yi isimle değiştirin. Etiket içeriği <span> Bir emoji olmalı.

      Dosyayı kaydedin. Pencereniz yenilenecek ve verileri göreceksiniz. Oluşturulan HTML'de anahtarın bulunmadığını unutmayın.

      JSX'i standart JavaScript ile birleştirmek, dinamik olarak içerik oluşturmak için size birçok araç sunar ve istediğiniz herhangi bir standart JavaScript'i kullanabilirsiniz. Bu adımda, sabit kodlanmış JSX'i bir dizi ve bir döngü ile değiştirerek dinamik olarak HTML oluşturdunuz. Bir sonraki adımda, bilgileri kısaltmalar kullanarak koşullu olarak görüntüleyeceksiniz.

      Adım 5 – Kısa devre yapan elemanları koşullu olarak görüntüleyin

      Bu adımda, HTML öğelerini koşullu olarak görüntülemek için kısayol kodlarını kullanacaksınız. Bu, ek bilgilere göre HTML'yi gizleyebilen veya gösterebilen bileşenler oluşturmanıza olanak tanır ve bileşenlerinize farklı durumlarla başa çıkma esnekliği kazandırır.

      Bazen bir bileşenin bazı durumlarda bilgileri görüntülemesi, bazılarında ise görüntülememesi gerekebilir. Örneğin, kullanıcıya yalnızca belirli durumlar doğru olduğunda bir uyarı mesajı göstermek veya normal bir kullanıcının görmesini istemediğiniz bazı hesap bilgilerini bir yöneticiye göstermek isteyebilirsiniz.

      Bunu yapmak için kısa devre kullanırsınız. Yani bir koşul kullanırsınız ve ilk kısım doğruysa, ikinci kısmın bilgisini döndürür.

      İşte bir örnek. Bir düğmeyi yalnızca kullanıcı oturum açtığında göstermek istiyorsanız, bu öğeyi süslü parantezlerle çevreleyip bir koşul eklersiniz.

      {isLoggedIn && <button>Log Out</button>}

      Bu örnekte, her şey doğruysa son değeri döndüren && operatörünü kullanıyorsunuz. Aksi takdirde, React'e herhangi bir ek işaretleme döndürmemesini söyleyen false değerini döndürüyor. isLoggedIn true ise, React düğmeyi görüntüler. isLoggedIn false ise, düğmeyi görüntülemez.

      Bunu denemek için aşağıdaki vurgulanan satırları ekleyin:

      import React from 'react';
import './App.css';
...
function App() {
const greeting = "greeting";
const displayAction = false;
return(
<div className="container">
<h1 id={greeting}>Hello, World</h1>
{displayAction && <p>I am writing JSX</p>}
<ul>
...
</ul>
</div>
)
}
export default App;

      Metin düzenleyicinizde, displayAction adında false değerine sahip bir değişken oluşturdunuz. Ardından etiket <p> displayAction&#039;ı süslü parantezlerle çevrelediniz. Süslü parantezlerin başına &amp;&amp; ekleyerek bir koşul oluşturdunuz.

      Dosyayı kaydettiğinizde, öğenin tarayıcınızda kaybolduğunu göreceksiniz. Daha da önemlisi, oluşturulan HTML'de de görünmeyecektir. Bu, bir öğeyi CSS ile gizlemek gibi değildir. Son işaretlemede hiç var olmayacaktır.

      Şu anda displayAction değeri sabit kodlanmıştır, ancak bu değeri bir durum olarak da saklayabilir veya bir üst bileşenden taban olarak geçirebilirsiniz.

      Bu adımda, öğeleri koşullu olarak nasıl görüntüleyeceğinizi öğrendiniz. Bu, diğer bilgilere göre özelleştirilebilen bileşenler oluşturmanıza olanak tanır.

      Sonuç

      Bu noktada, JSX ile özel bir uygulama oluşturdunuz. Bileşeninize HTML benzeri öğeler eklemeyi, bu öğelere stil öğeleri eklemeyi, anlamsal ve erişilebilir işaretleme oluşturmak için öznitelikler iletmeyi ve bileşenlere olaylar eklemeyi öğrendiniz. Ardından, yinelenen kod sayısını azaltmak ve öğeleri koşullu olarak gösterip gizlemek için JavaScript'i JSX'inizle birleştirdiniz.

      Bu, gelecekteki bileşenleri oluşturmak için ihtiyaç duyduğunuz temeldir. JavaScript ve HTML'i bir arada kullanarak, esnek ve uygulamanızın büyümesine ve değişmesine olanak tanıyan dinamik bileşenler oluşturabilirsiniz.

Bu makalede:
,,,
Gönderiyi yazan:
Takip etmek
Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Önceki Makale
Sonraki Makale
Ayrıca Şunları da Beğenebilirsiniz