Skip to content

docs: translate homepage content #582

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
resir014 merged 13 commits into from
Jul 1, 2023
Merged

docs: translate homepage content #582

Changes from 4 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
f05ef92
docs: translate homepage content
resir014 Jun 26, 2023
8b3bda7
Merge branch 'main' into translate-homepage
resir014 Jun 26, 2023
07b38b8
translate bottom CTA
resir014 Jun 26, 2023
624cd87
docs: translate home content video component props
mhaidarhanif Jun 26, 2023
5f05b02
translate rest of example contents
resir014 Jun 26, 2023
11272a0
add suggestions from code review
resir014 Jun 26, 2023
fda809a
docs: telusuri -> cari
resir014 Jun 27, 2023
781dcc7
Merge branch 'main' into translate-homepage
resir014 Jun 29, 2023
d9bb84f
docs: translate more sections
resir014 Jun 29, 2023
5a24cc0
docs: fully translate page content
resir014 Jun 29, 2023
5a2dbfd
docs: minor spacing fix
resir014 Jun 29, 2023
ed0e422
docs: fix some spacing
resir014 Jul 1, 2023
9e0db02
docs: increase heading width for better readability
resir014 Jul 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 49 additions & 45 deletions src/components/Layout/HomeContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,100 +131,104 @@ export function HomeContent() {
React
</h1>
<p className="text-4xl font-display max-w-lg md:max-w-full py-1 text-center text-secondary dark:text-primary-dark leading-snug self-center">
The library for web and native user interfaces
Pustaka untuk antarmuka pengguna web dan native
</p>
<div className="mt-5 self-center flex gap-2 w-full sm:w-auto flex-col sm:flex-row">
<ButtonLink
href={'/learn'}
type="primary"
size="lg"
className="w-full sm:w-auto justify-center"
label="Learn React">
Learn React
label="Belajar React">
Belajar React
</ButtonLink>
<ButtonLink
href={'/reference/react'}
type="secondary"
size="lg"
className="w-full sm:w-auto justify-center"
label="API Reference">
API Reference
label="Referensi API">
Referensi API
</ButtonLink>
</div>
</div>

<Section background="left-card">
<Center>
<Header>Create user interfaces from components</Header>
<Header>Membuat antarmuka pengguna dari komponen</Header>
<Para>
React lets you build user interfaces out of individual pieces
called components. Create your own React components like{' '}
<Code>Thumbnail</Code>, <Code>LikeButton</Code>, and{' '}
<Code>Video</Code>. Then combine them into entire screens, pages,
and apps.
React memungkinkan Anda membangun antarmuka penguna dari
bagian-bagian yang disebut komponen. Buat komponen React Anda
sendiri seperti <Code>Thumbnail</Code>, <Code>LikeButton</Code>,
dan <Code>Video</Code>. Kemudian gabungkan komponen-komponen
tersebut ke dalam seluruh layar, halaman, dan aplikasi.
</Para>
</Center>
<FullBleed>
<Example1 />
</FullBleed>
<Center>
<Para>
Whether you work on your own or with thousands of other
developers, using React feels the same. It is designed to let you
seamlessly combine components written by independent people,
teams, and organizations.
Baik Anda bekerja sendiri atau dengan ribuan pengembang lain,
menggunakan React akan terasa sama. React dirancang untuk
memungkinkan Anda menggabungkan komponen yang dirancang oleh
pengembang independen, tim, dan organisasi besar secara mulus.
Comment thread
resir014 marked this conversation as resolved.
Outdated
</Para>
</Center>
</Section>

<Section background="right-card">
<Center>
<Header>Write components with code and markup</Header>
<Header>Menulis komponen dengan kode dan markup</Header>
<Para>
React components are JavaScript functions. Want to show some
content conditionally? Use an <Code>if</Code> statement.
Displaying a list? Try array <Code>map()</Code>. Learning React is
learning programming.
Komponen React adalah fungsi JavaScript. Ingin menampilkan
beberapa konten secara kondisional? Gunakan pernyataan{' '}
<Code>if</Code>. Menampilkan sebuah daftar? Gunakan fungsi{' '}
<Code>map()</Code> ke sebuah senarai. Belajar React adalah belajar
Comment thread
resir014 marked this conversation as resolved.
Outdated
pemrograman.
</Para>
</Center>
<FullBleed>
<Example2 />
</FullBleed>
<Center>
<Para>
This markup syntax is called JSX. It is a JavaScript syntax
extension popularized by React. Putting JSX markup close to
related rendering logic makes React components easy to create,
maintain, and delete.
Sintaksis markup ini disebut dengan JSX. Ini adalah ekstensi
sintaksis JavaScript yang dipopulerkan oleh React. Menempatkan
markup JSX dekat dengan logika rendering yang terkait membuat
komponen React mudah untuk dibuat, dipelihara, dan dihapus.
</Para>
</Center>
</Section>

<Section background="left-card">
<Center>
<Header>Add interactivity wherever you need it</Header>
<Header>
Menambahkan interaktivitas di mana pun Anda membutuhkannya
</Header>
<Para>
React components receive data and return what should appear on the
screen. You can pass them new data in response to an interaction,
like when the user types into an input. React will then update the
screen to match the new data.
Komponen React menerima data dan mengembalikan apa yang seharusnya
muncul di layar. Anda dapat memberikan data baru sebagai respons
dari sebuah interaksi, seperti ketika pengguna mengetikkan sebuah
input. React kemudian akan memperbarui layar agar sesuai dengan
data baru.
</Para>
</Center>
<FullBleed>
<Example3 />
</FullBleed>
<Center>
<Para>
You don’t have to build your whole page in React. Add React to
your existing HTML page, and render interactive React components
anywhere on it.
Anda tidak perlu membangun seluruh halaman Anda di React.
Tambahkan React ke halaman HTML yang sudah ada, dan render
komponen React interaktif di mana saja di halaman tersebut.
</Para>
<div className="flex justify-start w-full lg:justify-center">
<CTA
color="gray"
icon="code"
href="/learn/add-react-to-an-existing-project">
Add React to your page
Tambahkan React ke halaman Anda
</CTA>
</div>
</Center>
Expand Down Expand Up @@ -498,15 +502,15 @@ export function HomeContent() {
<div className="mt-20 px-5 lg:px-0 mb-6 max-w-4xl text-center text-opacity-80">
<Logo className="text-link dark:text-link-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
<Header>
Welcome to the <br className="" />
React community
Selamat datang di <br className="" />
komunitas React
</Header>
<ButtonLink
href={'/learn'}
type="primary"
size="lg"
label="Take the Tutorial">
Get Started
label="Ikuti Tutorial">
Memulai
</ButtonLink>
</div>
</Section>
Expand Down Expand Up @@ -922,8 +926,8 @@ function Example1() {
<Video
video={{
id: 'ex1-0',
title: 'My video',
description: 'Video description',
title: 'Video saya',
description: 'Deskripsi video',
image: 'blue',
url: null,
}}
Expand All @@ -946,20 +950,20 @@ function Example2() {
const videos = [
{
id: 'ex2-0',
title: 'First video',
description: 'Video description',
title: 'Video pertama',
description: 'Deskripsi video',
image: 'blue',
},
{
id: 'ex2-1',
title: 'Second video',
description: 'Video description',
title: 'Video kedua',
description: 'Deskripsi video',
image: 'red',
},
{
id: 'ex2-2',
title: 'Third video',
description: 'Video description',
title: 'Video ketiga',
description: 'Deskripsi video',
image: 'green',
},
];
Expand Down