Oke, mari kita mulai tutorial React singkat dalam 500 kata: React adalah *library* JavaScript untuk membangun antarmuka pengguna (UI). Pendekatannya berbasis komponen, yang berarti kita memecah UI menjadi bagian-bagian kecil yang dapat digunakan kembali. **1. Persiapan:** * **Node.js dan npm (atau yarn):** Pastikan Node.js sudah terpasang di komputermu. npm biasanya ikut terpasang bersama Node.js. Yarn adalah alternatif dari npm. Keduanya berfungsi untuk mengelola *package* (paket kode) JavaScript. * **Editor Kode:** Gunakan editor kode seperti Visual Studio Code, Sublime Text, atau Atom. **2. Membuat Aplikasi React Baru:** Cara termudah untuk memulai adalah dengan `create-react-app`: ```bash npx create-react-app nama-aplikasi cd nama-aplikasi npm start ``` Perintah `npx create-react-app` akan membuat *scaffolding* (kerangka dasar) aplikasi React baru. `cd nama-aplikasi` berpindah ke direktori aplikasi yang baru dibuat. `npm start` menjalankan *development server* (server pengembangan) yang akan menampilkan aplikasi di *browser*. **3. Struktur Dasar Aplikasi React:** * **`src/`:** Direktori ini berisi kode sumber aplikasi kita. * **`index.js`:** Titik masuk aplikasi. Ini merender komponen `App` ke dalam *DOM* (Document Object Model). * **`App.js`:** Komponen utama aplikasi. Di sinilah kita akan membangun UI. * **`App.css`:** Gaya (style) untuk komponen `App`. * **`public/`:** Berisi aset publik seperti `index.html` dan gambar. **4. Komponen React:** Komponen adalah blok bangunan utama aplikasi React. Mereka adalah fungsi JavaScript yang mengembalikan elemen JSX. Contoh: ```javascript import React from 'react'; function Sapa(props) { return (

Halo, {props.nama}!

); } export default Sapa; ``` Komponen `Sapa` menerima *props* (properti) bernama `nama` dan menampilkannya. **5. JSX:** JSX adalah ekstensi sintaks JavaScript yang memungkinkan kita menulis HTML di dalam kode JavaScript. JSX diubah menjadi panggilan fungsi JavaScript oleh *transpiler* seperti Babel. **6. State dan Props:** * **State:** Data pribadi sebuah komponen yang bisa berubah. Perubahan state memicu *re-render* (gambar ulang) komponen. Gunakan `useState` *hook* untuk mengelola state. * **Props:** Data yang dilewatkan dari komponen *parent* (induk) ke komponen *child* (anak). Props bersifat *read-only* (hanya bisa dibaca) dari sudut pandang komponen *child*. Contoh: ```javascript import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( ); } export default Counter; ``` `useState(0)` menginisialisasi state `count` dengan nilai 0. `setCount` adalah fungsi yang digunakan untuk memperbarui state `count`. **7. Rendering Kondisional:** Kita dapat menampilkan elemen yang berbeda berdasarkan kondisi tertentu menggunakan operator ternary atau pernyataan `if`. **8. Event Handling:** React menggunakan sistem *event* sintetik yang membungkus *event* asli *browser*. Kita dapat menangani *event* seperti `onClick`, `onChange`, dll. **9. Hooks:** Hooks adalah fungsi yang memungkinkan kita menggunakan state dan fitur React lainnya di komponen fungsional. `useState`, `useEffect`, dan `useContext` adalah beberapa hooks yang umum digunakan. **Kesimpulan:** Ini hanyalah pengantar singkat tentang React. Untuk mempelajari lebih lanjut, jelajahi dokumentasi resmi React dan kerjakan proyek-proyek kecil untuk mempraktikkan apa yang telah Anda pelajari. Selamat belajar!