Membuat aplikasi React

Jika Anda ingin membuat aplikasi baru atau situs web baru dengan menggunakan React, kami merekomendasikan Anda untuk memulai dari framework.

Jika aplikasi Anda memiliki kendala yang tidak dapat diatasi dengan baik oleh framework yang ada, Anda lebih suka membangun framework Anda sendiri, atau Anda hanya ingin mempelajari dasar-dasar aplikasi React, Anda dapat membangun aplikasi React dari awal.

Framework full-stack

Framework yang direkomendasikan ini mendukung semua fitur yang Anda perlukan untuk menyebarkan dan meningkatkan skala aplikasi Anda dalam produksi. Framework ini telah mengintegrasikan fitur-fitur React terbaru dan memanfaatkan arsitektur React.

Catatan

Framework full-stack tidak memerlukan server.

Semua framework pada halaman ini mendukung rendering sisi klien (CSR), aplikasi single-page (SPA), dan static-site generation (SSG). Aplikasi ini dapat disebarkan ke CDN atau layanan hosting statis tanpa server. Selain itu, framework ini memungkinkan Anda untuk menambahkan rendering sisi server pada setiap rute, jika sesuai dengan kasus penggunaan Anda.

Hal ini memungkinkan Anda untuk memulai dengan aplikasi khusus klien, dan jika kebutuhan Anda berubah nanti, Anda dapat memilih untuk menggunakan fitur server pada rute individual tanpa menulis ulang aplikasi Anda. Lihat dokumentasi framework Anda untuk mengonfigurasi strategi rendering.

Next.js (App Router)

App Router Next.js adalah framework React yang memanfaatkan sepenuhnya arsitektur React untuk membangun aplikasi React full-stack.

Terminal

npx create-next-app@latest

Next.js dikelola oleh Vercel. Anda dapat memasang aplikasi Next.js ke penyedia hosting yang mendukung Node.js atau kontainer Docker, atau pada server Anda sendiri. Next.js juga mendukung ekspor halaman stasis yang tidak membutuhkan server.

React Router (v7)

React Router adalah pustaka routing paling populer untuk React dan dapat digabungkan dengan Vite untuk membuat framework React full-stack. Ia menekankan penggunaan API Web standar dan memiliki beberapa template siap pakai untuk berbagai macam runtime dan platform JavaScript.

Untuk membuat proyek framework React Router baru, jalankan:

Terminal

npx create-react-router@latest

React Router dikelola oleh Shopify.

Expo (untuk aplikasi native)

Expo adalah framework React yang memungkinkan Anda membangun aplikasi universal untuk Android, iOS, and web with antarmuka pengguna (UI) yang sesungguhnya native. Ia menyediakan SDK untuk React Native yang memudahkan penggunaan bagian-bagian native. Untuk membuat proyek Expo baru, jalankan:

Terminal

npx create-expo-app@latest

Jika Anda baru menggunakan Expo, bacalah tutorial Expo.

Expo dikelola oleh Expo (perusahaan). Membangun aplikasi dengan Expo gratis, dan Anda dapat men-submit aplikasi Anda ke bursa aplikasi Google and Apple tanpa hambatan. Sebagai tambahan, Expo menyediakan layanan cloud opsional yang bersifat berbayar.

Framework lain

Ada beberapa framework baru yang sedang berkembang yang berupaya mewujudkan visi React full stack kami:

TanStack Start (Beta): TanStack Start adalah framework React full-stack yang ditenagai oleh TanStack Router. Ia menyediakan SSR di keseluruhan dokumen, streaming, fungsi server, bundling, dan lebih banyak lagi menggunakan perangkat seperti Nitro dan Vite.
RedwoodJS: Redwood adalah framework React full stack dengan berbagai macam packages dan konfigurasi yang sudah terpasang secara bawaan yang memudahkan pembangunan aplikasi web full-stack.

Pendalaman

Fitur-fitur apa saja yang memenuhi visi arsitektur full-stack tim React?

Bundler App Router Next.js mengimplementasikan spesifikasi resmi Komponen Server React secara penuh. Ini memungkinkan Anda menggabungkan komponen build-time, komponen khusus server, dan komponen interaktif dalam satu pohon komponen React.

Sebagai contoh, Anda dapat membuat komponen React khusus server sebagai fungsi async yang membaca dari sebuah database atau berkas. Kemudian Anda dapat meneruskan data menuju komponen interaktif Anda:

// Komponen ini *hanya* berjalan di server (atau saat build).
async function Talks({ confId }) {
  // 1. Anda berada dalam server, jadi Anda dapat berkomunikasi dengan *data layer*. Tidak perlu *endpoint* API.
  const talks = await db.Talks.findAll({ confId });

  // 2. Tambahkan logika rendering sebanyak apapun. Tidak akan memperbesar *bundle* JavaScript Anda.
  const videos = talks.map(talk => talk.video);

  // 3. Teruskan data ke komponen yang akan berjalan di browser.
  return <SearchableVideoList videos={videos} />;
}

App Router Next.js juga mengintegrasikan pengambilan data dengan Suspense. Ini memungkinkan Anda menentukan state memuat (seperti skeleton placeholder) untuk bagian-bagian UI berbeda langsung di dalam pohon komponen React Anda:

<Suspense fallback={<TalksLoading />}>
  <Talks confId={conf.id} />
</Suspense>

Komponen Server dan Suspense adalah fitur React dan bukan fitur Next.js. Namun, mengadopsinya dalam tingat framework membutuhkan kerja keras dalam implementasi yang tidak sepele. Saat ini, the App Router Next.js memiliki implementasi yang paling lengkap. Tim React bekerja sama dengan pengembang bundler untuk membuat fitur-fitur ini lebih mudah diimplementasikan pada framework generasi berikutnya.

Memulai dari Awal

Memulai dari awal memberi Anda lebih banyak fleksibilitas, tetapi mengharuskan Anda membuat pilihan tentang alat mana yang akan digunakan untuk perutean, pengambilan data, dan pola penggunaan umum lainnya. Ini sangat mirip dengan membangun framework Anda sendiri, alih-alih menggunakan framework yang sudah ada. Framework yang kami rekomendasikan memiliki solusi bawaan untuk masalah ini.

Jika Anda ingin membangun solusi Anda sendiri, lihat panduan kami untuk membangun aplikasi React dari awal untuk petunjuk tentang cara menyiapkan proyek React baru yang dimulai dengan alat pembangunan seperti Vite, Parcel, atau RSbuild.

Jika Anda sedang membangun framework dan Anda tertarik untuk memasukkan framework Anda ke halaman ini, silakan hubungi kami.

SebelumnyaPemasangan

SelanjutnyaMembangun Aplikasi React dari Awal