Damnthelion > React JS > Install React JS: Membuat Project Baru
Install React JS: Membuat Project Baru

Install React JS: Membuat Project Baru

React JS, atau yang sering disebut sebagai React, merupakann sebuah library JavaScript yang revolusioner yang telah menciptakan gelombang baru dalam pengembangan antarmuka pengguna (UI) untuk aplikasi web.

Diperkenalkan pertama kali oleh Facebook pada tahun 2013, React telah menjadi fondasi utama bagi banyak pengembang web yang ingin menciptakan pengalaman pengguna yang responsif dan dinamis.

Keunggulan utama React terletak pada kemampuannya untuk mempermudah pengembangan aplikasi web yang membutuhkan perubahan data secara real-time tanpa mengharuskan pengguna untuk me-refresh seluruh halaman.

Dengan konsep komponen yang dapat diatur, React memungkinkan developer untuk merancang UI yang terkelola dengan baik, modular, dan mudah diintegrasikan.

Dibandingkan dengan penggunaan vanilla JavaScript, React menghadirkan paradigma pemrograman yang lebih bersih dan efisien. Hal ini mengurangi kompleksitas penulisan kode, mempercepat proses pengembangan, dan memberikan berbagai fungsionalitas yang diperlukan tanpa menimbulkan kerumitan yang tidak perlu.

Secara keseluruhan, React telah membuka pintu untuk pengembangan aplikasi web yang lebih tangkas, responsif, dan efektif, memberikan pengalaman pengguna yang unggul di dunia digital yang terus berkembang.

Sekilas tentang fitur utama React

Komponen

Contoh komponen pada platform Instagram - Gambar via Simplilearn
Contoh komponen pada platform Instagram – Gambar via Simplilearn

Komponen, sebagai elemen utama React JS, dapat dibagi-bagi menjadi unit-unit kecil yang disebut komponen.

Setiap komponen memiliki logika, fungsi, dan alur data sendiri-sendiri.

Keunggulan utamanya terletak pada kemampuan penggunaan ulang komponen di seluruh aplikasi, mengurangi waktu pengembangan secara signifikan.

Javascript XML (JSX)

JSX sejatinya adalah Javascript yang digabung dengan HTML - Gambar via Simplilearn
JSX sejatinya adalah Javascript yang digabung dengan HTML – Gambar via Simplilearn

React JS menggunakan JSX, sebuah ekstensi syntax JavaScript yang memungkinkan penulisan kode HTML langsung dalam file JavaScript.

Keunggulan ini memudahkan pembacaan dan penulisan kode komponen React, mempermudah dan mengakselerasi pengembangan aplikasi.

Penggunaan syntax JavaScript ini telah menjadi tren populer, terutama dalam lingkup pengembangan yang difasilitasi oleh React.

Virtual DOM

Gambaran sederhana tentang DOM dan Virtual DOM - Gambar via ProgrammingWithMosh
Gambaran sederhana tentang DOM dan Virtual DOM – Gambar via ProgrammingWithMosh

React JS memanfaatkan konsep Virtual DOM untuk meningkatkan efisiensi pembaruan antarmuka pengguna (UI) dan mempercepat kinerja aplikasi web.

Virtual DOM merupakan representasi struktur DOM dalam bentuk virtual yang disimpan di dalam memori (state).

Ketika terjadi perubahan data, React membandingkan Virtual DOM dengan DOM aktual, dan hanya akan memperbarui bagian yang perlu berubah, bukan seluruh halaman, seperti yang dilakukan oleh aplikasi web konvensional.

Satu arah

Pola binding data satu arah di React - Gambar Via CoderPad
Pola binding data satu arah di React – Gambar Via CoderPad

React JS menerapkan pola binding data satu arah, di mana data mengalir dari komponen parent ke komponen child melalui props.

Dengan alur data yang jelas, debugging menjadi lebih sederhana, memungkinkan identifikasi lokasi error dengan lebih mudah dalam aplikasi.

Pendekatan Data Binding ini tidak hanya mencegah kompleksitas yang tidak perlu, tetapi juga membuat aplikasi lebih mudah dimengerti.

Mudah dipelajari

React merupakan library yang mudah dipelajari
React merupakan library yang mudah dipelajari

React JS merupakan library yang relatif mudah dipelajari, karena sebagian besar menggabungkan konsep dasar HTML dan JavaScript.

Meskipun demikian, seperti halnya dengan tools, library, dan framework lainnya, diperlukan dedikasi dan waktu untuk mempelajari dan memahami sepenuhnya fungsi-fungsi yang ditawarkan oleh React.

Komunitas yang besar

Komunitas developer React yang besar
Komunitas developer React yang besar

React memiliki komunitas pengembang yang luas dan dinamis. Ini berarti terdapat banyak sumber daya, seperti dokumentasi yang kaya dan komponen-komponen yang tersedia di internet, yang dapat sangat membantu dalam proses pengembangan aplikasi.

Persiapan yang dibutuhkan sebelum install React JS

Terdapat beberapa hal yang perlu kamu siapkan sebelum mulai meng-install React JS. Pertama kamu membutuhkan sebuah code editor untuk menulis baris kode.

Saya menyarankan kamu untuk menggunakan code editor bernama Visual Studio Code karena code editor ini sangat friendly terhadap programmer baru.

Jika kamu mengguankan sistem operasi Windows, kamu bisa cek cara install Visual Studio Code di Windows ini. Di sana juga dijelaskan alasan mengapa menggunakan Visual Studio Code dapat membantu kamu belajar lebih cepat.

Selain itu, ada persyaratan wajib untuk mulai menggunakan React JS, yaitu Node JS dan npm. Untuk mulai menggunakan React JS, kamu perlu menginstall hal tersebut. Nah, kalau kamu pakai sistem operasi Windows kamu bisa baca cara install Node JS dan npm agar bisa install React.

Cara install React JS di Windows

Berikut ini langkah-langkah untuk meng-install React JS di sistem operasi Windows:

Menentukan Folder Project

Pertama-pertama kamu harus menentukan dimana kamu akan meng-install project React. Misal, pada tutorial ini, saya membuat folder di Local Disk C dengan lokasi C:\Project\damnthelion.

Membuat folder di C:\Project\damnthelion untuk lokasi folder project-project React JS
Membuat folder di C:\Project\damnthelion untuk lokasi folder project-project React JS

Setelah tu klik address bar seoerti yang ditandai garis merah, untuk mendapatkan lokasi relatif dari folder project yang ingin kita gunakan seperti di bawah ini.

Mendapatkan lokasi relatif dari folder yang ingin dijadikan folder project React
Mendapatkan lokasi relatif dari folder yang ingin dijadikan folder project React

Copy alamat tersebut, lalu simpan untuk digunakan nanti.

Mengakses command/ perintah npm melalui PowerShell

Untuk membuka PowerShell, tekan secara bersamaan tombol keyboard Windows + R. Lalu masukkan powershell kemudian tekan Enter seperti gambar di bawah ini.

Membuka PowerShell dengan Run
Membuka PowerShell dengan Run

Jika muncul window PowerShell, maka anda telah berhasil membuka PowerShell.

Tampilan window PowerShell
Tampilan window PowerShell

Set lokasi folder di PowerShell menuju folder project

Setelah PowerShell terbuka, saat nya kita masuk ke folder project React yang sudah kita buat sebelumnya dengan perintah:

cd C:\Project\damnthelion

Tekan Enter untuk megeksekusi perintah tersebut.

PowerShell sudah berpindah ke C:\Project\damnthelion (lokasi folder project)
PowerShell sudah berpindah ke C:\Project\damnthelion (lokasi folder project)

Install React

Sebelum mulai meng-install React, pastikan kamu sudah install Node JS dan npm di laptop/ komputer kamu.

Kemudian, masukkan perintah di bawah ini untuk mulai meng-install React di C:\Project\damnthelion pada folder example-app.

Kamu bisa mengganti example-app dengan nama project yang kamu inginkan.

npx create-react-app example-app

Seperti inilah tampilannya jika kamu berhasil masuk ke folder project via PowerShell dan memasukkan perintah install React.

Perintah untuk membuat project React baru
Perintah untuk membuat project React baru

Selanjutnya tekan Enter untuk meng-install React JS.

Proses instalasi React di folder project yang sudah ditentukan
Proses instalasi React di folder project yang sudah ditentukan

Tunggu hingga proses instalasi selesai. Jika sudah selesai maka PowerShell akan menampilkan seperti ini.

Proses instalasi React di folder project telah selesai
Proses instalasi React di folder project telah selesai

Mulai ngoding React dengan Visual Studio Code

Pastikan kamu sudah install Visual Studi Code sebelum melanjutkan ke tahap berikutnya.

Masukkan perintah berikut ini untuk masuk ke folder React bernama example-app yang telah kita buat sebelumnya, lalu tekan Enter.

cd example-app
Masuk ke folder React yang telah dibuat menggunakan cd
Masuk ke folder React yang telah dibuat menggunakan cd

Ketika sudah masuk ke folder example-app, masukkan perintah ini untuk membuka Visual Studio Code di folder React yang telah kita buat (C:\Project\damnthelion\example-app) dan tekan Enter untuk mengeksekusi perintah tersebut.

code .
Membuka Visual Studio Code menggunakan perintah code .
Membuka Visual Studio Code menggunakan perintah code .

Setelah itu, akan muncul window Visual Studio Code seperti gambar berikut ini.

Tampilan Visual Studio Code
Tampilan Visual Studio Code

Menjalankan React di Browser

Untuk menjalankan React di browser kamu perlu menjalankan terminal (kurang lebih sama seperti PowerShell) di Visual Studio Code – meskipun melalui PowerShell juga bisa, tetapi kita menggunakan terminal di VSCode agar menjadi lebih mudah untuk memahami tutorial ini.

Untuk menampilkan terminal klik menu View > Terminal atau kamu bisa menggunakan shortcut keyboard Ctrl + ˋ.

Menampilkan terminal di Visual Studio Code
Menampilkan terminal di Visual Studio Code

Masukkan perintah ini untuk menjalankan (serve) React di local server lalu tekan Enter.

npm run start

Jika berhasil, maka terminal akan menampilkan seperti ini.

React berhasil di serve di local server
React berhasil di serve di local server

Secara otomatis akan membuka browser dan menampilkan halaman React pada alamat http:/localhost:3000.

Tampilan awal React di browser
Tampilan awal React di browser

Selamat! kamu sudah berhasil install React!

Kesimpulan


Comments

Jika anda menemukan hal yang membingungkan, jangan malu untuk bertanya melalui kolom komentar, penulis sangat menyukai feedback apalagi jika feedback tersebut dapat memperbaiki penulisan agar mudah dipahami oleh pembaca lainnya di masa depan.

Leave a Reply

Your email address will not be published. Required fields are marked *