Başlangıç ​​Kılavuzu React Props [Sözdizimi ile]

React, uygulamalar için etkileşimli kullanıcı arayüzü tasarlamak için kullanılan MIT lisanslı açık kaynaklı bir JavaScript kitaplığıdır. Geliştiricilerin hayatlarını kolaylaştıran, bileşen tabanlı bildirimsel, esnek ve verimli bir kitaplıktır. Bileşen tabanlı bir kitaplık olduğundan, kullanıcı arabirimini bileşen olarak bilinen birkaç ayrı parçaya böler. Bu bileşenlerin uygun şekilde çalışması için birbirleriyle iletişim kurması gerekir ve işte o zaman React aksesuarları devreye girer.

React Props nedir?

"Props" kelimesi, React kitaplığında özellikler anlamına gelen bir anahtar kelimedir. Ayrıca bazen React bileşenlerinde global bir değişken veya nesne olarak da adlandırılırlar. React props, HTML'deki argümanlara benzer. React donanımları hakkında kayda değer bazı şeyler, her zaman tek yönde akmaları ve içlerindeki verilerin salt okunur olmasıdır. Bu onları değişmez kılar, yani bir bileşenden akan veri diğerinde değiştirilemez. Bunu saf ve saf olmayan bir fonksiyon örneği ile anlayabiliriz.

Bu, aynı girdiler için her zaman aynı çıktıyı vereceğinden saf bir işlevdir:

function prod(a, b) {

a * b döndür;

}

Bu, kendi girdisini manipüle ettiği için saf olmayan bir işlevdir:

işlev mevduatı(hesap, tutar){

hesap.toplam += miktar;

}

React props değişmez olduğundan, bileşenlerin saf işlevler olarak çalışması gerekir. Esnek React kitaplığındaki tek katı kural budur.

React Props Geçmek ve Erişmek için Sözdizimi

Daha önce bahsedildiği gibi, React destekleri HTML argümanlarına benzer ve bu nedenle bir bileşene herhangi bir props iletmek veya eklemek için, bunu HTML niteliklerini geçirmeye benzer şekilde yapabiliriz.

Sözdizimi:

<bileşen_adı props_name = "değer" />

Yukarıdaki sözdiziminde, ' component_name' , props iletmemiz gereken bileşenin adıdır, props_name , props'ın adıdır ve değer , props değeridir.

Bileşenin sınıfından herhangi bir sahneye erişebiliriz.

Sözdizimi:

this.props .props_name;

Yukarıdaki sözdiziminde, this.props, bileşenin sınıfından herhangi bir props'a erişmek için kullanılan global bir nesnedir ve props_name , erişmek istediğimiz React props'larının adıdır.

Okuyun: JavaScript ve JQuery: JavaScript ve JQuery Arasındaki Fark

React Props Nasıl Kullanılır?

Herhangi bir bileşende değişmez React props verilerini kullanmanın iki farklı yolu vardır. Bu iki yol, ana dosyadaki tepkiDom.render() işlevine sahne donanımı eklemek veya bileşenin kendisinde varsayılan donanım olarak veri eklemektir. React aksesuarlarını her iki şekilde nasıl kullanacağınız aşağıda açıklanmıştır:

React.Dom.render() İşlevinden React Props Kullanma

İlk önce bileşen dosyasına props eklememiz gerekiyor.

React'i 'react'ten içe aktarın; // React kitaplığını içe aktarma

class Örnek , React.component'i genişletir { /* örnek, React bileşen sınıfının özelliklerini genişleten bileşen adıdır */

render() {

dönüş (

<div>

<h2>{this.props. firstProp } h2'de</h2>

<h3>{bu, aksesuarlar. SecondProp } h3'te</h3>

</div>

);

}

}

varsayılanı dışa aktar Örnek; //bileşeni dışa aktarıyoruz

Şimdi ana dosyadaki reactDom.render() işlevi ile props'a değer eklememiz ve oradan erişmemiz gerekiyor.

React'i 'react'ten içe aktarın;

ReactDom'u 'react-dom'dan içe aktarın;

Örneği './Example.jsx' dosyasından içe aktarın ;

ReactDom.render(< Örnek firstProp = “Bu birinciProp ” secondProp = “Bu ikinciProp ”/>, document.getElementById('example'));

varsayılanı dışa aktar Örnek;

Sonuçlar:

Bu h2'deki ilkProp

Bu h3'teki ikinciProp

Component Constructor'da React Props'ı Default Props ile Kullanma

Bileşen dosyasına aksesuarlar ve bunların değerlerini ekleyin.

React'i 'react'ten içe aktarın; // React kitaplığını içe aktarma

class Örnek , React.component'i genişletir { /* örnek, React bileşen sınıfının özelliklerini genişleten bileşen adıdır */

render() {

dönüş (

<div>

<h2>{this.props. ilkProp }</h2>

<h3>{bu, aksesuarlar. ikinciProp }</h3>

</div>

);

}

}

Örnek .deafultProps = {

firstProp : “Bu ilkProp ”,

secondProp : "Bu ikinciProp "

}

varsayılanı dışa aktar Örnek; //bileşeni dışa aktarıyoruz

Ana dosyadan React aksesuarlarına erişim.

React'i 'react'ten içe aktarın;

ReactDom'u 'react-dom'dan içe aktarın;

Örneği './Example.jsx' dosyasından içe aktarın ;

ReactDom.render(< Örnek />, document.getElementById('example'));

Bunun çıktıları, bu sefer default props yardımı ile yapılması dışında, reactDom.render() fonksiyon kullanımına benzer olacaktır.

Kontrol edin: Vue vs React: Vue ve React Arasındaki Fark

Bir Bileşenden Diğerine React Props Nasıl Geçilir?

React aksesuarlarının ana kullanımı, React'teki bileşenler arasında veri iletmektir. Aşağıdaki örnek, verilerin nasıl iletildiğini anlamamıza yardımcı olacaktır.

React'i 'react'ten içe aktarın;

class Fruit React.Component'i genişletir {

render() {

return <h4>Ben {this.props. ad } h4'te</h4>

}

}

class Soru React.Component'i genişletiyor {

render() {

dönüş (

<div>

<h3>Hangi Meyvesin? h3'te</h3>

< Fruit name = “Mango” / > //Proper oluşturma ve değer atama

</div>

);

}

}

ReactDom.render(<Soru />, document.getElementById('meyve'));

Bu, aşağıdaki çıktıyı verecektir:

Hangi Meyvesin? h3'te

Ben h4'teki Mango'yum

State ve Props'ı Birlikte Kullanmak

Hepimizin bildiği gibi React dinamik bir dildir ve esnekliği USP'dir. Bu nedenle, uygulama geliştirmede tek başına React props kullanmak yeterli değildir. Bu sorun devletin yardımıyla çözülür. Durum, verileri yönetmek için kullanılan başka bir React özelliğidir. Uygulamamızı daha etkileşimli ve dinamik hale getirmek için React props ve state'i nasıl birleştirebileceğimizi görelim.

React'i 'react'ten içe aktarın;

class Car React.Component'i genişletir {

yapıcı(sahne) {

süper(sahne);

this.durum = {

firstCar: "Bu bir Mercedes-Benz! h2”de, // duruma değer atama

SecondCar: “Bu bir BMW! h3'te" // duruma değer atama

}

}

render() {

dönüş (

<div>

<FirstCar firstProp = {this.state.firstCar}/> // proplara değer atama

<SecondCar secondProp = {this.state.secondCar}/> //proplara değer atanıyor

</div>

);

}

}

class FirstCar, React.Component'i genişletir {

render() {

dönüş (

<div>

<h2>{this.props.firstProp}</h2>

</div>

);

}

}

class SecondCar React.Component'i genişletir {

render() {

dönüş (

<div>

<h3>{this.props.secondProp}</h3>

</div>

);

}

}

varsayılan Arabayı dışa aktar;

Şimdi, ana dosyadaki verilere erişmemiz gerekiyor.

React'i 'react'ten içe aktarın;

ReactDOM'u 'react-dom'dan içe aktarın;

Arabayı './Car.jsx' dosyasından içe aktar;

ReactDOM.render(<Araba />, document.getElementById('araba'));

Sonuç:

Bu bir Mercedes-Benz! h2'de

Bu bir BMW! h3'te

Ayrıca Okuyun: Node JS ve React JS Arasındaki Fark

Özetlemek

Hem React desteklerinin hem de React'teki verileri yönetme durumunun birleşimi, onu en kullanışlı JavaScript kitaplıklarından biri yapar. Piyasada tonlarca React proje fikri var ve bunlara yalnızca geliştiriciler hayat verebilir. Bu nedenle, ReactJS geliştiricileri için mükemmel bir talep ve maaşlarında bir artış var .

İşletmelerin uygulamalar oluşturmasına yardımcı olma ve çok sayıda React projesinde çalışarak büyük bir gelir elde etme fikri sizi heyecanlandırıyorsa, çok geç olmadan harekete geçme zamanı gelmiştir. React hakkında her şeyi öğrenmek ve eksiksiz bir yazılım geliştiricisi olmak için upGrad tarafından sunulan çevrimiçi kurslara katılabilirsiniz .

Tepki, full-stack geliştirme hakkında daha fazla bilgi edinmek istiyorsanız, upGrad & IIIT-B'nin çalışan profesyoneller için tasarlanmış ve 500+ saatlik zorlu eğitim, 9+ proje sunan Full-stack Yazılım Geliştirmede PG Diplomasına göz atın. ve görevler, IIIT-B Mezunları durumu, pratik uygulamalı bitirme projeleri ve en iyi firmalarla iş yardımı.