Panduan Pemula React Props [Dengan Sintaks]

React adalah library JavaScript open-source berlisensi MIT yang digunakan untuk mendesain UI interaktif untuk aplikasi. Ini adalah perpustakaan deklaratif, fleksibel, dan efisien berbasis komponen, membuat kehidupan pengembang lebih mudah. Karena ini adalah pustaka berbasis komponen, ia membagi UI menjadi beberapa bagian individu yang dikenal sebagai komponen. Komponen-komponen ini perlu berkomunikasi satu sama lain agar berfungsi dengan tepat, dan saat itulah props React muncul.

Apa itu React Props?

Kata "Props" adalah kata kunci di perpustakaan React yang berarti properti. Mereka juga kadang-kadang disebut sebagai variabel global atau objek dalam komponen React. React props mirip dengan argumen dalam HTML. Beberapa hal yang perlu diperhatikan tentang props React adalah bahwa props tersebut selalu mengalir dalam satu arah, dan data di dalamnya bersifat read-only. Ini membuatnya tidak dapat diubah, artinya data yang mengalir dari satu komponen tidak dapat diubah di komponen lainnya. Kita dapat memahami ini dengan contoh fungsi murni dan tidak murni.

Ini adalah fungsi murni karena akan selalu memberikan output yang sama untuk input yang sama:

fungsi prod(a, b) {

kembali a * b;

}

Ini adalah fungsi yang tidak murni karena memanipulasi inputnya sendiri:

fungsi deposit(akun, jumlah){

akun.total += jumlah;

}

Karena props React tidak dapat diubah, komponen harus beroperasi sebagai fungsi murni. Itulah satu-satunya aturan ketat di perpustakaan React yang fleksibel.

Sintaks untuk Melewati dan Mengakses Props React

Seperti yang disebutkan sebelumnya, React props mirip dengan argumen HTML, dan karenanya untuk meneruskan atau menambahkan props apa pun ke komponen, kita bisa melakukannya mirip dengan melewatkan atribut HTML.

Sintaksis:

<component_name props_name = “nilai” />

Dalam sintaks di atas, ' component_name' adalah nama komponen yang harus kita lewati props, props_name adalah nama props, dan value adalah nilai props.

Kita dapat mengakses props apapun dari dalam kelas komponen.

Sintaksis:

this.props .props_name;

Dalam sintaks di atas, this.props adalah objek global yang digunakan untuk mengakses props apa pun dari dalam kelas komponen, dan props_name adalah nama props React yang ingin kita akses.

Baca: JavaScript vs JQuery: Perbedaan Antara JavaScript dan JQuery

Bagaimana Cara Menggunakan React Props?

Ada dua cara berbeda untuk menggunakan data props React yang tidak dapat diubah dalam komponen apa pun. Kedua cara ini adalah dengan menambahkan props ke fungsi reactDom.render() di file utama atau dengan menambahkan data sebagai props default di komponen itu sendiri. Berikut cara menggunakan props React dengan kedua cara:

Menggunakan React Props Dari react.Dom.render() Fungsi

Pertama kita perlu menambahkan alat peraga di file komponen.

impor Bereaksi dari 'bereaksi'; //mengimpor perpustakaan React

class Contoh extends React.component { /* contoh adalah nama komponen yang memperluas properti kelas komponen React */

render() {

kembali (

<div>

<h2>{ini.alat peraga. firstProp } di h2</h2>

<h3>{ini, alat peraga. secondProp } di h3</h3>

</div>

);

}

}

ekspor default Contoh; //mengekspor komponen

Sekarang kita perlu menambahkan nilai ke props melalui fungsi reactDom.render() di file utama dan mengaksesnya dari sana.

impor Bereaksi dari 'bereaksi';

impor ReactDom dari 'react-dom';

impor Contoh dari './Contoh.jsx';

ReactDom.render(< Contoh firstProp = “Ini adalah Prop pertama ” secondProp = “Ini adalah Prop kedua ”/>, document.getElementById('example'));

ekspor default Contoh;

Hasil:

Ini adalah Prop pertama di h2

Ini adalah Prop kedua di h3

Menggunakan React Props Dengan Props Default di Konstruktor Komponen

Tambahkan props dan nilainya di file komponen.

impor Bereaksi dari 'bereaksi'; //mengimpor perpustakaan React

class Contoh extends React.component { /* contoh adalah nama komponen yang memperluas properti kelas komponen React */

render() {

kembali (

<div>

<h2>{ini.alat peraga. prop pertama }</h2>

<h3>{ini, alat peraga. Prop kedua }</h3>

</div>

);

}

}

Contoh .deafultProps = {

firstProp : “Ini adalah Prop pertama ”,

secondProp : “Ini adalah secondProp ”

}

ekspor default Contoh; //mengekspor komponen

Mengakses props React dari file utama.

impor Bereaksi dari 'bereaksi';

impor ReactDom dari 'react-dom';

impor Contoh dari './Contoh.jsx';

ReactDom.render(< Contoh />, document.getElementById('contoh'));

Output untuk ini akan mirip dengan penggunaan fungsi reactDom.render(), kecuali kali ini dilakukan dengan bantuan props default.

Lihat: Vue vs React: Perbedaan Antara Vue dan React

Bagaimana Melewati React Props Dari Satu Komponen ke Komponen lainnya

Penggunaan utama props React adalah untuk melewatkan data antar komponen dalam React. Contoh berikut akan membantu kita memahami bagaimana data dilewatkan.

impor Bereaksi dari 'bereaksi';

class Fruit extends React.Component {

render() {

return <h4>Saya {this.props. nama } di h4</h4>

}

}

class Pertanyaan meluas React.Component {

render() {

kembali (

<div>

<h3>Buah apa kamu? Dalam h3</h3>

< Nama buah = “Mangga” / > //Membuat alat peraga dan memberi nilai

</div>

);

}

}

ReactDom.render(<Pertanyaan />, document.getElementById('buah'));

Ini akan memberikan output berikut:

Buah yang mana kamu? di h3

Saya Mangga di h4

Menggunakan Negara dan Alat Peraga Bersama

Seperti yang kita semua tahu bahwa React adalah bahasa yang dinamis, dan fleksibilitasnya adalah USP. Oleh karena itu, menggunakan props React saja tidak cukup dalam mengembangkan aplikasi. Masalah ini diselesaikan dengan bantuan negara. Status adalah fitur React lain yang digunakan untuk mengelola data. Mari kita lihat bagaimana kita dapat menggabungkan props dan state React untuk membuat aplikasi kita lebih interaktif dan dinamis.

impor Bereaksi dari 'bereaksi';

class Car memperluas React.Component {

konstruktor(alat peraga) {

super(alat peraga);

ini.status = {

firstCar: “Ini Mercedes-Benz! Di h2”, //menetapkan nilai ke status

mobil kedua: “Ini BMW! Dalam h3” //memberikan nilai ke keadaan

}

}

render() {

kembali (

<div>

<FirstCar firstProp = {this.state.firstCar}/> //memberikan nilai ke props

<SecondCar secondProp = {this.state.secondCar}/> //memberikan nilai ke props

</div>

);

}

}

class FirstCar memperluas React.Component {

render() {

kembali (

<div>

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

</div>

);

}

}

class SecondCar memperluas React.Component {

render() {

kembali (

<div>

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

</div>

);

}

}

ekspor mobil default;

Sekarang, kita perlu mengakses data dari file utama.

impor Bereaksi dari 'bereaksi';

impor ReactDOM dari 'react-dom';

impor Mobil dari './Car.jsx';

ReactDOM.render(<Mobil />, document.getElementById('mobil'));

Hasil:

Ini adalah Mercedes-Benz! di h2

Ini adalah BMW! di h3

Baca Juga: Perbedaan Antara Node JS dan React JS

Menyimpulkannya

Kombinasi dari props React dan status untuk mengelola data di React menjadikannya salah satu library JavaScript yang paling berguna. Ada banyak sekali ide proyek React di luar sana, dan hanya pengembang yang dapat menghidupkannya. Oleh karena itu, ada permintaan yang sangat baik untuk pengembang ReactJS dan kenaikan gaji mereka .

Jika ide membantu bisnis untuk membuat aplikasi dan mengerjakan banyak proyek React untuk mendapatkan penghasilan besar menggairahkan Anda, maka inilah saatnya untuk mengambil tindakan sebelum terlambat. Anda dapat mengikuti kursus online yang ditawarkan oleh upGrad untuk mempelajari segala sesuatu tentang React dan menjadi pengembang perangkat lunak yang lengkap.

Jika Anda tertarik untuk mempelajari lebih lanjut tentang reaksi, pengembangan full-stack, lihat Diploma PG Tingkat & IIIT-B dalam Pengembangan Perangkat Lunak Full-stack yang dirancang untuk profesional yang bekerja dan menawarkan 500+ jam pelatihan ketat, 9+ proyek, dan penugasan, status Alumni IIIT-B, proyek batu penjuru praktis & bantuan pekerjaan dengan perusahaan-perusahaan top.