New Indonesian Translation Progress

[gaearon]

Maintainer List

• @arfianadam
• @gedeagas
• @regalius
• @rizafahmi
• @resir014
• @grikomsn
• @zainfathoni
• @r17x
• @mhaidarhanif
• @mazipan

For New Translators

To translate a page:

1. Check that no one else has claimed your page in the linked issues below.
2. Comment on the linked issue that you would like to translate said page. Please take only one page at a time.
3. Clone this repo, translate your page, and submit a pull request!

Before contributing, read the glossary and translation guidelines to understand how to translate various technical and React-specific terms.

Please be prompt with your translations! If you find that you can't commit anymore, let the maintainers know so they can assign the page to someone else.

For Maintainers

Make sure to link to the exact page being translated on the first comment of the issue. Ex:

Page: https://id.react.dev/learn

When PRs are created, make sure that it's linked to the correct issue! This will make sure the issue is closed automatically when the PR is merged.

Main Content

To do before releasing as an "official" translation. Please translate these pages first.

Note that each section has an index page, which needs to be translated too.

Learn React (High Priority)

• Quick Start #372

  • Tutorial: Tic-Tac-Toe #373
  • Thinking in React #374

• Installation #375

  • Start a New React Project #376
  • Add React to an Existing Project #377
  • Editor Setup #395
  • Using TypeScript #658
  • React Developer Tools #396

• Describing the UI #464

  • Your First Component #465
  • Importing and Exporting Components #417
  • Writing Markup with JSX #419
  • JavaScript in JSX with Curly Braces #425
  • Passing Props to a Component #428
  • Conditional Rendering #431
  • Rendering Lists #466
  • Keeping Components Pure #435
  • Understanding Your UI as a Tree #659

• Adding Interactivity #452

  • Responding to Events #445
  • State: A Component's Memory #446
  • Render and Commit #447
  • State as a Snapshot #448
  • Queueing a Series of State Updates #449
  • Updating Objects in State #450
  • Updating Arrays in State #451

• Managing State #378

  • Reacting to Input with State #379
  • Choosing the State Structure #380
  • Sharing State Between Components #381
  • Preserving and Resetting State #382
  • Extracting State Logic into a Reducer #383
  • Passing Data Deeply with Context #384
  • Scaling Up with Reducer and Context #385

• Escape Hatches #386

  • Referencing Values with Refs #387
  • Manipulating the DOM with Refs #388
  • Synchronizing with Effects #389
  • You Might Not Need an Effect #390
  • Lifecycle of Reactive Effects #391
  • Separating Events from Effects #392
  • Removing Effect Dependencies #393
  • Reusing Logic with Custom Hooks #394

API Reference (High Priority)

• react: Hooks #397

  • useCallback #398
  • useContext #463
  • useDebugValue #399
  • useDeferredValue #400
  • useEffect #401
  • useId #402
  • useImperativeHandle #403
  • useInsertionEffect #404
  • useLayoutEffect #405
  • useMemo #406
  • useReducer #407
  • useRef #408
  • useState #409
  • useSyncExternalStore #410
  • useTransition #411

• react: Components #412

  • <Fragment> (<>) #413
  • <Profiler> #414
  • <StrictMode> #415
  • <Suspense> #416

• react: APIs #468

  • createContext #469
  • forwardRef #470
  • lazy #471
  • memo #418
  • startTransition #420

• react-dom: Components #421

  • Common (e.g. <div>) #422
  • <input> #423
  • <option> #424
  • <progress> #426
  • <select> #427
  • <textarea> #433

• react-dom: APIs #434

  • createPortal #436
  • flushSync #438
  • findDOMNode #439
  • hydrate #440
  • render #441
  • unmountComponentAtNode #443

• react-dom/client: Client APIs #453

  • createRoot #454
  • hydrateRoot #455

• react-dom/server: Server APIs #456

  • renderToNodeStream #457
  • renderToPipeableStream #458
  • renderToReadableStream #459
  • renderToStaticMarkup #460
  • renderToStaticNodeStream #461
  • renderToString #462

Navigation and UI (Medium Priority)

We suggest to leave most of the UI translation until the end. We plan to do some invasive changes to the website folder layout and components, so postponing this until your translation is almost complete would make it easier to merge the changes from our side later. It might make sense to translate the homepage above the fold early, but leave the rest for later. As individual pages get translated, you can change the page titles in the corresponding sidebar files. Finally, when you're translating the navigation, make sure to test both desktop and mobile layouts.

• Homepage (currently in HomeContent.js) #579
• Sidebars (currently in src/sidebar*.json) #583
• Top-level navigation (currently in TopNav.tsx) #584

When You're Ready...

After everything above is translated, add your language to deployedLanguages in Seo.tsx of the original reactjs/react.dev repository.

Secondary Content (Medium Priority)

These API pages should ideally be translated too, but they're less urgent and can be done after the others:

• Legacy React APIs #545
  • Children #546
  • cloneElement #547
  • Component #548
  • createElement #549
  • createFactory #550
  • createRef #551
  • isValidElement #552
  • PureComponent #553

Optional Content (Low Priority)

These aren't the main translation targets, but if you'd like to do them, feel free to expand the list to include their subpages:

• Community
• Blog
• Warnings

[infrasync]

May i translate a Quick Start Page ?

[mustafamilyas]

I'm interested in translating, "describing the UI" overview page, may I?

[syauqy]

Hi, I'm interested to translate "Installation" and "Start a New React Project" page under the Installation section.

[wd-Agung]

I would like to translate the "Editor Setup" page under the Installation section

[rickyraz]

I'm interested in contributing, may I translate the page 'Conditional Rendering'

[padunk]

Hi, love to contribute back to React community, I would like to translate Add React to an Existing Project

[Cikang44]

Hi, I'm interested in contributing, may I translate the "Your First Component" page

[r17x]

Hi, I'm interested to translate react -> context react: APIs -> createContext 👍

[chrsep]

Hi! I'd also love to contribute back to react. Can i take the Adding Interactivity overview page?

[gaearon]

@arfianadam @gedeagas @regalius @rizafahmi @resir014 @grikomsn

Can you please confirm if you will be able to maintain and steer this translation? We need to get https://github.com/reactjs/translations.react.dev/blob/main/langs/id.json to match the current list of active maintainers. Thank you!

[kalmndo]

I'm really loved if i can contribute on Managing State

[samnap11]

I would like to contribute as well by translating "Rendering Lists".

[mhaidarhanif]

Hi @resir014 and @grikomsn , once you've confirmed the question from @gaearon, we three @zainfathoni @r17x @mhaidarhanif also would like to be listed as well. Thank you

[resir014]

Can you please confirm if you will be able to maintain and steer this translation? We need to get reactjs/translations.react.dev@main/langs/id.json to match the current list of active maintainers. Thank you!

Hi @gaearon!

Sorry for the late response, but yes, I'll be able to manage the translation for the Indonesian localisation. And as @mhaidarhanif mentioned, we can also add him, @r17x, and @zainfathoni to the maintainers list.

[resir014]

May i translate a Quick Start Page ?

@infrasync Of course! Your assigned page will be: Quick Start

As for me, I'll take the other one: Tutorial: Tic Tac Toe and Thinking in React.

[resir014]

I'm interested in translating, "describing the UI" overview page, may I?

@mustafamilyas Of course!

Your next page will be: Describing the UI

[resir014]

Hi, I'm interested to translate "Installation" and "Start a New React Project" page under the Installation section.

@syauqy You got it!

Your next page(s) will be: Installation, Start a New React Project

[resir014]

I would like to translate the "Editor Setup" page under the Installation section

@agprst Your next page will be: Editor Setup

[resir014]

I'm interested in contributing, may I translate the page 'Conditional Rendering'

@rickyraz Your next page will be: Conditional Rendering

Hi, love to contribute back to React community, I would like to translate Add React to an Existing Project

@padunk Your next page will be: Add React to an Existing Project

Hi! I'd also love to contribute back to react. Can i take the Adding Interactivity overview page?

@chrsep Your next page will be: Adding Interactivity

I'm really loved if i can contribute on Managing State

@kalmndo Your next page will be: Managing State

I would like to contribute as well by translating "Rendering Lists".

@samnap11 Your next page will be: Rendering Lists

Thank you all!

[averrows]

Hi @resir014, I'd like to contribute to react: Hooks > useSyncExternalStore. Can you please assign it to me? thank you.

[juliansyahrifqi]

Hello, I am interested to translate react-dom: Components > <textarea> page. Thank you

[shaddamalbz]

Hi @shaddamalbz, that page has been claimed. Would you like to claim another page?

Hi @resir014, sure, how about <StrictMode> is it have been claimed yet?

[abidra]

Hi @resir014, I'd like to contribute to react: react-dom: Components > <input>. Can you please assign it to me? thank you.

[fandok]

Hi @resir014, I would like to contribute to Escape Hatches page. Can you help to assign the page to me? Thank you very much!

[stackpan]

Can i contribute to Escape Hatches > Synchronizing with Effects?

[andreepratama27]

Hi, Can I contribute and assign me to page Escape Hatches > Removing Effect Dependencies, please?

[resir014]

Hey everyone!

Thank you for your enthusiasm in this translation project. To anticipate the demand, we're currently updating the workflow of our translation project. We're converting the checklist on the original post into sub-issues so that everyone can claim them directly from said issue, rather than polluting this issue thread.

As soon as our work is done, this issue thread can be used for general discussions related to the translation project. We'll also update the relevant documentation to reflect this new workflow change.

Thanks!

[doaortu]

1. Having all the issues ready for unfinished translations, because there are about 100 of them.

Hey @mhaidarhanif, @resir014 I can help opening those issue for you. If you guys down with that, I can start right away.

[resir014]

Hey @mhaidarhanif, I can help opening those issue for you.

@doaortu The maintainers are running through all the issues one by one. You can relax for now.

[doaortu]

@doaortu The maintainers are running through all the issues one by one. You can relax for now.

Ah I see, thank you for the update.

[ical10]

Hi, I'm interested in contributing. Where can I see pages that are not assigned yet?

[mhaidarhanif]

@ical10 Please wait, as explained by @resir014 above, we're migrating to a better workflow so "we can see pages that are not assigned yet" much easier.

[zainfathoni]

As some of us suggested, we are mechanism to avoid unnecessary bottlenecks during the assignment process. The process is inspired by WargaBantuWarga project.

Here's the gist of the process, we will move it to the corresponding documentation soon.

Issue assignment & Communication

Once you're ready with your branch and have something to contribute, you'll want to
let everyone know that you are working on the issue. To communicate this, we
are using GitHub's Draft Pull Requests.

Draft Pull Request is like a regular Pull Request but it can't be merged until
it's marked as "ready for review". It signals other contributors that it's a
work in progress.
This is necessary to signal other contributors that the work for the particular
issue has started and it is still in progress. Also, it is a better approach to
use as a communication tool between contributors because we can provide
additional information other than viewing the changed files.

Therefore, when you have at least one commit it's important to create a Draft
Pull Request to let everyone know that the issue is assigned to you.

Creating a Draft Pull Request

Steps to creating a Draft Pull Request:

1. Commit and push your new changes into the remote repository. Please refer to @commitlint/config-conventional for your commit message or you can use commitlint.io to assist you in composing the commit message.
2. Head over to the Pull requests section on your forked repository, hit New pull request.
   
3. Pick your forked repository for the head repository, and compare with the branch that you are having changes in.
   
4. Put a clear title and description in your pull request. Make sure the
   description follows our guide below.
   
5. Pick Create draft pull request (like in the image above) and hit the green button.
6. Don't forget to mark your Draft Pull Request as Ready for review after you commit all of the changes.

Formatting Pull Request Description

To properly link a pull request to an issue, there is one tiny requirement text to put in a Pull Request description.
Please make sure to mention the issue that you're working on correctly. Replace
this text <!-- mention the issue that you're trying to close with this PR -->
from the template with the issue number. Example:

Closes #318

For the moment, we lock this issue to stop the old flow (commenting in this thread asking for assignments) immediately.

[zainfathoni]

I updated the TRANSLATION.md page with the abovementioned mechanism. Please take a look at that new process from now on.

Thank you for contributing, and happy translating! 😄

[zainfathoni]

In principle, anyone available to translate any page, please raise a Draft PR at your earliest convenience.
The issue description's Assignee: @username text is a remnant of the previous assignment process.
From now on, we will prioritise any PRs (or draft PRs) as a sign of self-assignment to the particular issue.

[resir014]

Hello everyone:

I'm pleased to announced that we've reached 50% progress in our Core translations! 🎉

With this milestone, we've also announced that we're also opening translations for the medium priority issues, starting from the Legacy React APIs section. Please check the first post for links to these issues.

Additionally, we're also opening translations for the UI elements once we got all the translated document titles figured out - since there are files like sidebar.json which relies on said translated document titles.

Thank you for your continued contribution! 💙

[resir014]

We've added some new pages from the upstream version to translate:

• Using TypeScript #658
• Understanding Your UI as a Tree #659

Also there's a new "React Reference Overview" and "Rules of React section available to translate here: #649