**React.js: Panduan Singkat untuk Pemula** React.js, yang sering disebut React, adalah pustaka JavaScript yang populer untuk membangun antarmuka pengguna (UI). Dikembangkan oleh Facebook, React memungkinkan Anda membuat komponen UI yang dapat digunakan kembali, sehingga menyederhanakan proses pengembangan aplikasi web interaktif. **Apa Itu Komponen?** Inti dari React adalah konsep komponen. Bayangkan komponen sebagai blok bangunan UI. Setiap komponen memiliki logika internal (state) dan cara menampilkan dirinya (render). Komponen bisa sederhana seperti tombol atau kompleks seperti formulir lengkap. **JSX: Menulis HTML dalam JavaScript** React menggunakan JSX, ekstensi sintaks untuk JavaScript yang memungkinkan Anda menulis kode mirip HTML dalam file JavaScript. JSX kemudian ditranspilasi menjadi JavaScript biasa oleh alat seperti Babel. Ini membuat struktur UI lebih mudah dibaca dan dipelihara. Contoh JSX: ```javascript const nama = "Pengguna Baru"; const elemen =

Halo, {nama}!

; ``` **Komponen Fungsional vs. Komponen Kelas** Dulu, ada dua cara utama membuat komponen React: menggunakan fungsi (komponen fungsional) dan menggunakan kelas (komponen kelas). Namun, dengan diperkenalkannya Hooks di React 16.8, komponen fungsional telah menjadi pilihan yang lebih disukai. Komponen Fungsional dengan Hooks: ```javascript import React, { useState } from 'react'; function Salam() { const [nama, setNama] = useState('Pengguna Baru'); return ( ); } ``` Dalam contoh ini, `useState` adalah Hook yang memungkinkan Anda menambahkan state ke komponen fungsional. **State dan Props: Data dalam React** * **State:** Data internal suatu komponen. State bersifat privat untuk komponen itu sendiri dan dapat diubah menggunakan fungsi `setState` (atau `setNama` dalam contoh di atas) yang disediakan oleh Hook `useState`. * **Props (Properties):** Data yang diteruskan *dari* komponen induk *ke* komponen anak. Props bersifat *read-only* dari sudut pandang komponen anak. **Rendering Bersyarat:** React memungkinkan Anda merender elemen secara bersyarat berdasarkan kondisi tertentu. Ini dicapai menggunakan operator ternary, operator `&&`, atau pernyataan `if/else` dalam JSX. Contoh: ```javascript function Pesan(props) { const isMasuk = props.isMasuk; return ( ); } ``` **Langkah Awal:** 1. **Instalasi:** Gunakan `create-react-app` untuk menyiapkan proyek React baru dengan cepat: `npx create-react-app nama-aplikasi-anda` 2. **Jalankan Aplikasi:** Masuk ke direktori aplikasi Anda (`cd nama-aplikasi-anda`) dan jalankan `npm start`. Ini akan membuka aplikasi di browser Anda. 3. **Pelajari Lebih Lanjut:** Kunjungi dokumentasi resmi React (reactjs.org) untuk panduan lengkap dan contoh lebih lanjut. React membutuhkan kurva pembelajaran, tetapi dengan latihan dan kesabaran, Anda dapat membangun aplikasi web yang menarik dan dinamis. Selamat belajar!