ReactJS Bahasa Indonesia

Kenapa Harus React?

Di ciptakan pertama kali untuk membantu Facebook mengatasi masalah DOM-nya, kini library ini telah menjadi salah satu library javascript terpopuler.

"Menyalip AngularJS yang sepenuhnya merupakan sebuah framework, dan saling kejar-kejaran dengan VueJS."

Banyak sekali kelebihan-nya, tapi tidak akan saya tuliskan. Anda bisa googling sendiri dan cari tahu di situs lain.

Ada beberapa hal yang mesti Anda persiapkan sebelum bisa menggunakan reactJS. Library ini tidak seperti jquery yang tinggal pasang di laman html dan bisa Anda gunakan.

Pertama-tama, Anda mesti mempersiapkan server. Mau itu server lokal (di komputer Anda), maupun server (hosting) tempat lain.

Mempersiapkan Lingkungan

Saran saya, untuk pemula maka bisa coba pakai server lokal yaitu komputer atau laptop sendiri untuk bisa menjalankan react ini.

Tapi kalau Anda orang yang tidak sabaran, bisa langsung coba di browser Anda. Caranya tinggal klik situs : Codesandbox for React atau Stackblitz ini.

Kalau Anda punya hosting sendiri, bisa coba simpan file dari link ini dengan nama index.html di folder public Anda. Kemudian, edit file tersebut. Jika sudah, akseslah situs yang meng-host file ini untuk melihat perubahan.

Untuk jangka panjang, maka Anda wajib mempersiapkan server. Caranya sangat mudah.

Bagi pengguna windows 7 / 8 / 10 :

1. Download powershell.

Pada saat artikel ini dibuat, powershell yang telah di rilis untuk versi terbarunya adalah versi 7.1.3. Anda bisa mendownload-nya dari link ini.

Bagi pemula, setelah Anda buka link diatas, maka Anda wajib scroll sampai bawah dan lihat di bagian Assets. Scroll lagi dan cari link PowerShell-7.1.3-win-x64.msi dan PowerShell-7.1.3-win-x86.msi.

Sesuaikan arsitektur komputer ataupun laptop Anda. Jika Anda memakai windows 7 versi 32bit, maka pilih yang PowerShell-7.1.3-win-x86.msi. Sedangkan yang versi 64bit wajib pilih yang PowerShell-7.1.3-win-x64.msi.

Bagaimana kalau Anda tidak tahu cara cek arsitektur komputer? Gampang, tinggal klik tombol Windows di keyboard, trus ketik di bagian search: "dxdiag". Akan muncul dxdiag.exe maka Anda tinggal klik saja aplikasi tersebut.

Lihat dibagian Operating System. Jika tertera 64-bit, maka arsitektur Anda adalah versi 64bit.

Ini saya beri contoh tampilan dxdiag di komputer saya:

Komputer saya masih memakai windows versi 7, dengan arsitektur 64-bit. Jadul,ya? Mau bagaimana lagi, saya males upgrade ke versi terbaru.

Setelah download, tolong di install.

Untuk sistem operasi lain : MacOS, OSX, Linux, CentOS, dsb, tolong merujuk pada masing-masing OS dan arsitektur.

2. Download NodeJS

NodeJS adalah platform yang memungkinkan javascript di jalankan dari sisi back-end, bukan hanya front-end. Selengkapnya tentang platform ini, bisa Anda cari di google.

Untuk mendownload, silahkan klik situs resminya: Node.js.

Pastikan di install sesuai dengan arsitektur dan OS Anda.

Bagi pengguna windows 7, maka nodejs versi terbaru tidak lagi bisa di install. Ini karena dukungan dari nodejs untuk windows 7 mulai dari versi 13.6.0 ke atas telah dihentikan.

Solusinya :

1. Download dan install dulu versi 13.6.0-x<arsitektur Anda>.msi dari link ini
2. Download versi terbaru tapi yang zip. Cth: versi 16.4.2, klik sini (sesuaikan dengan arsitektur)
3. Extract file terbaru yang di download ke sebuah folder, sebutlah di folder Downloads
4. Copy isi folder tersebut dan pastekan di folder tempat NodeJS di install. Cth: C:\Program Files\nodejs
5. Kemudian, Klik kanan My Computer > pilih Properties
6. Klik Advanced system settings
7. Klik Environtment Variables...
8. Pada bagian User variables for <Nama PC Anda>, klik New...
9. Isi Variable name : NODE_SKIP_PLATFORM_CHECK
10. Isi Variable value : 1
11. Baru klik OK

3. Visual Studio Code

Text-editor ini sangat diperlukan untuk editing code nantinya, dan merupakan aplikasi essensial. Silahkan download dengan cara klik situs resminya : Visual Studio Code.

Sesuaikan dengan arsitektur dan OS, dan jangan lupa di install.

Persiapan untuk lingkungan pemrograman reactJS telah selesai. Selanjutnya akan saya tuliskan lagi nanti.

Cara Install ReactJS

Pertama-tama pastikan semua persiapan sudah selesai.

Jika sudah, maka saatnya memulai membuat project contoh untuk di edit dan di kembangkan nantinya.

Saran saya, buat sebuah folder di local disk, dan beri nama dengan sesuai.

Kalau saya sendiri, membuat folder di D:/ dengan nama folder NODEJS. Kemudian di dalam-nya saya buat folder lagi dengan nama REACTJS.

Di dalam folder REACTJS ini nantinya saya akan meng-copy project contoh dari react dan kemudian mengeditnya dengan VS Code.

Nama folder akhir saya: D:/NODEJS/REACTJS/<nama project>.

Untuk langkah-langkah-nya sangat mudah.

1. Pertama-tama buka powershell sebagai administrator
2. Berpindah ke disk lokal, caranya ketik dan eksekusi kode ini $ cd D:/
3. Kemudian ketik dan eksekusi : $ mkdir NODEJS/REACTJS
4. Ketik lagi : $ cd NODEJS/REACTJS
5. $ npx create-react-app myproject
6. Tunggu sampai selesai, ketik lagi: $ cd myproject
7. $ npm start
8. Jika berhasil, akan terbuka tab baru di browser default Anda dengan alamat : http://localhost:3000/

Perhatikan tanda $ (dolar). Tanda itu tidak perlu di ketik, hanya simbol kode CLI.

Jika ada perintah yang depan-nya memakai simbol $ (dolar) ini, maka artinya perintah ini di jalankan menggunakan powershell (lokal) ataupun ssh (non-lokal).

Rangkuman perintah-nya ini:

$ cd D:/
$ mkdir NODEJS/REACTJS
$ cd NODEJS/REACTJS
$ npx create-react-app myproject
$ cd myproject
$ npm start

[Tips] Catatan tentang Async/Await di Javascript

Ini adalah basic javascript yang tidak ada kaitan dengan API dari React. Tapi seringkali di pakai, terutama untuk aplikasi yang membutuhkan akses data dari web pihak ketiga.

Ada 2 jenis pemanggilan yang sering digunakan.

Yang pertama:

Jadi, kode di atas memang bisa berjalan dengan baik. Tapi, ada solusi yang lebih baik dengan kode yang lebih bersih dan sederhana.

Anda juga bisa menggunakan fitur baru bernama IIFE (Immediately invoked function expression) untuk trigger function yang telah Anda buat sebelumnya yaitu LoadData().

React Components & Templates

Kita akan belajar membuat aplikasi blog sederhana menggunakan React. Dan untuk itu, kita akan melakukan sedikit perombakan pada project awal.

Ingat, kita membuat project menggunakan perintah $ npx create-react-app myproject, sehingga Anda langsung bisa mencoba menjalankan react.

Tapi, project awal ini tidak begitu berguna. Kita lakukan beberapa hal untuk mengubah project ini agar lebih mudah di kembangkan.

1. Hapus import reportWebVitals from './reportWebVitals'; dari index.js
2. Hapus reportWebVitals(); dari index.js
3. Hapus App-test.js
4. Hapus setupTests.js
5. Hapus App.css

Kemudian, pada App.js, ubah menjadi seperti ini:

Tujuan saya menyuruh Anda membuat hal ini adalah karena kita akan mempelajari tentang react, sehingga penting bagi kita untuk menyederhanakan semuanya.

Ini adalah template awal yang akan kita gunakan untuk membuat project blog sederhana.

Satu lagi catatan:

Tidak perlu import React di file turunan.

Karena di index.js sudah ada import React, maka selanjutnya pada App.js kita tidak perlu lagi meng-import-nya.

Fitur ini tersedia untuk react versi 17 keatas.

[Tips] Fitur JS yang Sering Terpakai

Kebanyakan framework, project javascript pada platform NodeJS telah mengadopsi fitur-fitur ES6 (baca: ekmasix).

Walaupun pada browser kebanyakan belum semuanya mendukung, tapi para developer javascript zaman now sangat wajib menguasai-nya.

Untuk informasi lebih jauh tentang EcmaScript 2015 ini, bisa baca artikel berjudul Kenalan dengan ES6 Javascript (Introduction, variable, arrow function) #Part1 buatan Reno Putra Prawira.

So, dari pengamatan dan pengalaman saya, ternyata ada beberapa fitur JS yang sangat sering digunakan.

Berikut listnya dari ES6:

• let
• const
• for of
• for in
• arrow function
• class
• promises
• spread operator
• String.includes
• String.startsWith
• String.endsWith
• Arrays.from
• Arrays.keys
• Number.isInteger
• isFinite
• isNaN

Sedangkan dari javascript sebelum ES6, banyak digunakan fitur-fitur manipulasi array. Referensi lengkap bisa baca di situs W3Schools: JavaScript Array Methods

Paling sering saya lihat digunakan dalam project adalah fungsi array.map yang digabung dengan arrow function.

Kalau penggunaan pada react, seringkali digunakan untuk menampilkan state ataupun props.

Output Data JSX di Function Component

React Zaman now menggunakan function & hook sebagai pengganti dari class. Adapun alasan menggunakan function adalah karena penggunaan class seringkali membingungkan dan bisa menyebabkan efek samping yang tidak di inginkan.

Banyak hal yang menjadi pertimbangan tim pengembang mereka sampai akhirnya hook keluar sebagai solusi.

Untuk itu, dalam pembuatan project blog kita tidak akan lagi menggunakan class.

Hal pertama yang akan kita pelajari adalah soal output data baik itu state, props, dsb.

Pada function component, kita output-nya di dalam syntax return().

Contoh output (render) pada FC :

Props dan State

Rangkuman seputar props dan state.

1. Props adalah singkatan dari properties, yaitu data yang di-"salurkan" dari parent component ke child component.
2. State adalah data yang eksklusif hanya tersedia pada suatu component dan hanya bisa di olah oleh component pemilikinya.
3. Beda props dan state yaitu props tidak bisa me-render UI component jika nilai-nya berubah (non-reactive). Sedangkan state akan me-render ulang UI component pemiliknya setiap kali nilai-nya berubah (reactive).
4. Suatu component tidak bisa menciptakan props sendiri kecuali di-"salurkan" oleh component diatasnya.
5. Sedangkan state hanya bisa diciptakan dalam component itu sendiri.
6. Child component bisa merubah state dari parent component menggunakan function props.

Membuat Props

Membuat props sangat mudah. Anda bisa langsung "hardcode" ke dalam child component.

Atau membuat state dahulu barulah jika diperlukan, Anda baru masukkan ke dalam child component.

Function Props

Parent component buat function untuk mengubah state blog dahulu.

Pada child component.

Menambah Styling pada Output Function Component

Pada element yang mau di tambahkan inline styling, bisa output dalam bentuk object.

Rekomendasi Membuat Function

Pembuatan function di RFC (React Function Component) ada 2 cara.

Cara pertama paling sederhana:

atau versi singkat...

Cara kedua:

Jika ada parameter / props:

Apabila mau data tertentu dari props:

Parameter / atribut yang digunakan pada parent component haruslah sesuai dengan data yang di inginkan.

Pada contoh di atas, atribut props yang di inginkan adalah datasatu dan datadua.

Maka di parent component seperti ini:

Perhatikan bahwa props datatiga juga tersedia tapi karena tidak di-inginkan maka data dari props ini tidak akan tersedia pada child component tersebut.

Penggunaan Kembali Component

Pada awalnya kita pasti membuat component satu-per-satu untuk setiap bagian pada aplikasi web kita.

Tapi hal ini akan memakan waktu jika kita terus-menerus membuat component padahal UI dari component tersebut sama satu sama-lain. Hanya berbeda dari sisi data saja.

Contoh paling sederhana adalah tampilan arsip blog yang mirip dengan tampilan pada halaman category maupun tags pada wordpress.

Tidaklah bijak membuat 3 components untuk tampilan yang mirip (bahkan sama).

Maka cara terbaik adalah membuat 1 component yang tampilan-nya hanya berubah dari sisi data saja.

Jadi nanti pada component parent yang membutuhkan rendering UI tersebut, cukup ubah props component child ini.

Bersambung nanti...