Belajar Menginstal dan Membuat Tampilan Sederhana Menggunakan React.Js

Halo teman-teman!

Kembali lagi bersama saya, pada kali ini saya akan membagikan tutorial untuk menginstall aplikasi sederhana menggunakan React.js. Tanpa menunggu lama lagi, mari kita eksekusi. Let's start coding together :)

• Pertama-tama siapkan folder penyimpan untuk aplikasi react yang akan diinstal, lalu buka folder tersebut melalui Command Prompt. 
• Selanjutnya, create app hello menggunakan perintah "create-react-app hello"

• Tampilan ketika app hello berhasil, selanjutnya masuk ke aplikasi hello dengan perintah "cd hello" dan jalankan perintah "npm start"

• Hasil dibrowser, localhost:3000.

• Selanjutnya, buka aplikasi hello di Visual Studio Code.

• Hapus semua kode di app.js dan ganti menjadi seperti dibawah ini:

• Keterangan kode diatas: 

            • Baris 1 jika kita ingin menggunakan library react, maka harus diawali dengan kode ini untuk                  import library react 

            • Baris 2 untuk import style di app.css 

            • Baris 4 untuk membuat komponen dengan nama App 

            • Baris 5-9 idi dari komponen app yang dijalankan / di render 

            • Baris 12 agar app dapat di jalankan harus di eksport 

• Kemudian hapus kode di App.css dan buat class warna seperti dibawah ini:

    Memahami Component

• Component adalah potongan code kecil dari suatu aplikasi 
• Semua hal di React pasti terkait component, karena aplikasi yang dibuat oleh React terdiri dari satu component atau lebih yang di satukan dan di render menjadi sebuah kode HTML untuk tampil di browser 

    Latihan 1 Bekerja dengan Component 

• Buat file HelloWorld.js di folder src, sbb:

• Maka hasilnya seperti dibawah ini:

    Keunggulan komponen di React adalah sifatnya yang resusable, artinya component dapat digunakan     berulangkali sesuai dengan kebutuhan, sehingga tidak terjadi kesalahan penulisan kode yang                 berulang-ulang, dan ini sangat cocok untuk membangun aplikasi skala besar.

    

    Dinamis dengan Props

    Kalau kita lihat saat Latihan sebelumnya, hasilnya adalah sama semua, dan tentunya terlihat statis        dan tidak bervariasi. 

    Bagaimana caranya agar terlihat dinamis ? 

    Kita bisa menggunakan Props dalam component React. 

    Props adalah property yang terdapat didalam component React mirip atribut kalau di HTML. 

    Fungsi Props untuk menyimpan data dan komunikasi data antar component. 

    Syntak dasar dari Props adalah {props.name} atau {this.props.name}. 

    Untuk lebih jelasnya, mari kita terapkan props pada component yang telah kita buat, yaitu                      HelloWorld.
 

    Langkah 1: 

• Buka file HelloWorld.js, lalu ubah code seperti ini : 

• Menjadi

• Detailnya adalah sbb:

• Kemudian update file di App.js seperti dibawah ini: import React, { Component } from 'react'

• Maka hasilnya sebagai berikut: 

Sekian tutorial mengenai pembuatan aplikasi sederhana menggunaka React.js. Jikalau ada kurangnya saya minta maaf dan see you di tutorial-tutorial selanjutnya teman!!!

Nama : Gina Ferlindawati

NIM: 2022102004

Prodi : Teknik Informatika

Matkul : Advance Web Programming

Dosen : Sutrisno, M.Kom.