Cara Baru Memulai React: dari Create React App ke Framework
(ko.react.dev)Setelah Create React App dinyatakan deprecated, React kini secara resmi merekomendasikan untuk memulai dengan framework.
Cara Baru Memulai React: dari Create React App ke Framework
Jika Anda ingin membangun aplikasi atau situs web baru dengan React, sebaiknya mulai dari framework.
Jika aplikasi Anda memiliki batasan yang tidak didukung dengan baik oleh framework yang ada, atau Anda lebih suka membangun framework sendiri, atau hanya ingin mempelajari dasar-dasar aplikasi React, Anda bisa membangun aplikasi React dari nol.
Framework full-stack
Framework yang direkomendasikan ini mendukung semua fitur yang diperlukan untuk menerapkan dan menskalakan aplikasi di produksi. Mereka mengintegrasikan fitur React terbaru dan memanfaatkan arsitektur React.
Framework full-stack tidak memerlukan server
Semua framework di halaman ini mendukung client-side rendering (CSR), single-page app (SPA), dan static site generation (SSG). Aplikasi-aplikasi ini dapat diterapkan tanpa server ke CDN atau layanan static hosting. Selain itu, framework-framework ini memungkinkan Anda menambahkan server-side rendering per route jika itu sesuai dengan kebutuhan Anda.
Dengan begitu, Anda bisa memulai sebagai aplikasi khusus klien, lalu jika kebutuhan berubah di kemudian hari, Anda dapat memilih untuk menggunakan fitur server pada route tertentu tanpa harus menulis ulang aplikasi. Lihat dokumentasi framework untuk cara mengonfigurasi strategi rendering.
Next.js (App Router)
App Router milik Next.js adalah framework React yang memungkinkan aplikasi React full-stack dengan memanfaatkan arsitektur React secara maksimal.
npx create-next-app@latest
Next.js dikelola oleh Vercel. Anda dapat membangun aplikasi Next.js dan menerapkannya ke Node.js, serverless hosting, atau server Anda sendiri. Next.js juga mendukung static export yang tidak memerlukan server. Vercel juga menyediakan layanan cloud berbayar opsional.
React Router (v7)
React Router adalah library routing paling populer untuk React, dan bila digunakan bersama Vite, dapat membentuk framework React full-stack. Ia menekankan Web API standar dan memiliki template deployment siap pakai untuk berbagai JavaScript runtime dan platform.
Untuk membuat framework React Router baru, gunakan perintah berikut.
npx create-react-router@latest
React Router dikelola oleh Shopify.
Expo (untuk aplikasi native)
Expo adalah framework React yang memungkinkan Anda membuat aplikasi universal untuk Android, iOS, dan web dengan UI native. Framework ini menyediakan React Native SDK yang memudahkan penggunaan bagian native. Untuk membuat proyek Expo baru, gunakan perintah berikut.
npx create-expo-app@latest
Jika Anda baru menggunakan Expo, lihat tutorial Expo.
Expo dikelola oleh Expo (the company). Membangun aplikasi dengan Expo gratis, dan Anda dapat mengirimkannya ke Google atau Apple Store tanpa batasan. Expo juga menyediakan layanan cloud berbayar opsional.
Framework lain
Ada framework baru lain yang sedang bergerak menuju visi React full-stack.
- TanStack Start (Beta): TanStack Start adalah framework React full-stack yang dibangun di atas TanStack Router. Framework ini menyediakan SSR dokumen penuh, streaming, server functions, bundling, dan banyak alat berguna lainnya, seperti Nitro atau Vite.
- RedwoodJS: Redwood adalah framework React full-stack dengan paket dan konfigurasi bawaan agar Anda dapat membuat aplikasi web full-stack dengan mudah.
Fitur apa saja yang membentuk visi arsitektur full-stack dari tim React?
Bundler App Router milik Next.js mengimplementasikan spesifikasi resmi React Server Components secara lengkap. Ini memungkinkan Anda mencampurkan komponen waktu build, komponen khusus server, dan komponen interaktif dalam satu React tree.
Misalnya, Anda dapat menulis komponen React khusus server sebagai fungsi async yang membaca database atau file. Kemudian Anda dapat meneruskan data tersebut ke komponen interaktif.
// Komponen ini berjalan *hanya* di server (atau hanya saat build).
async function Talks({ confId }) {
// 1. Jika di server, Anda dapat berbicara dengan lapisan data. API endpoint tidak diperlukan.
const talks = await db.Talks.findAll({ confId });
// 2. Meskipun logika rendering ditambahkan, ukuran bundel JavaScript tidak akan membesar secara signifikan.
const videos = talks.map(talk => talk.video);
// 3. Meneruskan data ke komponen yang akan dijalankan di browser.
return <SearchableVideoList videos={videos} />;
}
App Router milik Next.js mengintegrasikan Suspense dan pengambilan data. Ini memungkinkan Anda secara langsung menentukan status loading (misalnya skeleton placeholder) untuk antarmuka pengguna yang berbeda dalam React tree.
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
Server Components dan Suspense adalah fitur React, bukan fitur Next.js. Namun, untuk mengadopsinya di level framework diperlukan keterlibatan dan pekerjaan implementasi yang tidak sepele. Saat ini, Next.js App Router adalah implementasi yang paling lengkap. Tim React bekerja sama dengan pengembang bundler agar fitur-fitur ini dapat diimplementasikan lebih mudah di framework generasi berikutnya.
Memulai dari nol
Jika aplikasi Anda memiliki batasan yang tidak didukung dengan baik oleh framework yang ada, atau Anda lebih suka membangun framework sendiri, atau ingin mempelajari dasar-dasar aplikasi React, ada opsi lain yang bisa digunakan untuk memulai proyek React dari nol.
Memulai dari nol memberi Anda fleksibilitas lebih, tetapi Anda harus memilih alat yang akan digunakan untuk routing, data fetching, dan pola penggunaan umum lainnya. Ini mirip seperti membangun framework Anda sendiri alih-alih menggunakan framework yang sudah ada. Framework yang kami rekomendasikan memiliki solusi bawaan untuk masalah-masalah ini.
Untuk membangun solusi Anda sendiri, lihat panduan membuat aplikasi React dari nol yang membantu Anda memulai dengan build tool seperti Vite, Parcel, atau RSbuild.
6 komentar
React hanyalah library UI berbasis komponen. Menampilkan komponen di HTML saja memang mudah, tetapi untuk membuat situs web atau aplikasi dibutuhkan banyak fitur. Karena itu, framework direkomendasikan. Ini bukan hanya karena React; banyak web modern saat ini dibuat melalui web framework. Selain itu, React tidak harus selalu digunakan dengan framework berbasis React, karena juga bisa dipakai bersama berbagai web framework yang dibuat dengan bahasa lain (mis. Go, Rust, Java, dan lain-lain), sehingga pada akhirnya pilihan selalu ada di tangan pengguna.
Dalam situasi ketika tidak diketahui di bawah batasan seperti apa programmer akan menggunakan React, menurut saya dokumentasi resminya seharusnya ditulis dalam lingkungan yang sedekat mungkin dengan vanilla.
React sebenarnya bisa digunakan bersama berbagai framework web yang dibuat dengan bahasa berbeda (mis. Go, Rust, Java, dll.), tidak harus framework berbasis React. -> Sebenarnya karena alasan ini, saya merasa setidaknya untuk bagian get started di dokumentasi resmi React, akan lebih tepat jika panduannya sebisa mungkin mengarahkan penggunaan React saja tanpa dependensi lain.
Hmm... karena saya sendiri juga baru-baru ini sedang belajar React,
saat CRA dihentikan, sumber belajar yang saya punya berbasis CRA jadi saya sempat bingung harus bagaimana dan sempat melihat-lihat Next, React Router, dan sebagainya. Tapi karena mereka berbentuk dengan teknologi masing-masing yang ditambahkan, rasanya kurang begitu cocok kalau tujuannya memang belajar React.. Secara pribadi saya merasa Vite masih mendingan.
React kini secara resmi merekomendasikan untuk memulai dengan framework -> meski ini sebenarnya sudah agak terlambat dibahas, saya juga jadi bertanya-tanya apakah memang tepat sejak dokumentasi resmi React langsung mendorong pengguna untuk mulai dengan framework atau build tool tertentu.
Dalam codebase yang sudah ada, ada kalanya framework atau build tool tersebut tidak bisa digunakan, dan menambah dependensi itu sendiri juga bisa terasa membebani.
Dulu rasanya lebih nyaman ketika kita cukup menyisipkan satu tag
scriptke dalam HTML lalu langsung bisa memakai fitur library tersebut. Apa ini sudah cerita yang terlalu kuno...Saya juga agak bertanya-tanya apakah memang harus begitu.