Merge pull request #332 from reactjs/sync-bc91fe41

koba04 · web-flow · commit 514d157caa83 · 2020-05-12T22:05:20.000+09:00
Sync with reactjs.org @ bc91fe4
diff --git a/content/community/conferences.md b/content/community/conferences.md
@@ -17,10 +17,10 @@ March 30 - 31, 2020 in San Francisco, CA
 
 [Website](https://www.reactathon.com) - [Twitter](https://twitter.com/reactathon) - [Facebook](https://www.facebook.com/events/575942819854160/)
 
-### React Summit Amsterdam 2020 {#react-summit-2020}
-September 11, 2020 in Amsterdam, The Netherlands
+### React Summit - Remote Edition 2020 {#react-summit-remote-2020}
+3pm CEST time, April 17, 2020 - remote event
 
-[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)
+[Website](https://remote.reactsummit.com) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)
 
 ### React Day Bangalore 2020 {#react-day-bangalore-2020}
 April 25, 2020 in Bangalore, India
@@ -82,11 +82,26 @@ September 5-6, 2020 in Wrocław, Poland
 
 [Website](https://www.react-native.eu/) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu/) - [YouTube](https://www.youtube.com/watch?v=m0GfmlGFh3E&list=PLZ3MwD-soTTHy9_88QPLF8DEJkvoB5Tl-) - [Instagram](https://www.instagram.com/reactnative_eu/)
 
+### React Summit Amsterdam 2020 {#react-summit-2020}
+September 8-11, 2020 in Amsterdam, The Netherlands
+
+[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)
+
+### React Advanced 2020 {#react-advanced-2020}
+October 21-23, 2020 in London, UK
+
+[Website](https://reactadvanced.com) - [Twitter](http://twitter.com/reactadvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://youtube.com/c/ReactConferences)
+
 ### React India 2020 {#react-india-2020}
 November 6, 2020 in Mumbai, India
 
 [Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia/) - [LinkedIn](https://www.linkedin.com/showcase/14545585) - [YouTube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w/videos)
 
+### React Day Berlin 2020 {#react-day-berlin-2020}
+November 25-27, 2020 in Berlin, Germany
+
+[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://www.youtube.com/reactdayberlin)
+
 ## Past Conferences {#past-conferences}
 
 ### React.js Conf 2015 {#reactjs-conf-2015}
diff --git a/content/community/courses.md b/content/community/courses.md
@@ -8,7 +8,7 @@ permalink: community/courses.html
 
 ## Free Courses {#free-courses}
 
-- [Glitch: React Starter Kit](https://glitch.com/culture/react-starter-kit/) - A free, 5-part video course with interactive code examples that will help you learn React.
+- [Glitch: React Starter Kit](https://glitch.com/glimmer/post/react-starter-kit/) - A free, 5-part video course with interactive code examples that will help you learn React.
 
 - [Codecademy: React 101](https://www.codecademy.com/learn/react-101) - Codecademy's introductory course for React.
 
diff --git a/content/community/examples.md b/content/community/examples.md
@@ -6,24 +6,21 @@ sectionid: community
 permalink: community/examples.html
 ---
 
-There are many example projects created by the React community. Feel free to add your own project. If you add a project, please commit to keeping it up to date with the latest versions of React.
+There are many example projects created by the React community. We're keeping this page focused on the ones that use React without third-party state management libraries.
 
+If you add a project, please commit to keeping it up to date with the latest versions of React.
+
+## Small Examples
 
-* **[Zeldog](https://yannsainty.github.io/Zeldog/)** A Zelda like game with a dog fighting ducks and more to eat pizza !
 * **[Calculator](https://github.com/ahfarmer/calculator)** Implementation of the iOS calculator built in React
-* **[Emoji Search](https://github.com/ahfarmer/emoji-search)** Simple React app for searching emoji
-* **[React Powered Hacker News Client](https://github.com/insin/react-hn)** A React & `react-router`-powered implementation of Hacker News using its Firebase API
-* **[Pokedex](https://github.com/alik0211/pokedex)** The list of Pokémon with live search
-* **[Shopping Cart](https://github.com/jeffersonRibeiro/react-shopping-cart)** Simple e-commerce cart application built using React
-* **[Progressive Web Tetris](https://github.com/skidding/flatris)** Besides a beautiful, mobile-friendly implementation of Tetris, this project is a playground for integrating and experimenting with web technologies.
-* **[Product Comparison Page](https://github.com/Rhymond/product-compare-react)** Simple Product Compare page built in React
-* **[Hacker News Clone React/GraphQL](https://github.com/clintonwoo/hackernews-react-graphql)** Hacker News clone rewritten with universal JavaScript, using React and GraphQL
-* **[Bitcoin Price Index](https://github.com/mrkjlchvz/bitcoin-price-index)** Simple Bitcoin price index data from CoinDesk API
-* **[Builder Book](https://github.com/builderbook/builderbook)** Open-source web app to write and host documentation or sell books. Built with React, Material-UI, Next, Express, Mongoose, MongoDB.
-* **[GFonts Space](https://github.com/pankajladhar/GFontsSpace)** A space which allows user to play with Google fonts. Built with React, Redux and React-Router.
-* **[Course Learn Page](https://github.com/ulearnpro/ulearn)** Open Source LMS script in Laravel 5.8 and ReactJS 16.9
-* **[Speedy math](https://github.com/pankajladhar/speedy-math)** An application which allows kids to practice basic Mathematics i.e  Addition, Subtraction, Multiply, Comparison. It is a PWA (Progressive web app) with offline support and install as App features.
-* **[Unit Converter](https://github.com/KarthikeyanRanasthala/react-unit-converter)** Minimal Yet Responsive Unit Converter Built With React, Material-UI & Convert-Units.
+* **[Emoji Search](https://github.com/ahfarmer/emoji-search)** React app for searching emoji
+* **[Snap Shot](https://github.com/Yog9/SnapShot)** A photo gallery with search
 * **[BMI Calculator](https://github.com/GermaVinsmoke/bmi-calculator)** A React Hooks app for calculating BMI
-* **[ReactJS Hangman Game](https://github.com/vetrivelcsamy/reactjs-hangman)** ReactJS Hangman Game Find a Programming Language.
-* **[Radix Converter](https://github.com/kumom/radix-converter)** A small tool that converts numbers in radix 2 to 36 with arbitrary precision.
+* **[Image Compressor](https://github.com/RaulB-masai/react-image-compressor)** An offline image compressor built with React and browser-image-compression
+* **[Counter App](https://github.com/arnab-datta/counter-app)** A small shopping cart example
+* **[Tutorial Solutions](https://github.com/harman052/react-tutorial-solutions)** Solutions to challenges mentioned at the end of React tutorial
+
+## Complete Apps
+
+* **[Hacker News Clone React/GraphQL](https://github.com/clintonwoo/hackernews-react-graphql)** Hacker News clone rewritten with universal JavaScript, using React and GraphQL
+* **[Builder Book](https://github.com/builderbook/builderbook)** Open-source web app to write and host documentation or sell books. Built with React, Material-UI, Next, Express, Mongoose, MongoDB
diff --git a/content/community/external-resources.md b/content/community/external-resources.md
@@ -18,4 +18,6 @@ React community には選定された多くの素晴らしいリソースがあ
 
 - [Awesome React Talks](https://github.com/tiaanduplessis/awesome-react-talks) - React talks についての選定されたリストです。
 
+- [Awesome React Videos](https://www.awesomereact.com) - すばらしい React 関連のビデオを集めたウェブサイトです。
+
 - [Hero35 React Hub](https://hero35.com/topic/react) - React の*すべて*のカンファや講演がカテゴリ別に選定されて収録されているウェブサイトです。
diff --git a/content/community/team.md b/content/community/team.md
@@ -54,14 +54,6 @@ Dominic is interested in travelling, drum and bass, stand-up comedy and spending
 
 Luna learned programming because she thought it meant creating video games. Instead, she ended up working on the Pinterest web app, and now on React itself. Luna doesn't want to make video games anymore, but she plans to do creative writing if she ever gets bored.
 
-### Nicolas Gallagher {#nicolas-gallagher}
-
-![Nicolas](../images/team/necolas.jpg)
-
-[@necolas on GitHub](https://github.com/necolas) &middot; [@necolas on Twitter](https://twitter.com/necolas)
-
-Nicolas has majored in anthropology. He started in web development by building a website for a friend, and eventually found himself rebuilding the Twitter website with React. Nicolas describes himself as boring on paper, not much better in real life.
-
 ### Rachel Nabors {#rachel-nabors}
 
 ![Rachel](../images/team/rnabors.jpg)
@@ -78,14 +70,6 @@ Rachel wrote a [book about UI animation](https://abookapart.com/products/animati
 
 Sebastian majored in psychology. He's usually quiet. Even when he says something, it often doesn't make sense to the rest of us until a few months later. The correct way to pronounce his surname is "mark-boa-geh" but he settled for "mark-beige" out of pragmatism -- and that's how he approaches React.
 
-### Sunil Pai {#sunil-pai}
-
-![Sunil](../images/team/threepointone.jpg)
-
-[@threepointone on GitHub](https://github.com/threepointone) &middot; [@threepointone on Twitter](https://twitter.com/threepointone)
-
-Sunil started writing JavaScript for IE6 and still has some regrets about it. He worked in consulting, design, and product firms, before joining the React team to help others do the same. Sunil plays a blue Les Paul guitar, loves London, and would appreciate a response to his last ping, please and thank you!
-
 ### Yuzhi Zheng {#yuzhi-zheng}
 
 ![Yuzhi](../images/team/yuzhi.jpg)
@@ -120,13 +104,15 @@ React was originally created by [Jordan Walke](https://github.com/jordwalke). To
 * [Keyan Zhang](https://github.com/keyz)
 * [Nat Alison](https://github.com/tesseralis)
 * [Nathan Hunzaker](https://github.com/nhunzaker)
+* [Nicolas Gallagher](https://github.com/necolas)
 * [Paul O'Shannessy](https://github.com/zpao)
 * [Pete Hunt](https://github.com/petehunt)
 * [Philipp Spiess](https://github.com/philipp-spiess)
 * [Sander Spies](https://github.com/sanderspies)
+* [Sasha Aickin](https://github.com/aickin)
 * [Sophia Shoemaker](https://github.com/mrscobbler)
 * [Sophie Alpert](https://github.com/sophiebits)
-* [Sasha Aickin](https://github.com/aickin)
+* [Sunil Pai](https://github.com/threepointone)
 * [Tim Yung](https://github.com/yungsters)
 
 This list is not exhaustive.
diff --git a/content/docs/cdn-links.md b/content/docs/cdn-links.md
@@ -3,7 +3,7 @@ id: cdn-links
 title: CDN リンク
 permalink: docs/cdn-links.html
 prev: create-a-new-react-app.html
-next: hello-world.html
+next: release-channels.html
 ---
 
 React および ReactDOM は CDN を介して利用することができます。
diff --git a/content/docs/faq-ajax.md b/content/docs/faq-ajax.md
@@ -81,3 +81,50 @@ class MyComponent extends React.Component {
   }
 }
 ```
+
+Here is the equivalent with [Hooks](https://reactjs.org/docs/hooks-intro.html): 
+
+```js
+function MyComponent() {
+  const [error, setError] = useState(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [items, setItems] = useState([]);
+
+  // Note: the empty deps array [] means
+  // this useEffect will run once
+  // similar to componentDidMount()
+  useEffect(() => {
+    fetch("https://api.example.com/items")
+      .then(res => res.json())
+      .then(
+        (result) => {
+          setIsLoaded(true);
+          setItems(result.items);
+        },
+        // Note: it's important to handle errors here
+        // instead of a catch() block so that we don't swallow
+        // exceptions from actual bugs in components.
+        (error) => {
+          setIsLoaded(true);
+          setError(error);
+        }
+      )
+  }, [])
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  } else if (!isLoaded) {
+    return <div>Loading...</div>;
+  } else {
+    return (
+      <ul>
+        {items.map(item => (
+          <li key={item.name}>
+            {item.name} {item.price}
+          </li>
+        ))}
+      </ul>
+    );
+  }
+}
+```
diff --git a/content/docs/forms.md b/content/docs/forms.md
@@ -68,13 +68,7 @@ class NameForm extends React.Component {
 
 フォーム要素の `value` 属性が設定されているので、表示される値は常に `this.state.value` となり、React の state が信頼できる情報源となります。`handleChange` はキーストロークごとに実行されて React の state を更新するので、表示される値はユーザがタイプするたびに更新されます。
 
-制御されたコンポーネントを使うと、すべての state の変更には紐付けられたハンドラ関数が存在することになります。これによりユーザ入力の改変や検証が簡単になります。例えば、名前が全て大文字で書かれるように強制したいなら、`handleChange` を次のように書くことができます：
-
-```javascript{2}
-handleChange(event) {
-  this.setState({value: event.target.value.toUpperCase()});
-}
-```
+制御されたコンポーネントを使うと、ユーザ入力の値は常に React の state によって制御されるようになります。これによりタイプするコード量は少し増えますが、その値を他の UI 要素に渡したり、他のイベントハンドラからリセットしたりできるようになります。
 
 ## textarea タグ {#the-textarea-tag}
 
diff --git a/content/languages.yml b/content/languages.yml
@@ -42,7 +42,7 @@
 - name: Persian
   translated_name: فارسی
   code: fa
-  status: 0
+  status: 1
 - name: French
   translated_name: Français
   code: fr
@@ -66,7 +66,7 @@
 - name: Hungarian
   translated_name: magyar
   code: hu
-  status: 1
+  status: 2
 - name: Armenian
   translated_name: Հայերեն
   code: hy
diff --git a/examples/uncontrolled-components/input-type-file.js b/examples/uncontrolled-components/input-type-file.js
@@ -6,7 +6,7 @@ class FileInput extends React.Component {
     this.fileInput = React.createRef();
   }
   handleSubmit(event) {
-    // highlight-range{4}
+    // highlight-range{3}
     event.preventDefault();
     alert(
       `Selected file - ${this.fileInput.current.files[0].name}`
diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js
@@ -122,7 +122,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             },
           }}>
           <a
-            href="https://code.facebook.com/projects/"
+            href="https://opensource.facebook.com/projects/"
             target="_blank"
             rel="noopener">
             <img

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ class FileInput extends React.Component {`
`6`	`6`	`this.fileInput = React.createRef();`
`7`	`7`	`}`
`8`	`8`	`handleSubmit(event) {`
`9`		`- // highlight-range{4}`
	`9`	`+ // highlight-range{3}`
`10`	`10`	`event.preventDefault();`
`11`	`11`	`alert(`
`12`	`12`	`Selected file - ${this.fileInput.current.files[0].name}`