Merge branch 'master' into composition-vs-inheritance

.circleci/config.yml

@@ -18,3 +18,6 @@ jobs:
       - run:
           name: Check Prettier, ESLint, Flow
           command: yarn ci-check
+      - run:
+          name: Test Textlint
+          command: yarn test:textlint

.github/PULL_REQUEST_TEMPLATE.md

@@ -11,3 +11,11 @@ https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md
 If your PR references an existing issue, please add the issue number below
 
 -->
+
+## Progress
+
+- [ ] 번역 초안 작성(Draft translation)
+- [ ] [공통 스타일 가이드 확인 (Check the common style guide)](https://github.com/reactjs/ko.reactjs.org/blob/master/UNIVERSAL-STYLE-GUIDE.md)
+- [ ] [용어 확인 (Check the term)](https://github.com/reactjs/ko.reactjs.org/wiki/Translate-Glossary)
+- [ ] [맞춤법 검사 (Spelling check)](http://speller.cs.pusan.ac.kr/)
+- [ ] 리뷰 반영 (Resolve reviews)

.textlintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  filters: {
+    comments: true,
+  },
+  formatterName: 'stylish',
+};

README.md

@@ -57,7 +57,7 @@ The documentation is divided into several sections with a different tone and pur
 
 ## Translation
 
-If you are interesting in translating `reactjs.org`, please see the current translation efforts at [isreacttranslatedyet.com](https://www.isreacttranslatedyet.com/).
+If you are interested in translating `reactjs.org`, please see the current translation efforts at [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).

UNIVERSAL-STYLE-GUIDE.md

@@ -0,0 +1,97 @@
+# 공통 스타일 가이드
+
+이 문서는 **모든** 언어에 적용돼야 할 규칙을 설명합니다.
+
+## 제목 아이디
+
+모든 제목에는 다음과 같이 아이디가 명시적으로 설정되어 있습니다.
+
+```md
+## Try React {#try-react}
+```
+
+**아이디는 번역하면 안 됩니다!** 이 아이디는 탐색을 위해 사용되므로 번역하면 아래처럼 외부에서 문서가 참조될 때 링크가 깨질 수 있습니다.
+
+```md
+자세한 내용은 [시작 부분](/getting-started#try-react)을 참조해주세요.
+```
+
+✅ 권장
+
+```md
+## React 시도해보기 {#try-react}
+```
+
+❌ 금지:
+
+```md
+## React 시도해보기 {#react-시도해보기}
+```
+
+이는 위에 있는 링크를 깨지게 만듭니다.
+
+## 코드에 있는 문자
+
+주석을 제외한 모든 코드는 번역하지 않고 그대로 놔둬 주세요. 선택적으로 문자열에 있는 텍스트를 수정할 수 있지만, 코드를 참조하는 문자열은 번역하지 않도록 주의해주세요.
+
+예시는 다음과 같습니다.
+```js
+// Example
+const element = <h1>Hello, world</h1>;
+ReactDOM.render(element, document.getElementById('root'));
+```
+
+✅ 권장
+
+```js
+// 예시
+const element = <h1>Hello, world</h1>;
+ReactDOM.render(element, document.getElementById('root'));
+```
+
+✅ 허용:
+
+```js
+// 예시
+const element = <h1>안녕 세상</h1>;
+ReactDOM.render(element, document.getElementById('root'));
+```
+
+❌ 금지:
+
+```js
+// 예시
+const element = <h1>안녕 세상</h1>;
+// "root"는 HTML 엘리먼트의 아이디를 의미합니다.
+// 번역하지 마세요.
+ReactDOM.render(element, document.getElementById('뿌리'));
+```
+
+❌ 절대 금지:
+
+```js
+// 예시
+const 요소 = <h1>안녕 세상</h1>;
+ReactDOM.그리다(요소, 문서.아이디로부터_엘리먼트_가져오기('뿌리'));
+```
+
+## 외부 링크
+
+외부 링크가 [MDN]이나 [Wikipedia]같은 참고 문헌의 문서에 연결되어 있고 해당 문서가 자국어로 잘 번역되어 있다면 번역 문서를 링크하는 것도 고려해보세요.
+
+[MDN]: https://developer.mozilla.org/en-US/
+[Wikipedia]: https://en.wikipedia.org/wiki/Main_Page
+
+예시는 다음과 같습니다.
+
+```md
+React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object).
+```
+
+✅ 허용:
+
+```md
+React 엘리먼트는 [불변객체](https://ko.wikipedia.org/wiki/불변객체)입니다.
+```
+
+외부 링크를 대체할 만한 자국어 자료가 없다면 (Stack Overflow, YouTube 비디오 등) 영어 링크를 사용해주세요.

content/authors.yml

@@ -73,6 +73,9 @@ sophiebits:
 steveluscher:
   name: Steven Luscher
   url: https://twitter.com/steveluscher
+tesseralis:
+  name: Nat Alison
+  url: https://twitter.com/tesseralis
 timer:
   name: Joe Haddad
   url: https://twitter.com/timer150

content/blog/2015-03-30-community-roundup-26.md

@@ -29,7 +29,7 @@ Colin also [blogged about his experience using React Native](http://blog.scottlo
 
 Spencer Ahrens and I had the great pleasure to talk about React Native on [The Changelog](https://thechangelog.com/149/) podcast. It was really fun to chat for an hour, I hope that you'll enjoy listening to it. :)
 
-<audio src="http://fdlyr.co/d/changelog/cdn.5by5.tv/audio/broadcasts/changelog/2015/changelog-149.mp3" controls="controls" style="width: 100%"></audio>
+<audio src="https://cdn.changelog.com/uploads/podcast/149/the-changelog-149.mp3" controls="controls" style="width: 100%"></audio>
 
 
 ## Hacker News {#hacker-news}

content/blog/2015-08-11-relay-technical-preview.md

@@ -13,7 +13,7 @@ While React simplified the process of developing complex user-interfaces, it lef
 
 Declarative data-fetching means that Relay applications specify *what* data they need, not *how* to fetch that data. Just as React uses a description of the desired UI to manage view updates, Relay uses a data description in the form of GraphQL queries. Given these descriptions, Relay coalesces queries into batches for efficiency, manages error-prone asynchronous logic, caches data for performance, and automatically updates views as data changes.
 
-Relay is also component-oriented, extending the notion of a React component to include a description of what data is necessary to render it. This colocation allows developers to reason locally about their application and eliminates bugs such as under- or over-fetching data.
+Relay is also component-oriented, extending the notion of a React component to include a description of what data is necessary to render it. This collocation allows developers to reason locally about their application and eliminates bugs such as under- or over-fetching data.
 
 Relay is in use at Facebook in production apps, and we're using it more and more because *Relay lets developers focus on their products and move fast*. It's working for us and we'd like to share it with the community.
 

content/blog/2018-09-10-introducing-the-react-profiler.md

@@ -140,7 +140,7 @@ It also shows that each time it rendered, it was the most "expensive" component
 
 To view this chart, either double-click on a component _or_ select a component and click on the blue bar chart icon in the right detail pane.
 You can return to the previous chart by clicking the "x" button in the right detail pane.
-You can aso double click on a particular bar to view more information about that commit.
+You can also double click on a particular bar to view more information about that commit.
 
 ![How to view all renders for a specific component](../images/blog/introducing-the-react-profiler/see-all-commits-for-a-fiber.gif)
 

content/blog/2018-11-27-react-16-roadmap.md

@@ -87,7 +87,7 @@ function Example() {
 }
 ```
 
-Hooks [introduction](/docs/hooks-intro.html) and [overview](/docs/hooks-overview.html) are good places to start. Watch [these talks](https://www.youtube.com/watch?v=V-QO-KO90iQ) for a video introduction and a deep dive. The [FAQ](/docs/hooks-faq.html) should answer most of your further questions. To learn more about the motivation behind Hooks, you can read [this article](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889). Some of the rationale for the API design of Hooks is explained in [this RFC thread reply](https://github.com/reactjs/rfcs/pull/68#issuecomment-439314884).
+Hooks [introduction](/docs/hooks-intro.html) and [Hook 개요](/docs/hooks-overview.html) are good places to start. Watch [these talks](https://www.youtube.com/watch?v=V-QO-KO90iQ) for a video introduction and a deep dive. The [FAQ](/docs/hooks-faq.html) should answer most of your further questions. To learn more about the motivation behind Hooks, you can read [this article](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889). Some of the rationale for the API design of Hooks is explained in [this RFC thread reply](https://github.com/reactjs/rfcs/pull/68#issuecomment-439314884).
 
 We have been dogfooding Hooks at Facebook since September. We don't expect major bugs in the implementation. Hooks are only available in the 16.7 alpha versions of React. Some of their API is expected to change in the final version (see the end of [this comment](https://github.com/reactjs/rfcs/pull/68#issuecomment-439314884) for details). It is possible that the minor release with Hooks might not be React 16.7.
 

content/blog/2019-02-06-react-v16.8.0.md

@@ -12,7 +12,7 @@ Hooks let you use state and other React features without writing a class. You ca
 If you've never heard of Hooks before, you might find these resources interesting:
 
 * [Introducing Hooks](/docs/hooks-intro.html) explains why we're adding Hooks to React.
-* [Hooks at a Glance](/docs/hooks-overview.html) is a fast-paced overview of the built-in Hooks.
+* [Hook 개요](/docs/hooks-overview.html) is a fast-paced overview of the built-in Hooks.
 * [Building Your Own Hooks](/docs/hooks-custom.html) demonstrates code reuse with custom Hooks.
 * [Making Sense of React Hooks](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889) explores the new possibilities unlocked by Hooks.
 * [useHooks.com](https://usehooks.com/) showcases community-maintained Hooks recipes and demos.

content/blog/2019-02-23-is-react-translated-yet.md

@@ -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 maintance 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.