Salah satu dasar pemrograman yang menurut saya wajib untuk dipelajari adalah bagaimana caranya melempar atau memberikan sebuah nilai (passing value) ke sebuah fungsi.

Di perkuliahan, saya mempelajari hal tersebut dengan menggunakan bahasa C# (C-Sharp) dan Java. Yaa bisa saya simpulkan bahwa sebenarnya konsepnya sama saja, namun caranya berbeda di setiap bahasa pemrograman. Nah, sekarang saya sedang mempelajari bahasa pemrograman JavaScript.

Karena memang saya sedang fokus mengembangkan kemampuan saya pada bidang pengembangan aplikasi di platform web (Web Development) khususnya di bidang Front-End Web Development.

Pada bahasa pemrograman JavaScript, caranya adalah seperti ini.

Pertama, saya akan buat dulu fungsinya. Kali ini adalah fungsi untuk menampilkan sebuah kalimat dengan masukkan dari user berupa nama mereka yang nilainya akan diterima fungsi tersebut dalam bentuk parameter.

function callMe(nama) {
    console.log("Selamat malam, " + nama + ". Gimana kabarnya?");
}

Kemudian saya akan panggil fungsi tersebut dan sekaligus memasukkan nilai nama yang akan ditampilkan.

callMe("Bagas");

dan hasilnya pun menjadi seperti ini.

kemudian saya belajar sebuah framework yang bernama React. Framework ini dibuat oleh Facebook yang digunakan untuk membangun tampilan antarmuka pengguna (user interface). Disini saya mengenal beberapa istilah baru seperti Component-Based, JSX, Props, State, dan masih banyak lagi.

Sekarang yang saya ingin bahas adalah tentang Props, Let's Go.

Props ini adalah singkatan dari properties. Penggunaannya mirip bahkan sama seperti parameter yang ada pada sebuah fungsi. Untuk passing value ke sebuah fungsi yang bisa dari masukkan user atau yang lainnya.

Disini saya akan mencoba mengganti kalimat "Edit src/App.js and save to reload." pada laman awal yang ditampilkan setelah membuat project baru dengan kalimat "Hello friends! This is Bagas personal website.".

Pertama, saya akan menambahkan parameter "props" pada fungsi App, digunakan untuk menampung nilai yang nantinya akan didapatkan dari masukkan pengguna.

Dan saya membuat sebuah tag p (paragraph tag) untuk menampilkan nilai yang ada di props tersebut. Tak lupa menuliskan nama props yang digunakan untuk menampung value atau nilainya.

function App(props) {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          {props.hello}          
        </p>
      </header>
    </div>
  );
}

Kemudian memasukkan value kedalam props yang saya buat didalam tag App yang dipanggil pada index.js.

ReactDOM.render(<App hello="Hello friends! This is Bagas
personal website."/>, 
document.getElementById('root'));

Maka hasilnya akan menjadi seperti ini.

Itu tadi penjelasan singkat tentang passing value menggunakan props di React dari saya. Semoga bermanfaat buat saya sendiri dan bagi yang mampir dan membaca tulisan ini.

Thanks for stopping by!