-
Notifications
You must be signed in to change notification settings - Fork 437
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into introducing-JSX-kor
- Loading branch information
Showing
84 changed files
with
2,706 additions
and
1,793 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,70 +1,70 @@ | ||
| # reactjs.org | ||
|
|
||
| This repo contains the source code and documentation powering [reactjs.org](https://reactjs.org/). | ||
| 이 저장소는 [reactjs.org](https://reactjs.org/)의 소스 코드와 개발 문서를 포함하고 있습니다. | ||
|
|
||
| ## Getting started | ||
| ## 시작하기 | ||
|
|
||
| ### Prerequisites | ||
| ### 사전 준비 | ||
|
|
||
| 1. Git | ||
| 1. Node: any 8.x version starting with 8.4.0 or greater | ||
| 1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/) | ||
| 1. A fork of the repo (for any contributions) | ||
| 1. A clone of the [reactjs.org repo](https://github.com/reactjs/reactjs.org) on your local machine | ||
| 1. Node: 8.4.0 이상으로 시작하는 모든 8.x 버전 | ||
| 1. Yarn: [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/) 참고 | ||
| 1. 포크한 개인 저장소 | ||
| 1. 로컬에 클론(Clone) 한 [reactjs.org repo](https://github.com/reactjs/reactjs.org) 개인 저장소 | ||
|
|
||
| ### Installation | ||
| ### 설치 | ||
|
|
||
| 1. `cd reactjs.org` to go into the project root | ||
| 1. `yarn` to install the website's npm dependencies | ||
| 1. `cd reactjs.org`를 실행하여 프로젝트 경로로 이동합니다. | ||
| 1. `yarn`을 이용하여 npm 의존성 모듈들을 설치합니다. | ||
|
|
||
| ### Running locally | ||
| ### 개발 서버 실행하기 | ||
|
|
||
| 1. `yarn dev` to start the hot-reloading development server (powered by [Gatsby](https://www.gatsbyjs.org)) | ||
| 1. `open http://localhost:8000` to open the site in your favorite browser | ||
| 1. `yarn dev` 명령어를 사용하여 hot-reloading 개발 서버를 시작합니다. (powered by [Gatsby](https://www.gatsbyjs.org)) | ||
| 1. `open http://localhost:8000` 명령어를 사용하여 선호하는 브라우저로 접속하세요. | ||
|
|
||
| ## Contributing | ||
| ## 기여방법 | ||
|
|
||
| ### Guidelines | ||
| ### 가이드라인 | ||
|
|
||
| The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections. | ||
| 이 문서는 목적이 다른 여러 섹션으로 나뉘게 됩니다. 문장을 추가할 계획이라면, 적절한 섹션에 대한 [가이드라인](https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md#guidelines-for-text)을 숙지하는 것이 도움이 될 것입니다. | ||
|
|
||
| ### Create a branch | ||
| ### 브랜치(branch) 만들기 | ||
|
|
||
| 1. `git checkout master` from any folder in your local `reactjs.org` repository | ||
| 1. `git pull origin master` to ensure you have the latest main code | ||
| 1. `git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch` with a suitable name) to create a branch | ||
| 1. `reactjs.org` 로컬 저장소에서 `git checkout master`를 실행합니다. | ||
| 1. `git pull origin master`를 실행하여 최신 원본 코드를 보장할 수 있습니다. | ||
| 1. `git checkout -b the-name-of-my-branch` (`the-name-of-my-branch` 를 적절한 이름으로 교체)를 실행하여 브랜치를 만듭니다. | ||
|
|
||
| ### Make the change | ||
| ### 수정하기 | ||
|
|
||
| 1. Follow the "Running locally" instructions | ||
| 1. Save the files and check in the browser | ||
| 1. Changes to React components in `src` will hot-reload | ||
| 1. Changes to markdown files in `content` will hot-reload | ||
| 1. If working with plugins, you may need to remove the `.cache` directory and restart the server | ||
| 1. "개발 서버 실행하기" 부분을 따릅니다. | ||
| 1. 파일을 저장하고 브라우저에서 확인합니다. | ||
| 1.`src`안에 있는 React 컴포넌트가 수정될 경우 hot-reload가 적용됩니다. | ||
| 1. `content`안에 있는 마크다운 파일이 수정될 경우 hot-reload가 적용됩니다. | ||
| 1. 플러그인을 사용하는 경우, `.cache` 디렉토리를 제거한 후 서버를 재시작해야 합니다. | ||
|
|
||
| ### Test the change | ||
| ### 수정사항 체크하기 | ||
|
|
||
| 1. If possible, test any visual changes in all latest versions of common browsers, on both desktop and mobile. | ||
| 1. Run `yarn check-all` from the project root. (This will run Prettier, ESLint, and Flow.) | ||
| 1. 가능하다면, 변경한 부분에 대해서 많이 사용하는 브라우저의 최신 버전에서 시각적으로 제대로 적용되었는지 확인해주세요. (데스크탑과 모바일 모두) | ||
| 1. 프로젝트 루트에서 `yarn check-all`를 실행합니다. (이 명령어는 Prettier, ESLint, 그리고 Flow를 실행합니다.) | ||
|
|
||
| ### Push it | ||
| ### Push 하기 | ||
|
|
||
| 1. `git add -A && git commit -m "My message"` (replacing `My message` with a commit message, such as `Fixed header logo on Android`) to stage and commit your changes | ||
| 1. `git add -A && git commit -m "My message"` (`My message` 부분을 `Fixed header logo on Android` 같은 커밋 메시지로 교체)를 실행하여 변경한 파일들을 commit 해주세요. | ||
| 1. `git push my-fork-name the-name-of-my-branch` | ||
| 1. Go to the [reactjs.org repo](https://github.com/reactjs/reactjs.org) and you should see recently pushed branches. | ||
| 1. Follow GitHub's instructions. | ||
| 1. If possible, include screenshots of visual changes. A Netlify build will also be automatically created once you make your PR so other people can see your change. | ||
| 1. [reactjs.org repo](https://github.com/reactjs/reactjs.org)에서 최근에 푸시된 브랜치를 볼 수 있습니다. | ||
| 1. Github 지침을 따라주세요. | ||
| 1. 가능하다면 시각적으로 변화된 부분의 스크린샷을 첨부해주세요. PR을 만들고 다른사람들이 수정사항을 볼 수 있게되면, Netlify가 자동적으로 빌드할 것입니다. | ||
|
|
||
| ## Translation | ||
| ## 변역 | ||
|
|
||
| If you are interested in translating `reactjs.org`, please see the current translation efforts at [isreacttranslatedyet.com](https://www.isreacttranslatedyet.com/). | ||
| `reactjs.org` 번역에 흥미가 있다면, [isreacttranslatedyet.com](https://www.isreacttranslatedyet.com/)에서 현재 번역이 얼마나 진행되었는지 확인해주세요. | ||
|
|
||
|
|
||
| If your language does not have a translation and you would like to create one, please follow the instructions at [reactjs.org Translations](https://github.com/reactjs/reactjs.org-translation#translating-reactjsorg). | ||
| 번역하려는 언어가 아직 진행되지 않았다면, 해당 언어에 대해 새롭게 만들 수 있습니다. [reactjs.org Translations](https://github.com/reactjs/reactjs.org-translation#translating-reactjsorg)를 참고해주세요. | ||
|
|
||
| ## Troubleshooting | ||
| ## 문제 해결하기 | ||
|
|
||
| - `yarn reset` to clear the local cache | ||
| - `yarn reset` 명령어를 사용하여 로컬 캐시를 초기화합니다. | ||
|
|
||
| ## License | ||
| Content submitted to [reactjs.org](https://reactjs.org/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/open-source-explorer/reactjs.org/blob/master/LICENSE-DOCS.md) file. | ||
| ## 저작권 | ||
| 위 내용에 대한 저작권은 [reactjs.org](https://reactjs.org/)가 가지고 있으며, [LICENSE-DOCS.md](https://github.com/open-source-explorer/reactjs.org/blob/master/LICENSE-DOCS.md)에서 볼 수 있는 CC-BY-4.0 라이센스를 따릅니다. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| --- | ||
| title: "Is React Translated Yet? ¡Sí! Sim! はい！" | ||
| author: [tesseralis] | ||
| --- | ||
|
|
||
| We’re excited to announce an ongoing effort to maintain official translations of the React documentation website into different languages. Thanks to the dedicated efforts of React community members from around the world, React is now being translated into *over 30* languages! You can find them on the new [Languages](/languages) page. | ||
|
|
||
| In addition, the following three languages have completed translating most of the React Docs! 🎉 | ||
|
|
||
| * **Spanish: [es.reactjs.org](https://es.reactjs.org)** | ||
| * **Japanese: [ja.reactjs.org](https://ja.reactjs.org)** | ||
| * **Brazilian Portuguese: [pt-br.reactjs.org](https://pt-br.reactjs.org)** | ||
|
|
||
| Special congratulations to [Alejandro Ñáñez Ortiz](https://github.com/alejandronanez), [Rainer Martínez Fraga](https://github.com/carburo), [David Morales](https://github.com/dmorales), [Miguel Alejandro Bolivar Portilla](https://github.com/Darking360), and all the contributors to the Spanish translation for being the first to *completely* translate the core pages of the docs! | ||
|
|
||
| ## Why Localization Matters {#why-localization-matters} | ||
|
|
||
| React already has many meetups and conferences around the world, but many programmers don't use English as their primary language. We’d love to support local communities who use React by making our documentation available in most popular languages. | ||
|
|
||
| In the past, React community members have created unofficial translations for [Chinese](https://github.com/discountry/react), [Arabic](https://wiki.hsoub.com/React), and [Korean](https://github.com/reactjs/ko.reactjs.org/issues/4); by making an official channel for these translated docs we're hoping to make them easier to find and help make sure that non-English-speaking users of React aren't left behind. | ||
|
|
||
| ## Contributing {#contributing} | ||
|
|
||
| If you would like to help out on a current translation, check out the [Languages](/languages) page and click on the "Contribute" link for your language. | ||
|
|
||
| Can't find your language? If you'd like to maintain your langauge's translation fork, follow the instructions in the [translation repo](https://github.com/reactjs/reactjs.org-translation#starting-a-new-translation)! | ||
|
|
||
| ## Backstory {#backstory} | ||
|
|
||
| Hi everyone! I'm [Nat](https://twitter.com/tesseralis)! You may know me as the [polyhedra lady](https://www.youtube.com/watch?v=Ew-UzGC8RqQ). For the past few weeks, I've been helping the React team coordinate their translation effort. Here's how I did it. | ||
|
|
||
| Our original approach for translations was to use a SaaS platform that allows users to submit translations. There was already a [pull request](https://github.com/reactjs/reactjs.org/pull/873) to integrate it and my original responsibility was to finish that integration. However, we had concerns about the feasibility of that integration and the current quality of translations on the platform. Our primary concern was ensuring that translations kept up to date with the main repo and didn't become "stale". | ||
|
|
||
| [Dan](https://twitter.com/dan_abramov) encouraged me to look for alternate solutions, and we stumbled across how [Vue](https://vuejs.org) maintained its translations -- through different forks of the main repo on GitHub. In particular, the [Japanese translation](https://jp.vuejs.org) used a bot to periodically check for changes in the English repo and submits pull requests whenever there is a change. | ||
|
|
||
| This approach appealed to us for several reasons: | ||
|
|
||
| * It was less code integration to get off the ground. | ||
| * It encouraged active maintainers for each repo to ensure quality. | ||
| * Contributors already understand GitHub as a platform and are motivated to contribute directly to the React organization. | ||
|
|
||
| We started of with an initial trial period of three languages: Spanish, Japanese, and Simplified Chinese. This allowed us to work out any kinks in our process and make sure future translations are set up for success. I wanted to give the translation teams freedom to choose whatever tools they felt comfortable with. The only requirement is a [checklist](https://github.com/reactjs/reactjs.org-translation/blob/master/PROGRESS.template.md) that outlines the order of importance for translating pages. | ||
|
|
||
| After the trial period, we were ready to accept more languages. I created [a script](https://github.com/reactjs/reactjs.org-translation/blob/master/scripts/create.js) to automate the creation of the new language repo, and a site, [Is React Translated Yet?](https://isreacttranslatedyet.com), to track progress on the different translations. We started *10* new translations on our first day alone! | ||
|
|
||
| Because of the automation, the rest of the maintenance went mostly smoothly. We eventually created a [Slack channel](https://rt-slack-invite.herokuapp.com) to make it easier for translators to share information, and I released a guide solidifying the [responsibilities of maintainers](https://github.com/reactjs/reactjs.org-translation/blob/master/maintainer-guide.md). Allowing translators to talk with each other was a great boon -- for example, the Arabic, Persian, and Hebrew translations were able to talk to each other in order to get [right-to-left text](https://en.wikipedia.org/wiki/Right-to-left) working! | ||
|
|
||
| ## The Bot {#the-bot} | ||
|
|
||
| The most challenging part was getting the bot to sync changes from the English version of the site. Initially we were using the [che-tsumi](https://github.com/vuejs-jp/che-tsumi) bot created by the Japanese Vue translation team, but we soon decided to build our own bot to suit our needs. In particular, the che-tsumi bot works by [cherry picking](https://git-scm.com/docs/git-cherry-pick) new commits. This ended up causing a cavalade of new issues that were interconnected, especially when [Hooks were released](/blog/2019/02/06/react-v16.8.0.html). | ||
|
|
||
| In the end, we decided that instead of cherry picking each commit, it made more sense to merge all new commits and create a pull request around once a day. Conflicts are merged as-is and listed in the [pull request](https://github.com/reactjs/pt-BR.reactjs.org/pull/114), leaving a checklist for maintainers to fix. | ||
|
|
||
| Creating the [sync script](https://github.com/reactjs/reactjs.org-translation/blob/master/scripts/sync.js) was easy enough: it downloads the translated repo, adds the original as a remote, pulls from it, merges the conflicts, and creates a pull request. | ||
|
|
||
| The problem was finding a place for the bot to run. I'm a frontend developer for a reason -- Heroku and its ilk are alien to me and *endlessly* frustrating. In fact, until this past Tuesday, I was running the script by hand on my local machine! | ||
|
|
||
| The biggest challenge was space. Each fork of the repo is around 100MB -- which takes minutes to clone on my local machine. We have *32* forks, and the free tiers or most deployment platforms I checked limited you to 512MB of storage. | ||
|
|
||
| After lots of notepad calculations, I found a solution: delete each repo once we've finished the script and limit the concurrency of `sync` scripts that run at once to be within the storage requirements. Luckily, Heroku dynos have a much faster Internet connection and are able to clone even the React repo quickly. | ||
|
|
||
| There were other smaller issues that I ran into. I tried using the [Heroku Scheduler](https://elements.heroku.com/addons/scheduler) add-on so I didn't have to write any actual `watch` code, but it end up running too inconsistently, and I [had an existential meltdown on Twitter](https://twitter.com/tesseralis/status/1097387938088796160) when I couldn't figure out how to send commits from the Heroku dyno. But in the end, this frontend engineer was able to get the bot working! | ||
|
|
||
| There are, as always, improvements I want to make to the bot. Right now it doesn't check whether there is an outstanding pull request before pushing another one. It's still hard to tell the exact change that happened in the original source, and it's possible to miss out on a needed translation change. But I trust the maintainers we've chosen to work through these issues, and the bot is [open source](https://github.com/reactjs/reactjs.org-translation) if anyone wants to help me make these improvements! | ||
|
|
||
| ## Thanks {#thanks} | ||
|
|
||
| Finally, I would like to extend my gratitude to the following people and groups: | ||
|
|
||
| * All the translation maintainers and contributors who are helping translate React to more than thirty languages. | ||
| * The [Vue.js Japan User Group](https://github.com/vuejs-jp) for initiating the idea of having bot-managed translations, and especially [Hanatani Takuma](https://github.com/potato4d) for helping us understand their approach and helping maintain the Japanese translation. | ||
| * [Soichiro Miki](https://github.com/smikitky) for many [contributions](https://github.com/reactjs/reactjs.org/pull/1636) and thoughtful comments on the overall translation process, as well as for maintaining the Japanese translation. | ||
| * [Eric Nakagawa](https://github.com/ericnakagawa) for managing our previous translation process. | ||
| * [Brian Vaughn](https://github.com/bvaughn) for setting up the [languages page](/languages) and managing all the subdomains. | ||
|
|
||
| And finally, thank you to [Dan Abramov](https://twitter.com/dan_abramov) for giving me this opportunity and being a great mentor along the way. |
Oops, something went wrong.