Memulai Proyek Baru React
Jika Anda ingin membuat aplikasi baru atau situs web baru dengan menggunakan React, kami merekomendasikan Anda untuk memilih salah satu dari framework berbasis React yang populer di komunitas. Framework menyediakan fitur - fitur yang sebagian besar aplikasi dan situs web butuhkan, termasuk routing, pengambilan data, dan pembuatan halaman HTML.
Framework React Berkelas Produksi
Next.js
Next.js adalah full-stack framework React. Framework ini serbaguna dan memudahkan Anda untuk membuat aplikasi React dalam berbagai ukuran—mulai dari halaman blog statis hingga aplikasi dinamis yang kompleks. Untuk membuat proyek Next.js, jalankan perintah berikut di terminal Anda:
Jika Anda baru menggunakan Next.js, baca panduan Next.js.
Next.js dikelola oleh Vercel. Anda dapat memasang aplikasi Next.js ke semua ekosistem berbasis Node.js atau serverless hosting atau pada server Anda sendiri. Aplikasi statis Next.js dapat dipasang pada layanan hosting statis apapun.
Remix
Remix adalah full-stack framework React yang menggunakan teknologi nested routing. Framework ini membantu Anda untuk dapat memecah aplikasi Anda ke dalam bagian - bagian bersarang yang dapat memuat data secara paralel dan melakukan refresh sebagai bentuk respon dari aksi yang dilakukan oleh pengguna. Untuk membuat proyek Remix, jalankan perintah:
Jika Anda baru menggunakan Remix, lihat panduan membuat blog dengan Remix (pendek) dan panduan membuat aplikasi dengan Remix (panjang).
Remix dikelola oleh Shopify. Saat Anda membuat proyek Remix, Anda perlu untuk memilih target pemasangan Anda. Anda dapat memasang aplikasi Remix ke semua hosting Node.js atau serverless dengan menggunanakan atau menuliskan sebuah adaptor.
Gatsby
Gatsby adalah framework React untuk situs web berbasis sistem manajemen konten cepat. Ekosistem plugin yang dimiliki serta lapisan data GraphQL dari Gatsby dapat memudahkan Anda dalam melakukan integrasi konten, API, dan layanan ke dalam satu situs web. Untuk membuat proyek Gatsby baru, jalankan perintah:
Jika Anda baru menggunakan Gatsby, lihat panduan Gatsby.
Gatsby dikelola oleh Netlify. Anda dapat memasang situs statis Gatsby ke hosting statis apapun. Jika Anda memilih untuk menggunakan fitur server-only, Anda perlu memastikan jika penyedia layanan hosting mendukung hal tersebut untuk Gatsby.
Expo (untuk aplikasi native)
Expo adalah framework React yang membantu Anda untuk dapat membuat aplikasi universal untuk Android, iOS, dan web dengan menggunakan tampilan antarmuka pengguna yang asli bawaan dari platform tersebut (native). Framework ini menyediakan kit pengembangan perangkat lunak (SDK) untuk React Native yang membuat komponen native dapat digunakan dengan mudah. Untuk membuat proyek Expo baru, jalankan perintah:
Jika Anda baru menggunakan Expo, lihat panduan Expo.
Expo dikelola oleh Expo (perusahaan). Anda dapat Membuat aplikasi menggunakan Expo secara gratis, dan Anda dapat mengirimkan aplikasi Anda ke Google Play Store dan Apple App Store tanpa syarat tertentu. Sebagai tambahan, Expo juga menyediakan pilihan layanan komputasi awan (cloud) berbayar.
Deep Dive
Anda dapat menggunakan React tanpa menggunakan framework—begitupun Anda dapat menggunakan React untuk sebagian dari halaman proyek Anda. Namun, jika Anda ingin membuat aplikasi atau situs baru sepenuhnya menggunakan React, kami merekomendasikan Anda untuk menggunakan framework.
Alasannya.
Meskipun Anda tidak membutuhkan fungsi routing maupun pengambilan data di awal pembuatan proyek, suatu waktu Anda perlu menambahkan beberapa library baru untuk proyek tersebut. Semakin bertambahnya ukuran bundel JavaScript karena bertambahnya fitur baru, Anda perlu memikirkan bagaimana cara untuk memecah kode untuk setiap route secara individu. Dengan semakin kompleksnya kebutuhan pengambilan data, Anda mungkin akan menghadapi situasi semakin banyaknya permintaan jaringan antara server dan klien yang akan membuat aplikasi Anda terasa sangat lambat. Semakin banyak pengguna Anda dengan kondisi jaringan yang buruk dan perangkat dengan spesifikasi rendah serta fitur terbatas, Anda mungkin perlu untuk dapat membuat HTML dari komponen aplikasi Anda untuk bisa menampilkan konten aplikasi secara cepat—baik di server, atau saat waktu build. Mengubah susunan sistem untuk menjalankan kode di server atau saat waktu build sangatlah rumit.
Masalah ini tidak hanya terjadi di React. Itulah mengapa Svelte memiliki SvelteKit, Vue memiliki Nuxt, dan lain sebagainya. Untuk menyelesaikan masalah ini, Anda perlu untuk mengintegrasikan bundler Anda dengan router Anda dan dengan library pengambilan data Anda. Membuat pengaturan awal dapat bekerja bukanlah hal yang sulit, namun terdapat banyak seluk-beluk yang terlibat dalam pembuatan suatu aplikasi yang dapat memuat dengan cepat meskipun terus berkembang dari waktu ke waktu. Anda mungkin ingin mengirimkan kode aplikasi dalam jumlah seminimal mungkin namun dapat melakukannya dalam sekali jalan antara klien dan server pulang pergi, yang juga secara paralel dengan data apapun yang dibutuhkan untuk halaman tersebut. Anda mungkin ingin membuat halaman menjadi interaktif bahkan sebelum kode JavaScript dijalankan, untuk dapat mendukung peningkatan progresif. Anda mungkin ingin membuat sebuah folder dengan semua berkas HTML statis untuk halaman marketing Anda yang dapat dipasang dimanapun dan dapat bekerja meskipun tanpa JavaScript. Membangun aplikasi dengan kemampuan seperti ini membutuhkan kerja keras dari Anda untuk mewujudkannya.
Secara umum, framework React pada halaman ini dapat menyelesaikan masalah yang disebutkan sebelumnya, tanpa perlu usaha tambahan dari Anda. React membantu Anda untuk dapat mulai membuat proyek dengan sangat ringkas dan kemudian mengembangkan aplikasi Anda sesuai kebutuhan Anda. Setiap framework React memiliki komunitas yang aktif, sehingga Anda akan dengan mudah untuk menemukan jawaban atas pertanyaan serta informasi terkait peningkatan peralatan Anda. Framework juga membantu Anda dalam menstrukturkan kode, membantu Anda dan orang lain untuk memahami konteks dan keterampilan di antara berbagai proyek. Sebaliknya dengan menggunakan pengaturan sendiri, Anda akan mudah terjebak pada versi dependensi yang sudah tidak didukung, dan pada akhirnya Anda akan membuat framework Anda sendiri tanpa komunitas dan rencana peningkataan untuk membantu framework tersebut terus berkembang (mungkin_framework_ tersebut pun mirip seperti yang pernah kita buat di masa lalu, dengan desain yang lebih asal-asalan).
Jika Anda masih belum yakin, atau aplikasi Anda memiliki kendala tidak umum yang tidak dapat dilayani dengan baik oleh framework ini dan Anda ingin membuat pengaturan sendiri, kami tidak dapat menghentikan Anda—coba saja! Gunakan react dan react-dom dari npm, siapkan bundler proses build kostum Anda seperti Vite atau Parcel, dan peralatan lainnya sesuai kebutuhan Anda untuk routing, pembuatan halaman statis atau server-side rendering, dan lainnya.
Framework React terbaru
Selama kami melakukan eksplorasi untuk meningkatkan kemampuan dan kualitas React, kami menyadari bahwa dengan mengintegrasikan React lebih dekat dengan berbagai macam framework (khususnya dengan teknologi routing, bundling, dan server), hal tersebut merupakan kesempatan terbesar kami untuk membantu pengguna React untuk dapat membuat aplikasi yang lebih baik. Tim Next.js setuju untuk berkolaborasi dengan kami dalam riset, pengembangan, integrasi, serta pengujian fitur-fitur React terkini seperti React Server Components.
Setiap hari, fitur-fitur ini semakin dekat untuk menjadi teknologi yang siap digunakan di tingkat production, dan kami telah berbicara dengan pengembang bundler dan framework lainnya untuk dapat mengintergrasikan hal tersebut. Kami berharap bahwa dalam satu atau dua tahun, seluruh framework yang terdaftar pada halaman ini akan mendapatkan dukungan penuh dari fitur - fitur ini. (Jika Anda adalah pencipta framework dan tertarik untuk berkerja sama dengan kami untuk bereksperimen dengan fitur - fitur ini, mohon untuk menghubungi kami!)
Router Aplikasi Next.js
Router Aplikasi Next.js adalah sebuah desain baru dari Next.js API yang bertujuan untuk memenuhi visi tim React mengenai arsitektur aplikasi full-stack. Hal ini dapat membantu Anda untuk mengambil data pada komponen asinkron yang berjalan pada server atau saat waktu build.
Next.js dikelola oleh Vercel. Anda dapat memasang aplikasi Next.js ke semua ekosistem berbasis Node.js atau serverless hosting atau pada server Anda sendiri. Next.js juga mendukung ekspor halaman statis yang tidak membutuhkan server.
Deep Dive
Router aplikasi Next.js sepenuhnya mengimplementasi spesifikasi React Server Components. Hal ini memungkinkan Anda untuk dapat menggabungkan waktu build, server-only, dan komponen interaktif ke dalam satu pohon React.
Sebagai contoh, Anda dapat menulis komponen server-only React sebagai sebuah fungsi async yang dapat membaca data dari database atau sebuah berkas. Kemudian Anda dapat mengirimkan data tersebut ke komponen interaktif Anda:
// Komponen ini *hanya* berjalan di server (atau pada saat waktu build).
async function Talks({ confId }) {
// 1. Anda berada di server, Anda dapat berkomunikasi dengan lapisan data Anda. endpoint API tidak dibutuhkan.
const talks = await db.Talks.findAll({ confId });
// 2. Tambahkan beberapa logika rendering. Hal ini tidak akan membuat bundel JavaScript Anda lebih besar.
const videos = talks.map(talk => talk.video);
// 3. Kirimkan data ke komponen yang akan berjalan di peramban.
return <SearchableVideoList videos={videos} />;
}Router aplikasi Next.js juga mengintegrasikan pengambilan data dengan Suspense. Hal ini memungkinkan Anda untuk menentukan status pemuatan (seperti kerangka placeholder) untuk berbagai komponen dari tampilan antar muka Anda langsung dari pohon React Anda:
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>Server Components dan Suspense merupakan fitur dari React dan bukanlan fitur Next.js. Namun, menggunakannya pada tingkatan framework membutuhkan implementasi yang serius dan bukanlah sebuah percobaan. Saat ini, Router aplikasi Next.js merupakan implementasi yang paling lengkap dari hal tersebut. Tim React saat ini sedang bekerja sama dengan pengembang bundler untuk membuat fitur ini dapat diimplementasikan pada framework generasi berikutnya.