From 6b5b18881993511c9c7a8b6f73a8331e66f0cec5 Mon Sep 17 00:00:00 2001 From: Muhamad Ilyas Mustafa Date: Tue, 25 Apr 2023 15:42:02 +0700 Subject: [PATCH 01/35] translate describing the ui up to describing the UI --- src/components/MDX/MDXComponents.tsx | 6 +++--- src/content/learn/describing-the-ui.md | 14 +++++++------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index ba531c9f0..42204cb55 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -113,16 +113,16 @@ function LearnMore({

- Ready to learn this topic? + Siap mempelajari topik ini?

{children} {path ? ( - Read More + Baca selengkapnya ) : null} diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 6df4c0475..07393f6d0 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -1,16 +1,16 @@ --- -title: Describing the UI +title: Menggambarkan Antarmuka Pengguna (UI) --- -React is a JavaScript library for rendering user interfaces (UI). UI is built from small units like buttons, text, and images. React lets you combine them into reusable, nestable *components.* From web sites to phone apps, everything on the screen can be broken down into components. In this chapter, you'll learn to create, customize, and conditionally display React components. +React adalah sebuah *library* JavaScript untuk merender antarmuka pengguna (UI). UI dibangun dari unit-unit kecil seperti tombol, teks, dan gambar. React memungkinkan Anda menggabungkan unit-unit tersebut menjadi suatu komponen yang *reusable* (dapat digunakan kembali), dan *nestable* (dapat ditempatkan di komponen lainnya). Dari situs web hingga aplikasi telepon, semuanya pada layar dapat dipecah menjadi komponen. Dalam bab ini, Anda akan belajar membuat, menyesuaikan, dan menampilkan komponen React secara bersyarat. -* [How to write your first React component](/learn/your-first-component) +* [Cara menulis komponen React pertama Anda](/learn/your-first-component) * [When and how to create multi-component files](/learn/importing-and-exporting-components) * [How to add markup to JavaScript with JSX](/learn/writing-markup-with-jsx) * [How to use curly braces with JSX to access JavaScript functionality from your components](/learn/javascript-in-jsx-with-curly-braces) @@ -21,9 +21,9 @@ React is a JavaScript library for rendering user interfaces (UI). UI is built fr -## Your first component {/*your-first-component*/} +## Komponen Pertama Anda {/*your-first-component*/} -React applications are built from isolated pieces of UI called *components*. A React component is a JavaScript function that you can sprinkle with markup. Components can be as small as a button, or as large as an entire page. Here is a `Gallery` component rendering three `Profile` components: +Aplikasi React dibangun dari potongan-potongan antaramuka pengguna (UI) yang terisolasi yang disebut *komponen*. Komponen React adalah sebuah fungsi JavaScript yang dapat Anda tambahkan dengan *markup*. Komponen dapat sekecil tombol atau sebesar halaman utuh. Berikut adalah contoh komponen `Gallery` yang merender tiga komponen `Profile`: @@ -40,7 +40,7 @@ function Profile() { export default function Gallery() { return (
-

Amazing scientists

+

Ilmuwan yang luar biasa

@@ -57,7 +57,7 @@ img { margin: 0 10px 10px 0; height: 90px; } -Read **[Your First Component](/learn/your-first-component)** to learn how to declare and use React components. +Baca **[Komponen Pertama Anda](/learn/your-first-component)** untuk mempelajari cara mendeklarasikan dan menggunakan komponen React. From 5a9f06e47d6be9230ad669e97f910f7f0d7b4c1c Mon Sep 17 00:00:00 2001 From: Muhamad Ilyas Mustafa Date: Tue, 25 Apr 2023 16:01:58 +0700 Subject: [PATCH 02/35] translate you will learn component, translate describing the ui until writing markup with jsx --- src/components/MDX/MDXComponents.tsx | 2 +- src/content/learn/describing-the-ui.md | 44 +++++++++++++------------- 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index 42204cb55..5021f233c 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -173,7 +173,7 @@ function YouWillLearn({ children: any; isChapter?: boolean; }) { - let title = isChapter ? 'In this chapter' : 'You will learn'; + let title = isChapter ? 'Dalam bab ini' : 'Anda akan mempelajari'; return {children}; } diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 07393f6d0..87961f917 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -11,13 +11,13 @@ React adalah sebuah *library* JavaScript untuk merender antarmuka pengguna (UI). * [Cara menulis komponen React pertama Anda](/learn/your-first-component) -* [When and how to create multi-component files](/learn/importing-and-exporting-components) -* [How to add markup to JavaScript with JSX](/learn/writing-markup-with-jsx) -* [How to use curly braces with JSX to access JavaScript functionality from your components](/learn/javascript-in-jsx-with-curly-braces) -* [How to configure components with props](/learn/passing-props-to-a-component) -* [How to conditionally render components](/learn/conditional-rendering) -* [How to render multiple components at a time](/learn/rendering-lists) -* [How to avoid confusing bugs by keeping components pure](/learn/keeping-components-pure) +* [Kapan dan bagaimana membuat file multi-komponen](/learn/importing-and-exporting-components) +* [Cara menambahkan markup ke JavaScript dengan JSX](/learn/writing-markup-with-jsx) +* [Cara menggunakan kurung kurawal dengan JSX untuk mengakses fungsionalitas JavaScript dari komponen Anda](/learn/javascript-in-jsx-with-curly-braces) +* [Cara mengonfigurasi komponen dengan props](/learn/passing-props-to-a-component) +* [Cara menampilkan komponen secara bersyarat](/learn/conditional-rendering) +* [Cara merender beberapa komponen sekaligus](/learn/rendering-lists) +* [Cara menghindari bug yang membingungkan dengan menjaga komponen tetap murni](/learn/keeping-components-pure) @@ -61,9 +61,9 @@ Baca **[Komponen Pertama Anda](/learn/your-first-component)** untuk mempelajari -## Importing and exporting components {/*importing-and-exporting-components*/} +## Mengimpor dan Mengekspor Komponen {/*importing-and-exporting-components*/} -You can declare many components in one file, but large files can get difficult to navigate. To solve this, you can *export* a component into its own file, and then *import* that component from another file: +Anda dapat mendeklarasikan banyak komponen dalam satu file, tetapi file yang besar dapat sulit untuk dinavigasi/dibaca. Untuk memecahkan masalah ini, Anda dapat *mengekspor* sebuah komponen ke dalam file sendiri, dan kemudian *mengimpor* komponen tersebut dari file lain: @@ -84,7 +84,7 @@ import Profile from './Profile.js'; export default function Gallery() { return (
-

Amazing scientists

+

Ilmuwan yang luar biasa

@@ -112,22 +112,22 @@ img { margin: 0 10px 10px 0; } -Read **[Importing and Exporting Components](/learn/importing-and-exporting-components)** to learn how to split components into their own files. +Baca **[Mengimpor dan Mengekspor Komponen](/learn/importing-and-exporting-components)** untuk belajar bagaimana memecah komponen ke dalam file-file terpisah. -## Writing markup with JSX {/*writing-markup-with-jsx*/} +## Menulis Markup dengan JSX {/*writing-markup-with-jsx*/} -Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information. +Setiap komponen React adalah fungsi JavaScript yang dapat berisi beberapa *markup* yang dirender oleh React ke browser. Komponen React menggunakan ekstensi sintaksis bernama JSX untuk merepresentasikan *markup* tersebut. JSX terlihat mirip dengan HTML, tetapi sedikit lebih ketat dan dapat menampilkan informasi yang dinamis. -If we paste existing HTML markup into a React component, it won't always work: +Jika kita menempel *markup* HTML yang sudah ada ke dalam komponen React, itu tidak selalu akan berfungsi: ```js export default function TodoList() { return ( - // This doesn't quite work! + // Ini tidak cukup berhasil

Hedy Lamarr's Todos

    -
  • Invent new traffic lights -
  • Rehearse a movie scene -
  • Improve spectrum technology +
  • Ciptakan lampu lalu lintas baru +
  • Latih adegan film +
  • Meningkatkan teknologi spektrum
); } @@ -149,7 +149,7 @@ img { height: 90px; } -If you have existing HTML like this, you can fix it using a [converter](https://transform.tools/html-to-jsx): +Jika Anda memiliki HTML seperti ini, Anda dapat memperbaikinya menggunakan [konverter](https://transform.tools/html-to-jsx): @@ -164,9 +164,9 @@ export default function TodoList() { className="photo" />
    -
  • Invent new traffic lights
    • -
  • Rehearse a movie scene
    • -
  • Improve spectrum technology
    • +
  • Ciptakan lampu lalu lintas baru
    • +
  • Latih adegan film
    • +
  • Meningkatkan teknologi spektrum
); From 0e73c8c272b0db99fc743255cdcd526c3a180655 Mon Sep 17 00:00:00 2001 From: Muhamad Ilyas Mustafa Date: Tue, 25 Apr 2023 17:14:32 +0700 Subject: [PATCH 03/35] modify toc, sidebar, and describing the UI until conditional rendering --- src/components/Layout/Toc.tsx | 2 +- src/content/learn/describing-the-ui.md | 46 +++++++++++++------------- src/sidebarLearn.json | 8 ++--- src/utils/prepareMDX.js | 2 +- 4 files changed, 29 insertions(+), 29 deletions(-) diff --git a/src/components/Layout/Toc.tsx b/src/components/Layout/Toc.tsx index a24bbced6..a281bc290 100644 --- a/src/components/Layout/Toc.tsx +++ b/src/components/Layout/Toc.tsx @@ -16,7 +16,7 @@ export function Toc({headings}: {headings: Toc}) {