Bagikan melalui

Gambaran Umum React

Apa itu React JS?

React adalah pustaka JavaScript sumber terbuka yang digunakan untuk membangun antarmuka pengguna front-end. Tidak seperti pustaka JavaScript lainnya yang menyediakan kerangka kerja aplikasi lengkap, React hanya berfokus pada pembuatan tampilan aplikasi melalui unit yang dienkapsulasi yang disebut komponen yang mempertahankan status dan menghasilkan elemen UI. Anda dapat menempatkan komponen individual di halaman web atau hierarki sarang komponen untuk membuat UI yang kompleks.

Komponen React biasanya ditulis dalam JavaScript dan JSX (JavaScript XML) yang merupakan ekstensi JavaScript yang terlihat seperti HTML, tetapi memiliki beberapa fitur sintaks yang memudahkan untuk melakukan tugas umum seperti mendaftarkan penanganan aktivitas untuk elemen UI. Komponen React mengimplementasikan metode render , yang mengembalikan JSX yang mewakili UI komponen. Dalam aplikasi web, kode JSX yang dikembalikan oleh komponen diterjemahkan ke dalam HTML yang sesuai dengan browser dan dirender di dalamnya.

Penting

Pada bulan Februari 2025, tim React mengumumkan bahwa Create React App (CRA) tidak digunakan lagi untuk aplikasi baru. Tim merekomendasikan agar aplikasi yang ada bermigrasi ke kerangka kerja seperti Next.js atau React Router atau bermigrasi ke alat build seperti Vite, Parcel, atau RSBuild.

Apakah React berfungsi di Windows?

Ya. Windows mendukung dua lingkungan berbeda untuk mengembangkan aplikasi React:

Apa yang dapat Anda lakukan dengan React?

Windows mendukung berbagai skenario untuk pengembang React, termasuk:

  • Aplikasi web dasar: Jika Anda baru mengenal React dan terutama tertarik untuk mempelajari tentang membangun aplikasi web dasar dengan React, kami sarankan Anda membuat aplikasi React menggunakan alat frontend vite di Windows. Jika Anda berencana membuat aplikasi web yang akan disebarkan untuk produksi, Anda mungkin ingin mempertimbangkan untuk membuat aplikasi React menggunakan alat frontend vite pada Subsistem Windows untuk Linux (WSL), untuk kecepatan performa yang lebih baik, kompatibilitas panggilan sistem, dan keselarasan antara lingkungan pengembangan lokal dan lingkungan penyebaran Anda (yang sering merupakan server Linux).

  • Aplikasi Halaman Tunggal (SPAs): Ini adalah situs web yang berinteraksi dengan pengguna dengan menulis ulang halaman web saat ini secara dinamis dengan data baru dari server, bukan default browser memuat seluruh halaman baru. Jika Anda ingin membangun situs web SPA berorientasi konten statis, sebaiknya instal Gatsby di WSL. Jika Anda ingin membangun situs web SPA yang dirender server dengan backend Node.js, sebaiknya instal Next.js di WSL. (Meskipun Next.js sekarang juga menawarkan penyajian file statis).

  • Aplikasi desktop asli: React Native for Desktop + macOS memungkinkan Anda membangun aplikasi desktop asli dengan JavaScript yang berjalan di berbagai jenis PC desktop, laptop, tablet, Xbox, dan perangkat Mixed Reality. Ini mendukung SDK Windows dan macOS SDK.

  • Aplikasi seluler native: React Native adalah cara lintas platform untuk membuat aplikasi Android dan iOS menggunakan JavaScript yang di-render ke kode UI platform native. Ada dua cara utama untuk menginstal React Native -- Expo CLI dan React Native CLI. Ada perbandingan yang baik dari keduanya di StackOverflow. Expo memiliki aplikasi klien untuk perangkat seluler iOS dan Android untuk menjalankan dan menguji aplikasi Anda. Untuk petunjuk tentang mengembangkan aplikasi Android menggunakan Windows, React Native, dan Expo CLI, lihat React Native untuk pengembangan Android di Windows.

Opsi penginstalan

Ada beberapa cara berbeda untuk menginstal React bersama dengan toolchain terintegrasi yang paling sesuai untuk skenario kasus penggunaan Anda. Berikut adalah beberapa yang paling populer.

Alat React

Menulis komponen React sederhana di editor teks biasa adalah pengenalan yang baik untuk React, tetapi kode yang dihasilkan dengan cara ini berlebihan, sulit untuk dipelihara dan diimplementasikan, serta lambat. Ada beberapa tugas umum yang perlu dilakukan aplikasi produksi. Tugas-tugas ini ditangani oleh kerangka kerja JavaScript lain yang diambil oleh aplikasi sebagai dependensi. Tugas-tugas ini meliputi:

  • Kompilasi - JSX adalah bahasa yang umum digunakan untuk aplikasi React, tetapi browser tidak dapat memproses sintaks ini secara langsung. Sebaliknya, kode perlu dikompilasi ke dalam sintaks JavaScript standar dan disesuaikan untuk browser yang berbeda. Babel adalah contoh kompilator yang mendukung JSX.
  • Bundling - Karena performa adalah kunci untuk aplikasi web modern, penting bahwa JavaScript aplikasi hanya menyertakan kode yang diperlukan untuk aplikasi dan digabungkan ke dalam file sesedikit mungkin. Bunder, seperti webpack melakukan tugas ini untuk Anda.
  • Manajemen paket - Manajer paket memudahkan untuk menyertakan fungsionalitas paket pihak ketiga di aplikasi Anda, termasuk memperbaruinya dan mengelola dependensi. Manajer paket yang umum digunakan termasuk Yarn dan npm.

Bersama-sama, rangkaian kerangka kerja yang membantu Anda membuat, membangun, dan menyebarkan aplikasi Anda disebut toolchain. Lingkungan pengembangan yang mudah diatur untuk react yang menggunakan toolchain ini adalah Vite yang menghasilkan aplikasi satu halaman sederhana untuk Anda. Satu-satunya pengaturan yang diperlukan untuk menggunakan Vite adalah Node.js.

Direktori komponen React Native

Komponen yang dapat digunakan dalam aplikasi React Native mencakup hal berikut:

  • Komponen inti - Komponen yang dikembangkan dan didukung sebagai bagian dari kerangka kerja React Native.
  • Komponen komunitas - Komponen yang dikembangkan dan dirawat oleh masyarakat.
  • Komponen asli - Komponen yang Anda buat sendiri, menggunakan kode platform-asli, dan mendaftar agar dapat diakses dari React Native.

React Native Directory menyediakan daftar pustaka komponen yang dapat difilter berdasarkan platform target.

Toolchain Fullstack React opsi

React adalah pustaka, bukan kerangka kerja, jadi mungkin memerlukan alat tambahan untuk membuat aplikasi yang lebih kompleks. Selain menggunakan React, Anda mungkin ingin mempertimbangkan untuk menggunakan:

  • Manajer paket: Dua manajer paket populer untuk React adalah npm (yang disertakan dengan NodeJS) dan yarn. Keduanya mendukung perpustakaan paket yang luas dan terawat dengan baik yang dapat diinstal.
  • React Router: kumpulan komponen navigasi yang dapat membantu Anda dengan hal-hal seperti URL bookmarkable untuk aplikasi web Anda atau cara yang dapat dikomposisikan untuk menavigasi di React Native. React benar-benar hanya berkaitan dengan pengelolaan status dan merender status tersebut ke DOM, jadi membuat aplikasi React biasanya mengharuskan penggunaan perpustakaan rute seperti React Router.
  • Redux: Kontainer status yang dapat diprediksi yang membantu arsitektur aliran data. Kemungkinan bukan sesuatu yang Anda butuhkan sampai Anda masuk ke pengembangan React yang lebih canggih. Untuk mengutip Dan Abramov, salah satu pembuat Redux: "Jangan gunakan Redux sampai Anda memiliki masalah dengan Vanilla React."
  • Webpack: Alat build yang memungkinkan Anda mengkompilasi modul JavaScript, juga dikenal sebagai bunder modul. Saat webpack memproses aplikasi Anda, webpack secara internal membangun grafik dependensi yang memetakan setiap modul yang dibutuhkan proyek Anda dan menghasilkan satu atau beberapa bundel.
  • Uglify: Pengurai JavaScript, minifier, kompresor, dan toolkit pengurai.
  • Babel: Kompilator JavaScript terutama digunakan untuk mengonversi kode ECMAScript 2015+ menjadi versi JavaScript yang kompatibel mundur di browser atau lingkungan saat ini dan yang lebih lama. Ini juga dapat membantu untuk menggunakan babel-preset-env sehingga Anda tidak perlu mengelola transformasi sintaks secara mendetail atau polyfill browser, dan Anda dapat menentukan browser internet mana yang ingin didukung.
  • ESLint: Alat untuk mengidentifikasi dan melaporkan pola yang ditemukan dalam kode JavaScript yang membantu Anda membuat kode lebih konsisten dan menghindari bug.
  • Enzim: Utilitas pengujian JavaScript untuk React yang memudahkan pengujian output Komponen React Anda.
  • Jest: Kerangka kerja pengujian yang bekerja sama dengan Babel untuk membantu menulis pengujian JavaScript idiomatik di aplikasi React.
  • Mocha: Kerangka kerja pengujian yang berjalan pada Node.js dan di browser untuk membantu pengujian, pelaporan, dan pemetaan pengecualian asinkron ke kasus pengujian yang benar.

Kursus dan tutorial React

Berikut adalah beberapa tempat yang direkomendasikan untuk mempelajari React dan membangun aplikasi sampel.

Sumber Daya Tambahan: