From 6a00e4fcc2d139e7688f5b67a4308171355beeaf Mon Sep 17 00:00:00 2001 From: Mitha Date: Wed, 30 Oct 2019 09:57:18 +0700 Subject: [PATCH 1/5] 60% done --- content/docs/codebase-overview.md | 121 +++++++++++++++--------------- 1 file changed, 61 insertions(+), 60 deletions(-) diff --git a/content/docs/codebase-overview.md b/content/docs/codebase-overview.md index 091aff3aa..2e0a4b384 100644 --- a/content/docs/codebase-overview.md +++ b/content/docs/codebase-overview.md @@ -1,6 +1,6 @@ --- id: codebase-overview -title: Codebase Overview +title: Gambaran Basis Kode layout: contributing permalink: docs/codebase-overview.html prev: how-to-contribute.html @@ -9,29 +9,29 @@ redirect_from: - "contributing/codebase-overview.html" --- -This section will give you an overview of the React codebase organization, its conventions, and the implementation. +Bagian ini akan memberikan Anda gambaran mengenai penyusunan basis kode React, konvensi, serta implementasinya. -If you want to [contribute to React](/docs/how-to-contribute.html) we hope that this guide will help you feel more comfortable making changes. +Jika Anda ingin [berkontribusi pada React](/docs/how-to-contribute.html) kami berharap panduan ini akan membantu Anda merasa lebih nyaman dalam membuat perubahan. -We don't necessarily recommend any of these conventions in React apps. Many of them exist for historical reasons and might change with time. +Kami tidak selalu merekomendasikan konvensi ini pada aplikasi React. Banyak di antaranya ada karena alasan historis dan mungkin berubah seiring berjalannya waktu. -### External Dependencies {#external-dependencies} +### _Dependency_ Eksternal {#external-dependencies} -React has almost no external dependencies. Usually, a `require()` points to a file in React's own codebase. However, there are a few relatively rare exceptions. +React hampir tidak memiliki _dependency_ eksternal. Biasanya, `require()` mengacu pada sebuah _file_ pada basis kode React sendiri. Bagaimanapun, ada sedikit pengecualian yang relatif langka. -The [fbjs repository](https://github.com/facebook/fbjs) exists because React shares some small utilities with libraries like [Relay](https://github.com/facebook/relay), and we keep them in sync. We don't depend on equivalent small modules in the Node ecosystem because we want Facebook engineers to be able to make changes to them whenever necessary. None of the utilities inside fbjs are considered to be public API, and they are only intended for use by Facebook projects such as React. +[Repositori fbjs](https://github.com/facebook/fbjs) ada karena React berbagi beberapa utilitas dengan _library_ seperti [Relay](https://github.com/facebook/relay), dan kami menjaga mereka tetap sinkron. Kami tidak bergantung pada modul-modul kecil yang ekuivalen pada ekosistem Node karena kami ingin _engineer_ Facebook dapat mengubahnya kapanpun dibutuhkan. Tidak ada satupun utilitas dalam fbjs yang dianggap sebagai API publik, dan hanya ditujukan untuk penggunaan oleh proyek Facebook seperti React. -### Top-Level Folders {#top-level-folders} +### Folder Teratas {#top-level-folders} -After cloning the [React repository](https://github.com/facebook/react), you will see a few top-level folders in it: +Setelah melakukan kloning pada [repositori React](https://github.com/facebook/react), Anda akan melihat beberapa folder teratas di dalamnya: -* [`packages`](https://github.com/facebook/react/tree/master/packages) contains metadata (such as `package.json`) and the source code (`src` subdirectory) for all packages in the React repository. **If your change is related to the code, the `src` subdirectory of each package is where you'll spend most of your time.** -* [`fixtures`](https://github.com/facebook/react/tree/master/fixtures) contains a few small React test applications for contributors. -* `build` is the build output of React. It is not in the repository but it will appear in your React clone after you [build it](/docs/how-to-contribute.html#development-workflow) for the first time. +* [`packages`](https://github.com/facebook/react/tree/master/packages) berisi metadata (seperti `package.json`) dan kode sumber (`src` subdirektori) untuk semua _package_ pada repositori React. **Jika perubahan Anda berkaitan dengan kode, subdirektori `src` dari setiap _package_ adalah dimana Anda akan menghabiskan sebagian besar waktu Anda.** +* [`fixtures`](https://github.com/facebook/react/tree/master/fixtures) berisi beberapa aplikasi uji coba React untuk para kontributor. +* `build` adalah _output build_ dari React. Ia tidak ada pada repositori tetapi akan muncul pada hasil klon React Anda setelah Anda [melakukan _build_](/docs/how-to-contribute.html#development-workflow) untuk pertama kali. -The documentation is hosted [in a separate repository from React](https://github.com/reactjs/reactjs.org). +Dokumentasi berada pada [repositori terpisah dari React](https://github.com/reactjs/reactjs.org). -There are a few other top-level folders but they are mostly used for the tooling and you likely won't ever encounter them when contributing. +Ada beberapa folder teratas lainnya tetapi mereka sebagian besar digunakan untuk peralatan dan kemungkinan besar Anda tidak akan pernah menghadapi mereka ketika berkontribusi. ### Colocated Tests {#colocated-tests} @@ -39,24 +39,23 @@ We don't have a top-level directory for unit tests. Instead, we put them into a For example, a test for [`setInnerHTML.js`](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/dom/client/utils/setInnerHTML.js) is located in [`__tests__/setInnerHTML-test.js`](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/dom/client/utils/__tests__/setInnerHTML-test.js) right next to it. -### Warnings and Invariants {#warnings-and-invariants} +### Peringatan dan _Invariant_ {#warnings-and-invariants} -The React codebase uses the `warning` module to display warnings: +Basis kode React menggunakan modul `warning` untuk menampilkan peringatan: ```js var warning = require('warning'); warning( 2 + 2 === 4, - 'Math is not working today.' + 'Matematika tidak berfungsi hari ini.' ); ``` +**Peringatan ditampilkan ketika kondisi `warning` adalah `false`.** -**The warning is shown when the `warning` condition is `false`.** +Satu cara yang baik untuk mengingatnya adalah bahwa kondisi seharusnya merefleksikan keadaan yang normal daripada yang tidak. -One way to think about it is that the condition should reflect the normal situation rather than the exceptional one. - -It is a good idea to avoid spamming the console with duplicate warnings: +Ini adalah ide yang bagus untuk menghindari men-spam konsol dengan peringatan yang sama: ```js var warning = require('warning'); @@ -65,24 +64,26 @@ var didWarnAboutMath = false; if (!didWarnAboutMath) { warning( 2 + 2 === 4, - 'Math is not working today.' + 'Matematika tidak berfungsi hari ini.' ); didWarnAboutMath = true; } ``` -Warnings are only enabled in development. In production, they are completely stripped out. If you need to forbid some code path from executing, use `invariant` module instead: +Peringatan hanya diaktifkan pada mode pengembangan. Pada mode produksi, mereka dilepas seluruhnya. Jika Anda perlu melarang beberapa jalur kode untuk dijalankan, gunakan modul `invariant`: ```js var invariant = require('invariant'); invariant( 2 + 2 === 4, - 'You shall not pass!' + 'Anda tidak boleh lewat!' ); ``` -**The invariant is thrown when the `invariant` condition is `false`.** +**_Invariant_ dilontarkan ketika kondisi`invariant` adalah `false`.** + +"_Invariant_" hanya cara lain untuk mengatakan "kondisi ini selalu benar". Anda dapat m "Invariant" is just a way of saying "this condition always holds true". You can think about it as making an assertion. @@ -157,70 +158,70 @@ There are multiple injection points in the codebase. In the future, we intend to React is a [monorepo](https://danluu.com/monorepo/). Its repository contains multiple separate packages so that their changes can be coordinated together, and issues live in one place. -### React Core {#react-core} +### Inti React {#react-core} -The "core" of React includes all the [top-level `React` APIs](/docs/top-level-api.html#react), for example: +Inti dari React berisi semua [API level atas `React`](/docs/top-level-api.html#react), misalnya: * `React.createElement()` * `React.Component` * `React.Children` -**React core only includes the APIs necessary to define components.** It does not include the [reconciliation](/docs/reconciliation.html) algorithm or any platform-specific code. It is used both by React DOM and React Native components. +**Inti React hanya berisi API yang dibutuhkan untuk mendefinisikan komponen.** Ia tidak termasuk algoritma [_reconciliation_](/docs/reconciliation.html) atau kode spesifik platform lainnya. Ia digunakan oleh React DOM dan komponen React Native. -The code for React core is located in [`packages/react`](https://github.com/facebook/react/tree/master/packages/react) in the source tree. It is available on npm as the [`react`](https://www.npmjs.com/package/react) package. The corresponding standalone browser build is called `react.js`, and it exports a global called `React`. +Kode untuk inti React terletak di [`packages/react`](https://github.com/facebook/react/tree/master/packages/react) pada diagram sumber. Ia tersedia pada npm sebagai _package_ [`react`](https://www.npmjs.com/package/react). _Build browser_ yang berdiri sendiri disebut `react.js`, dan ia mengekspor sebuah global yang disebut `React`. -### Renderers {#renderers} +### _Renderer_ {#renderers} -React was originally created for the DOM but it was later adapted to also support native platforms with [React Native](https://facebook.github.io/react-native/). This introduced the concept of "renderers" to React internals. +React mulanya dibuat demi DOM tetapi kemudian diadaptasi untuk mendukung platform _native_ dengan [React Native](https://facebook.github.io/react-native/). Hal ini memperkenalkan konsep _renderer_ pada tim internal React. -**Renderers manage how a React tree turns into the underlying platform calls.** +**_Renderer_ mengatur bagaimana sebuah diagram React berubah menjadi panggilan platform yang mendasarinya** -Renderers are also located in [`packages/`](https://github.com/facebook/react/tree/master/packages/): +_Renderer_ juga terletak pada [`packages/`](https://github.com/facebook/react/tree/master/packages/): -* [React DOM Renderer](https://github.com/facebook/react/tree/master/packages/react-dom) renders React components to the DOM. It implements [top-level `ReactDOM` APIs](/docs/react-dom.html) and is available as [`react-dom`](https://www.npmjs.com/package/react-dom) npm package. It can also be used as standalone browser bundle called `react-dom.js` that exports a `ReactDOM` global. -* [React Native Renderer](https://github.com/facebook/react/tree/master/packages/react-native-renderer) renders React components to native views. It is used internally by React Native. -* [React Test Renderer](https://github.com/facebook/react/tree/master/packages/react-test-renderer) renders React components to JSON trees. It is used by the [Snapshot Testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) feature of [Jest](https://facebook.github.io/jest) and is available as [react-test-renderer](https://www.npmjs.com/package/react-test-renderer) npm package. +* [_Renderer_ React DOM](https://github.com/facebook/react/tree/master/packages/react-dom) merender komponen React menuju DOM. Ia mengimplementasi [API `ReactDOM` level atas](/docs/react-dom.html) dan tersedia sebagai _package_ npm [`react-dom`](https://www.npmjs.com/package/react-dom). Ia juga bisa digunakan sebagai bundel _browser_ yang berdiri sendiri yang dikenal `react-dom.js` yang mengekspor sebuah global `ReactDOM`. +* [_Renderer_ React Native](https://github.com/facebook/react/tree/master/packages/react-native-renderer) merender komponen React menuju tampilan _native_. Ia digunakan secara internal oleh React Native. +* [_Renderer_ React Test](https://github.com/facebook/react/tree/master/packages/react-test-renderer) merender komponen React menuju diagram JSON. Ia digunakan oleh fitur [Snapshot Testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) dari [Jest](https://facebook.github.io/jest) dan tersedia sebagai _package_ npm [react-test-renderer](https://www.npmjs.com/package/react-test-renderer). -The only other officially supported renderer is [`react-art`](https://github.com/facebook/react/tree/master/packages/react-art). It used to be in a separate [GitHub repository](https://github.com/reactjs/react-art) but we moved it into the main source tree for now. +Satu-satunya _Renderer_ lain yang didukung secara resmi adalah [`react-art`](https://github.com/facebook/react/tree/master/packages/react-art). Ia dulu terletak pada [repositori GitHub](https://github.com/reactjs/react-art) terpisah tetapi kami memindahkannya pada diagram sumber _main_ sekarang. ->**Note:** +>**Catatan:** > ->Technically the [`react-native-renderer`](https://github.com/facebook/react/tree/master/packages/react-native-renderer) is a very thin layer that teaches React to interact with React Native implementation. The real platform-specific code managing the native views lives in the [React Native repository](https://github.com/facebook/react-native) together with its components. +>Secara teknis [`react-native-renderer`](https://github.com/facebook/react/tree/master/packages/react-native-renderer) adalah sebuah lapisan yang sangat tipis yang mengajarkan React untuk berinteraksi dengan implementasi React Native. Kode spesifik platform yang sesungguhnya mengatur tampilan _native_ yang hidup di dalam [repositori React Native](https://github.com/facebook/react-native) bersama dengan komponennya. -### Reconcilers {#reconcilers} +### _Reconciler_ {#reconcilers} -Even vastly different renderers like React DOM and React Native need to share a lot of logic. In particular, the [reconciliation](/docs/reconciliation.html) algorithm should be as similar as possible so that declarative rendering, custom components, state, lifecycle methods, and refs work consistently across platforms. +Bahkan _renderer_ yang sangat berbeda seperti React DOM dan React Native perlu berbagi banyak logika. Khususnya, algoritma [_reconciliation_](/docs/reconciliation.html) harus semirip mungkin agar proses render deklaratif, komponen kustom, _state_, metode _lifecycle_, dan _refs_ bekerja secara konsisten antar platform. -To solve this, different renderers share some code between them. We call this part of React a "reconciler". When an update such as `setState()` is scheduled, the reconciler calls `render()` on components in the tree and mounts, updates, or unmounts them. +Untuk menyelesaikan hal ini, _renderer_ berbeda berbagi beberapa kode di antara mereka. Kami menyebut bagian React ini sebuah "_reconciler_". Ketika sebuah pembaruan seperti `setState()` dijadwalkan, _reconciler_ memanggil `render()` pada komponen di diagram, dan memasang, membarui, atau melepas mereka. -Reconcilers are not packaged separately because they currently have no public API. Instead, they are exclusively used by renderers such as React DOM and React Native. +_Reconciler_ tidak dipaketkan terpisah karena saat ini mereka tidak memiliki API publik. Sebagai gantinya, mereka digunakan secara eksklusif oleh _renderer_ seperti React DOM dan React Native. -### Stack Reconciler {#stack-reconciler} +### _Reconciler Stack_ {#stack-reconciler} -The "stack" reconciler is the implementation powering React 15 and earlier. We have since stopped using it, but it is documented in detail in the [next section](/docs/implementation-notes.html). +_Reconciler "stack"_ adalah implementasi yang menggerakan React 15 dan versi sebelumnya. Kami telah berhenti menggunakannya, tapi ia didokumentasikan dengan detil di [bagian berikutnya](/docs/implementation-notes.html) -### Fiber Reconciler {#fiber-reconciler} +### _Reconciler_ Fiber {#fiber-reconciler} -The "fiber" reconciler is a new effort aiming to resolve the problems inherent in the stack reconciler and fix a few long-standing issues. It has been the default reconciler since React 16. +_Reconciler_ "fiber" adalah usaha baru untuk menyelesaikan masalah yang melekat pada _reconciler stack_ dan memperbaiki beberapa isu yang telah lama ada. Ia telah menjadi _reconciler default_ sejak React 16. -Its main goals are: +Tujuan utamanya adalah: -* Ability to split interruptible work in chunks. -* Ability to prioritize, rebase and reuse work in progress. -* Ability to yield back and forth between parents and children to support layout in React. -* Ability to return multiple elements from `render()`. -* Better support for error boundaries. +* Kemampuan untuk membagi tugas yang dapat diinterupsi menjadi potongan kecil. +* Kemampuan untuk memprioritaskan, _rebase_ dan menggunakan kembali tugas yang sedang berjalan. +* Kemampuan untuk bolak-balik antara _parent_ dan _children_ untuk mendukung layout pada React. +* Kemampuan untuk mengembalikan beberapa elemen dari `render()`. +* Dukungan yang lebih baik untuk batasan eror. -You can read more about React Fiber Architecture [here](https://github.com/acdlite/react-fiber-architecture) and [here](https://blog.ag-grid.com/inside-fiber-an-in-depth-overview-of-the-new-reconciliation-algorithm-in-react). While it has shipped with React 16, the async features are not enabled by default yet. +Anda dapat membaca lebih banyak mengenai Arsitektur React Fiber [di sini](https://github.com/acdlite/react-fiber-architecture) dan [di sini](https://blog.ag-grid.com/inside-fiber-an-in-depth-overview-of-the-new-reconciliation-algorithm-in-react). Walaupun ia telah dikirimkan bersama dengan React 16, fitur-fitur _async_ belum diaktifkan secara _default_. -Its source code is located in [`packages/react-reconciler`](https://github.com/facebook/react/tree/master/packages/react-reconciler). +Kode sumbernya terletak di [`packages/react-reconciler`](https://github.com/facebook/react/tree/master/packages/react-reconciler). -### Event System {#event-system} +### Sistem _Event_ {#event-system} -React implements a synthetic event system which is agnostic of the renderers and works both with React DOM and React Native. Its source code is located in [`packages/react-events`](https://github.com/facebook/react/tree/master/packages/react-events). +React menerapkan sebuah sistem _event_ sintetis yang agnostik terhadap _renderer_-nya dan bekerja dengan React DOM dan React Native. Kode sumbernya terletak di [`packages/react-events`](https://github.com/facebook/react/tree/master/packages/react-events). -There is a [video with a deep code dive into it](https://www.youtube.com/watch?v=dRo_egw7tBc) (66 mins). +Terdapat sebuah [video dengan pembahasan mendalam mengenai kodenya](https://www.youtube.com/watch?v=dRo_egw7tBc) (66 menit). -### What Next? {#what-next} +### Selanjutnya Apa? {#what-next} -Read the [next section](/docs/implementation-notes.html) to learn about the pre-React 16 implementation of reconciler in more detail. We haven't documented the internals of the new reconciler yet. +Bacalah [bagian berikutnya](/docs/implementation-notes.html) untuk mempelajari mengenai implementasi _reconciler_ sebelum React 16 secara lebih detil. Kami belum mendokumentasikan bagian internal dari _reconciler_ yang baru. From b33836e66ce8f3c4e020e7fab9baa5d9c35c1c9b Mon Sep 17 00:00:00 2001 From: Mitha Date: Wed, 30 Oct 2019 10:39:07 +0700 Subject: [PATCH 2/5] 100% done --- content/docs/codebase-overview.md | 52 +++++++++++++++---------------- 1 file changed, 25 insertions(+), 27 deletions(-) diff --git a/content/docs/codebase-overview.md b/content/docs/codebase-overview.md index 2e0a4b384..d7833e9e6 100644 --- a/content/docs/codebase-overview.md +++ b/content/docs/codebase-overview.md @@ -21,7 +21,7 @@ React hampir tidak memiliki _dependency_ eksternal. Biasanya, `require()` mengac [Repositori fbjs](https://github.com/facebook/fbjs) ada karena React berbagi beberapa utilitas dengan _library_ seperti [Relay](https://github.com/facebook/relay), dan kami menjaga mereka tetap sinkron. Kami tidak bergantung pada modul-modul kecil yang ekuivalen pada ekosistem Node karena kami ingin _engineer_ Facebook dapat mengubahnya kapanpun dibutuhkan. Tidak ada satupun utilitas dalam fbjs yang dianggap sebagai API publik, dan hanya ditujukan untuk penggunaan oleh proyek Facebook seperti React. -### Folder Teratas {#top-level-folders} +### Folder Level Atas {#top-level-folders} Setelah melakukan kloning pada [repositori React](https://github.com/facebook/react), Anda akan melihat beberapa folder teratas di dalamnya: @@ -33,11 +33,11 @@ Dokumentasi berada pada [repositori terpisah dari React](https://github.com/reac Ada beberapa folder teratas lainnya tetapi mereka sebagian besar digunakan untuk peralatan dan kemungkinan besar Anda tidak akan pernah menghadapi mereka ketika berkontribusi. -### Colocated Tests {#colocated-tests} +### Tes Kolokasi {#colocated-tests} -We don't have a top-level directory for unit tests. Instead, we put them into a directory called `__tests__` relative to the files that they test. +Kami tidak memiliki direktori level atas untuk tes unit. Sebagai gantinya, kami meletakkannya pada direktori bernama `__tests__`, relatif pada _file_ yang ditesnya. -For example, a test for [`setInnerHTML.js`](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/dom/client/utils/setInnerHTML.js) is located in [`__tests__/setInnerHTML-test.js`](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/dom/client/utils/__tests__/setInnerHTML-test.js) right next to it. +Misalnya, tes untuk [`setInnerHTML.js`](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/dom/client/utils/setInnerHTML.js) terletak tepat di sampingnya pada [`__tests__/setInnerHTML-test.js`](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/dom/client/utils/__tests__/setInnerHTML-test.js). ### Peringatan dan _Invariant_ {#warnings-and-invariants} @@ -83,31 +83,29 @@ invariant( **_Invariant_ dilontarkan ketika kondisi`invariant` adalah `false`.** -"_Invariant_" hanya cara lain untuk mengatakan "kondisi ini selalu benar". Anda dapat m +"_Invariant_" hanya cara lain untuk mengatakan "kondisi ini selalu benar". Anda dapat menganggapnya sebagai membuat _assertion_. -"Invariant" is just a way of saying "this condition always holds true". You can think about it as making an assertion. +Merupakan hal yang penting untuk menjaga perilaku versi pengembangan dan produksi tetap serupa, sehingga `invariant` dilontarkan baik di mode pengembangan dan produksi. Pesan eror secara otomatis diganti dengan kode eror pada mode produksi untuk menghindari mempengaruhi ukuran byte secara negatif. -It is important to keep development and production behavior similar, so `invariant` throws both in development and in production. The error messages are automatically replaced with error codes in production to avoid negatively affecting the byte size. +### Pengembangan dan Produksi {#development-and-production} -### Development and Production {#development-and-production} +Anda dapat menggunakan variabel pseudo-global `__DEV__` pada basis kode untuk menjaga blok kode yang ditujukan hanya pada mode pengembangan. -You can use `__DEV__` pseudo-global variable in the codebase to guard development-only blocks of code. +Ia di-_inline_ pada tahap kompilasi, dan berubah menjadi pengecekan `process.env.NODE_ENV !== 'production'` pada _build_ CommonJS. -It is inlined during the compile step, and turns into `process.env.NODE_ENV !== 'production'` checks in the CommonJS builds. - -For standalone builds, it becomes `true` in the unminified build, and gets completely stripped out with the `if` blocks it guards in the minified build. +Untuk _build_ yang berdiri sendiri, ia menjadi `true` pada _build_ yang tidak di -_minify_, dan dilepas seluruhnya dengan menggunakan blok `if` yang ia jaga pada _build_ yang di-_minify_. ```js if (__DEV__) { - // This code will only run in development. + // Kode ini hanya akan berjalan di mode. } ``` ### Flow {#flow} -We recently started introducing [Flow](https://flow.org/) checks to the codebase. Files marked with the `@flow` annotation in the license header comment are being typechecked. +Kami baru saja mulai memperkenalkan pengecekan [Flow](https://flow.org/) pada basis kode. _File_ yang ditandai dengan anotasi `@flow` pada komentar lisensi _header_ mengalami pengecekan tipe. -We accept pull requests [adding Flow annotations to existing code](https://github.com/facebook/react/pull/7600/files). Flow annotations look like this: +Kami menerima _pull request_ [menambahkan anotasi Flow pada kode yang sudah ada](https://github.com/facebook/react/pull/7600/files). Anotasi Flow terlihat seperti ini: ```js ReactRef.detachRefs = function( @@ -118,20 +116,20 @@ ReactRef.detachRefs = function( } ``` -When possible, new code should use Flow annotations. -You can run `yarn flow` locally to check your code with Flow. +Bila mungkin, kode baru harus menggunakan anotasi Flow. +Anda dapat menjalankan `yarn flow` secara lokal untuk mengecek kode Anda menggunakan Flow. -### Dynamic Injection {#dynamic-injection} +### Injeksi Dinamis {#dynamic-injection} -React uses dynamic injection in some modules. While it is always explicit, it is still unfortunate because it hinders understanding of the code. The main reason it exists is because React originally only supported DOM as a target. React Native started as a React fork. We had to add dynamic injection to let React Native override some behaviors. +React menggunakan injeksi dinamis pada sebagian modul. Walaupun selalu eksplisit, hal tersebut masih disayangkan karena menghalangi pemahaman terhadap kode. Alasan utama ia adalah karena React mulanya hanya mendukung DOM sebagai target. React Native dimulai sebagai _fork_ dari React. Kami perlu menambahkan injeksi dinamis agar React Native dapat melakukan _override_ pada beberapa perilaku. -You may see modules declaring their dynamic dependencies like this: +Anda mungkin melihat modul yang mendeklarasikan _dependency_ dinamis seperti ini: ```js -// Dynamically injected +// Diinjeksi secara dinamis var textComponentClass = null; -// Relies on dynamically injected value +// Bergantung pada nilai yang diinjeksi secara dinamis function createInstanceForText(text) { return new textComponentClass(text); } @@ -139,7 +137,7 @@ function createInstanceForText(text) { var ReactHostComponent = { createInstanceForText, - // Provides an opportunity for dynamic injection + // Menyediakan kesempatan untuk injeksi dinamis injection: { injectTextComponentClass: function(componentClass) { textComponentClass = componentClass; @@ -150,13 +148,13 @@ var ReactHostComponent = { module.exports = ReactHostComponent; ``` -The `injection` field is not handled specially in any way. But by convention, it means that this module wants to have some (presumably platform-specific) dependencies injected into it at runtime. +_Field_ `injection` tidak ditangani secara khusus dengan cara apapun. Tapi menurut konvensi, modul ini perlu beberapa _dependency_ (agaknya spesifik pada platform tertentu) yang diinjeksi pada saat sedang berjalan (_runtime_). -There are multiple injection points in the codebase. In the future, we intend to get rid of the dynamic injection mechanism and wire up all the pieces statically during the build. +Terdapat beberapa poin untuk injeksi pada basis kode. Di waktu yang akan datang, kami berniat untuk menghilangkan mekanisme injeksi dinamis dan menghubungkan semua bagian secara statis selama proses _build_. -### Multiple Packages {#multiple-packages} +### _Multiple Package_ {#multiple-packages} -React is a [monorepo](https://danluu.com/monorepo/). Its repository contains multiple separate packages so that their changes can be coordinated together, and issues live in one place. +React adalah sebuah [monorepo](https://danluu.com/monorepo/). Repositorinya berisi banyak _package_ terpisah sehingga perubahan mereka dapat dikoordinasikan bersama, dan isu-isu berada pada satu tempat. ### Inti React {#react-core} From 9921ac7c2680549d4f219d6e66282ef5418c2ec2 Mon Sep 17 00:00:00 2001 From: Paramitha Date: Mon, 11 Nov 2019 20:59:32 +0700 Subject: [PATCH 3/5] Update content/docs/codebase-overview.md Co-Authored-By: Resi Respati --- content/docs/codebase-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/codebase-overview.md b/content/docs/codebase-overview.md index d7833e9e6..a9205a506 100644 --- a/content/docs/codebase-overview.md +++ b/content/docs/codebase-overview.md @@ -91,7 +91,7 @@ Merupakan hal yang penting untuk menjaga perilaku versi pengembangan dan produks Anda dapat menggunakan variabel pseudo-global `__DEV__` pada basis kode untuk menjaga blok kode yang ditujukan hanya pada mode pengembangan. -Ia di-_inline_ pada tahap kompilasi, dan berubah menjadi pengecekan `process.env.NODE_ENV !== 'production'` pada _build_ CommonJS. +Variabel ini di-_inline_ pada tahap kompilasi, dan berubah menjadi pengecekan `process.env.NODE_ENV !== 'production'` pada _build_ CommonJS. Untuk _build_ yang berdiri sendiri, ia menjadi `true` pada _build_ yang tidak di -_minify_, dan dilepas seluruhnya dengan menggunakan blok `if` yang ia jaga pada _build_ yang di-_minify_. From cd45243c1b91bc3f756ebf0ed7a64db6e2549560 Mon Sep 17 00:00:00 2001 From: Paramitha Date: Mon, 11 Nov 2019 20:59:41 +0700 Subject: [PATCH 4/5] Update content/docs/codebase-overview.md Co-Authored-By: Resi Respati --- content/docs/codebase-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/codebase-overview.md b/content/docs/codebase-overview.md index a9205a506..61448aa08 100644 --- a/content/docs/codebase-overview.md +++ b/content/docs/codebase-overview.md @@ -97,7 +97,7 @@ Untuk _build_ yang berdiri sendiri, ia menjadi `true` pada _build_ yang tidak di ```js if (__DEV__) { - // Kode ini hanya akan berjalan di mode. + // Kode ini hanya akan berjalan di mode pengembangan. } ``` From a6d3af30ba5b7f0ae7cf8f8b1fafe3c73cd48952 Mon Sep 17 00:00:00 2001 From: Paramitha Date: Mon, 11 Nov 2019 21:00:43 +0700 Subject: [PATCH 5/5] Update content/docs/codebase-overview.md Co-Authored-By: Resi Respati --- content/docs/codebase-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/codebase-overview.md b/content/docs/codebase-overview.md index 61448aa08..896f8c928 100644 --- a/content/docs/codebase-overview.md +++ b/content/docs/codebase-overview.md @@ -121,7 +121,7 @@ Anda dapat menjalankan `yarn flow` secara lokal untuk mengecek kode Anda menggun ### Injeksi Dinamis {#dynamic-injection} -React menggunakan injeksi dinamis pada sebagian modul. Walaupun selalu eksplisit, hal tersebut masih disayangkan karena menghalangi pemahaman terhadap kode. Alasan utama ia adalah karena React mulanya hanya mendukung DOM sebagai target. React Native dimulai sebagai _fork_ dari React. Kami perlu menambahkan injeksi dinamis agar React Native dapat melakukan _override_ pada beberapa perilaku. +React menggunakan injeksi dinamis pada sebagian modul. Walaupun selalu eksplisit, hal tersebut masih disayangkan karena menghalangi pemahaman terhadap kode. Alasan utamanya adalah karena React mulanya hanya mendukung DOM sebagai target. React Native dimulai sebagai _fork_ dari React. Kami perlu menambahkan injeksi dinamis agar React Native dapat melakukan _override_ pada beberapa perilaku. Anda mungkin melihat modul yang mendeklarasikan _dependency_ dinamis seperti ini: