From 426f2c9cd8c83e6cd174c43a3cdbaa14c4176724 Mon Sep 17 00:00:00 2001 From: Syauqy Nurul Aziz Date: Tue, 25 Apr 2023 14:18:25 +0700 Subject: [PATCH 1/2] fix(installation): translate installation page --- src/content/learn/installation.md | 41 ++++++++++++++++--------------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/src/content/learn/installation.md b/src/content/learn/installation.md index c5426ea94..b5beae9ce 100644 --- a/src/content/learn/installation.md +++ b/src/content/learn/installation.md @@ -1,57 +1,58 @@ --- -title: Installation +title: Pemasangan --- -React has been designed from the start for gradual adoption. You can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to an HTML page, or start a complex React-powered app, this section will help you get started. +React didesain sejak awal untuk dapat diapdopsi secara bertahap. Anda dapat menggunakan React sedikit atau sebanyak apapun sesuai dengan kebutuhan Anda. Baik jika Anda hanya ingin mencoba React, menambahan interaktivitas ke hamalan HTML, atau mulai mengembangkan aplikasi kompleks berbasis React, seksi ini akan membantu Anda untuk mulai menggunakan React. -* [How to start a new React project](/learn/start-a-new-react-project) -* [How to add React to an existing project](/learn/add-react-to-an-existing-project) -* [How to set up your editor](/learn/editor-setup) -* [How to install React Developer Tools](/learn/react-developer-tools) +* [Bagaimana cara untuk mulai membuat proyek React baru](/learn/start-a-new-react-project) +* [Bagaimana cara untuk menambahkan React ke dalam proyek yang ada](/learn/add-react-to-an-existing-project) +* [Bagaimana cara untuk mempersiapkan editor kode Anda](/learn/editor-setup) +* [Bagaimana cara memasang React Developer Tools](/learn/react-developer-tools) -## Try React {/*try-react*/} +## Mencoba React {/*try-react*/} -You don't need to install anything to play with React. Try editing this sandbox! +Anda tidak perlu memasang apapun untuk mulai menggunakan React. Coba ubah *sandbox* di bawah ini! ```js function Greeting({ name }) { - return

Hello, {name}

; + return

Halo, {name}

; } export default function App() { - return + return } ``` -You can edit it directly or open it in a new tab by pressing the "Fork" button in the upper right corner. +Anda dapat mengubah secara langsung atau membukanya pada tab baru dengan menekan tombol "Fork" pada pojok kanan atas komponen *sandbox*. -Most pages in the React documentation contain sandboxes like this. Outside of the React documentation, there are many online sandboxes that support React: for example, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), or [CodePen.](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb) +Sebagian besar halaman pada dokumentasi React menggunanakan komponen *sandbox* seperti ini. +Di luar dokumentasi React, terdapat banyak *sandbox* daring yang mendukung ekosistem React: contohnya seperti, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), or [CodePen.](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb) -### Try React locally {/*try-react-locally*/} +### Mencoba React di ekosistem lokal {/*try-react-locally*/} -To try React locally on your computer, [download this HTML page.](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) Open it in your editor and in your browser! +Untuk mencoba React secara lokal pada komputer Anda, [unduh halaman HTML ini.](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) Kemudian buka berkas tersebut pada editor kode dan aplikasi perambah Anda! -## Start a new React project {/*start-a-new-react-project*/} +## Mulai membuat proyek React {/*start-a-new-react-project*/} -If you want to build an app or a website fully with React, [start a new React project.](/learn/start-a-new-react-project) +Jika Anda ingin membuat sebuah aplikasi atau situs web dengan React, [mulai buat proyek React.](/learn/start-a-new-react-project) -## Add React to an existing project {/*add-react-to-an-existing-project*/} +## Menambahkan React ke proyek yang sudah ada {/*add-react-to-an-existing-project*/} -If want to try using React in your existing app or a website, [add React to an existing project.](/learn/add-react-to-an-existing-project) +Jika Anda ingin menggunakan React ke aplikasi atau situs web Anda yang sudah ada, [tambahkan React ke proyek yang sudah ada.](/learn/add-react-to-an-existing-project) -## Next steps {/*next-steps*/} +## Langkah berikutnya {/*next-steps*/} -Head to the [Quick Start](/learn) guide for a tour of the most important React concepts you will encounter every day. +Menuju ke panduan [Mulai Cepat](/learn) untuk mengikuti tur mengenai konsep paling penting dari React yang akan Anda temui setiap hari. From 0af24edf6c18591e8432c9e3fa251cf50c9bc836 Mon Sep 17 00:00:00 2001 From: Syauqy Nurul Aziz Date: Wed, 26 Apr 2023 21:31:50 +0700 Subject: [PATCH 2/2] feat(installation): add start-new-react-project translation --- .../learn/start-a-new-react-project.md | 82 +++++++++---------- 1 file changed, 40 insertions(+), 42 deletions(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 280a1378e..466b03e79 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -1,126 +1,124 @@ --- -title: Start a New React Project +title: Memulai Proyek Baru React --- -If you want to build a new app or a new website fully with React, we recommend picking one of the React-powered frameworks popular in the community. Frameworks provide features that most apps and sites eventually need, including routing, data fetching, and generating HTML. +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. -**You need to install [Node.js](https://nodejs.org/en/) for local development.** You can *also* choose to use Node.js in production, but you don't have to. Many React frameworks support export to a static HTML/CSS/JS folder. +**Anda wajib memasang [Node.js](https://nodejs.org/en/) untuk dapat melakukan pengembangan di ekosistem lokal.** Anda *juga* dapat menggunakan Node.js pada ekosistem _production_, namun Anda tidak perlu melakukannya. Karena banyak _framework_ React yang mendukung ekspor ke folder HTML/CSS/JS statis. -## Production-grade React frameworks {/*production-grade-react-frameworks*/} +## _Framework_ React Berkelas Produksi {/*production-grade-react-frameworks*/} ### Next.js {/*nextjs*/} -**[Next.js](https://nextjs.org/) is a full-stack React framework.** It's versatile and lets you create React apps of any size--from a mostly static blog to a complex dynamic application. To create a new Next.js project, run in your terminal: +**[Next.js](https://nextjs.org/) 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: npx create-next-app -If you're new to Next.js, check out the [Next.js tutorial.](https://nextjs.org/learn/foundations/about-nextjs) - -Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/deployment) to any Node.js or serverless hosting, or to your own server. [Fully static Next.js apps](https://nextjs.org/docs/advanced-features/static-html-export) can be deployed to any static hosting. +Jika Anda baru menggunakan Next.js, baca [panduan Next.js.](https://nextjs.org/learn/foundations/about-nextjs) +Next.js dikelola oleh [Vercel](https://vercel.com/). Anda dapat [memasang aplikasi Next.js](https://nextjs.org/docs/deployment) ke semua ekosistem berbasis Node.js atau _serverless hosting_ atau pada _server_ Anda sendiri. [Aplikasi statis Next.js](https://nextjs.org/docs/advanced-features/static-html-export) dapat dipasang pada layanan _hosting_ statis apapun. ### Remix {/*remix*/} -**[Remix](https://remix.run/) is a full-stack React framework with nested routing.** It lets you break your app into nested parts that can load data in parallel and refresh in response to the user actions. To create a new Remix project, run: +**[Remix](https://remix.run/) 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: npx create-remix -If you're new to Remix, check out the Remix [blog tutorial](https://remix.run/docs/en/main/tutorials/blog) (short) and [app tutorial](https://remix.run/docs/en/main/tutorials/jokes) (long). +Jika Anda baru menggunakan Remix, lihat [panduan membuat blog dengan Remix](https://remix.run/docs/en/main/tutorials/blog) (pendek) dan [panduan membuat aplikasi dengan Remix](https://remix.run/docs/en/main/tutorials/jokes) (panjang). -Remix is maintained by [Shopify](https://www.shopify.com/). When you create a Remix project, you need to [pick your deployment target](https://remix.run/docs/en/main/guides/deployment). You can deploy a Remix app to any Node.js or serverless hosting by using or writing an [adapter](https://remix.run/docs/en/main/other-api/adapter). +Remix dikelola oleh [Shopify](https://www.shopify.com/). Saat Anda membuat proyek Remix, Anda perlu untuk [memilih target pemasangan Anda](https://remix.run/docs/en/main/guides/deployment). Anda dapat memasang aplikasi Remix ke semua _hosting_ Node.js atau _serverless_ dengan menggunanakan atau menuliskan sebuah [adaptor](https://remix.run/docs/en/main/other-api/adapter). ### Gatsby {/*gatsby*/} -**[Gatsby](https://www.gatsbyjs.com/) is a React framework for fast CMS-backed websites.** Its rich plugin ecosystem and its GraphQL data layer simplify integrating content, APIs, and services into one website. To create a new Gatsby project, run: +**[Gatsby](https://www.gatsbyjs.com/) 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: npx create-gatsby -If you're new to Gatsby, check out the [Gatsby tutorial.](https://www.gatsbyjs.com/docs/tutorial/) +Jika Anda baru menggunakan Gatsby, lihat [panduan Gatsby.](https://www.gatsbyjs.com/docs/tutorial/) -Gatsby is maintained by [Netlify](https://www.netlify.com/). You can [deploy a fully static Gatsby site](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) to any static hosting. If you opt into using server-only features, make sure your hosting provider supports them for Gatsby. +Gatsby dikelola oleh [Netlify](https://www.netlify.com/). Anda dapat [memasang situs statis Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) 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 (for native apps) {/*expo*/} +### Expo (untuk aplikasi _native_) {/*expo*/} -**[Expo](https://expo.dev/) is a React framework that lets you create universal Android, iOS, and web apps with truly native UIs.** It provides an SDK for [React Native](https://reactnative.dev/) that makes the native parts easier to use. To create a new Expo project, run: +**[Expo](https://expo.dev/) 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](https://reactnative.dev/) yang membuat komponen _native_ dapat digunakan dengan mudah. Untuk membuat proyek Expo baru, jalankan perintah: npx create-expo-app -If you're new to Expo, check out the [Expo tutorial](https://docs.expo.dev/tutorial/introduction/). +Jika Anda baru menggunakan Expo, lihat [panduan Expo](https://docs.expo.dev/tutorial/introduction/). -Expo is maintained by [Expo (the company)](https://expo.dev/about). Building apps with Expo is free, and you can submit them to the Google and Apple app stores without restrictions. Expo additionally provides opt-in paid cloud services. +Expo dikelola oleh [Expo (perusahaan)](https://expo.dev/about). 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. -#### Can I use React without a framework? {/*can-i-use-react-without-a-framework*/} +#### Dapatkah saya menggunakan React tanpa menggunakan _framework_? {/*can-i-use-react-without-a-framework*/} -You can definitely use React without a framework--that's how you'd [use React for a part of your page.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **However, if you're building a new app or a site fully with React, we recommend using a framework.** +Anda dapat menggunakan React tanpa menggunakan _framework_--begitupun Anda dapat [menggunakan React untuk sebagian dari halaman proyek Anda.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **Namun, jika Anda ingin membuat aplikasi atau situs baru sepenuhnya menggunakan React, kami merekomendasikan Anda untuk menggunakan _framework_.** -Here's why. +Alasannya. -Even if you don't need routing or data fetching at first, you'll likely want to add some libraries for them. As your JavaScript bundle grows with every new feature, you might have to figure out how to split code for every route individually. As your data fetching needs get more complex, you are likely to encounter server-client network waterfalls that make your app feel very slow. As your audience includes more users with poor network conditions and low-end devices, you might need to generate HTML from your components to display content early--either on the server, or during the build time. Changing your setup to run some of your code on the server or during the build can be very tricky. +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. -**These problems are not React-specific. This is why Svelte has SvelteKit, Vue has Nuxt, and so on.** To solve these problems on your own, you'll need to integrate your bundler with your router and with your data fetching library. It's not hard to get an initial setup working, but there are a lot of subtleties involved in making an app that loads quickly even as it grows over time. You'll want to send down the minimal amount of app code but do so in a single client–server roundtrip, in parallel with any data required for the page. You'll likely want the page to be interactive before your JavaScript code even runs, to support progressive enhancement. You may want to generate a folder of fully static HTML files for your marketing pages that can be hosted anywhere and still work with JavaScript disabled. Building these capabilities yourself takes real work. +**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. -**React frameworks on this page solve problems like these by default, with no extra work from your side.** They let you start very lean and then scale your app with your needs. Each React framework has a community, so finding answers to questions and upgrading tooling is easier. Frameworks also give structure to your code, helping you and others retain context and skills between different projects. Conversely, with a custom setup it's easier to get stuck on unsupported dependency versions, and you'll essentially end up creating your own framework—albeit one with no community or upgrade path (and if it's anything like the ones we've made in the past, more haphazardly designed). +**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). -If you're still not convinced, or your app has unusual constraints not served well by these frameworks and you'd like to roll your own custom setup, we can't stop you--go for it! Grab `react` and `react-dom` from npm, set up your custom build process with a bundler like [Vite](https://vitejs.dev/) or [Parcel](https://parceljs.org/), and add other tools as you need them for routing, static generation or server-side rendering, and more. +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](https://vitejs.dev/) atau [Parcel](https://parceljs.org/), dan peralatan lainnya sesuai kebutuhan Anda untuk _routing_, pembuatan halaman statis atau _server-side rendering_, dan lainnya. -## Bleeding-edge React frameworks {/*bleeding-edge-react-frameworks*/} - -As we've explored how to continue improving React, we realized that integrating React more closely with frameworks (specifically, with routing, bundling, and server technologies) is our biggest opportunity to help React users build better apps. The Next.js team has agreed to collaborate with us in researching, developing, integrating, and testing framework-agnostic bleeding-edge React features like [React Server Components.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) +## _Framework_ React terbaru {/*bleeding-edge-react-frameworks*/} +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.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) -These features are getting closer to being production-ready every day, and we've been in talks with other bundler and framework developers about integrating them. Our hope is that in a year or two, all frameworks listed on this page will have full support for these features. (If you're a framework author interested in partnering with us to experiment with these features, please let us know!) +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!) -### Next.js (App Router) {/*nextjs-app-router*/} +### _Router_ Aplikasi Next.js {/*nextjs-app-router*/} -**[Next.js's App Router](https://beta.nextjs.org/docs/getting-started) is a redesign of the Next.js APIs aiming to fulfill the React team’s full-stack architecture vision.** It lets you fetch data in asynchronous components that run on the server or even during the build. +**[_Router_ Aplikasi Next.js](https://beta.nextjs.org/docs/getting-started) 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 is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/deployment) to any Node.js or serverless hosting, or to your own server. Next.js also supports [static export](https://beta.nextjs.org/docs/configuring/static-export) which doesn't require a server. +Next.js dikelola oleh [Vercel](https://vercel.com/). Anda dapat [memasang aplikasi Next.js](https://nextjs.org/docs/deployment) ke semua ekosistem berbasis Node.js atau _serverless hosting_ atau pada _server_ Anda sendiri. Next.js juga mendukung [ekspor halaman statis](https://beta.nextjs.org/docs/configuring/static-export) yang tidak membutuhkan _server_. -Next.js's App Router is **currently in beta and is not yet recommended for production** (as of Mar 2023). To experiment with it in an existing Next.js project, [follow this incremental migration guide](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app). +_Router_ Aplikasi Next.js **saat ini dalam fase _beta_ dan tidak direkomendasikan untuk implementasi di tingkat _production_** (per Bulan Maret 2023). Untuk mencoba bereksperimen dengan _Router_ Aplikasi dalam proyek Next.js yang ada, [ikuti panduan migrasi bertahap ini](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app). -#### Which features make up the React team’s full-stack architecture vision? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/} +#### Fitur apa yang membentuk visi arsitektur aplikasi _full stack_ dari tim React? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/} -Next.js's App Router bundler fully implements the official [React Server Components specification](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). This lets you mix build-time, server-only, and interactive components in a single React tree. +_Router_ aplikasi Next.js sepenuhnya mengimplementasi [spesifikasi React Server Components](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). Hal ini memungkinkan Anda untuk dapat menggabungkan waktu _build_, _server-only_, dan komponen interaktif ke dalam satu pohon React. -For example, you can write a server-only React component as an `async` function that reads from a database or from a file. Then you can pass data down from it to your interactive components: +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: ```js -// This component runs *only* on the server (or during the build). +// Komponen ini *hanya* berjalan di server (atau pada saat waktu build). async function Talks({ confId }) { - // 1. You're on the server, so you can talk to your data layer. API endpoint not required. + // 1. Anda berada di server, Anda dapat berkomunikasi dengan lapisan data Anda. endpoint API tidak dibutuhkan. const talks = await db.Talks.findAll({ confId }); - // 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger. + // 2. Tambahkan beberapa logika rendering. Hal ini tidak akan membuat bundel JavaScript Anda lebih besar. const videos = talks.map(talk => talk.video); - // 3. Pass the data down to the components that will run in the browser. + // 3. Kirimkan data ke komponen yang akan berjalan di peramban. return ; } ``` -Next.js's App Router also integrates [data fetching with Suspense](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). This lets you specify a loading state (like a skeleton placeholder) for different parts of your user interface directly in your React tree: +_Router_ aplikasi Next.js juga mengintegrasikan [pengambilan data dengan _Suspense_](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). Hal ini memungkinkan Anda untuk menentukan status pemuatan (seperti kerangka _placeholder_) untuk berbagai komponen dari tampilan antar muka Anda langsung dari pohon React Anda: ```js }> @@ -128,6 +126,6 @@ Next.js's App Router also integrates [data fetching with Suspense](/blog/2022/03 ``` -Server Components and Suspense are React features rather than Next.js features. However, adopting them at the framework level requires buy-in and non-trivial implementation work. At the moment, the Next.js App Router is the most complete implementation. The React team is working with bundler developers to make these features easier to implement in the next generation of frameworks. +_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.