Merge branch 'master' into master

reactjs · May 15, 2020 · f388630 · f388630
2 parents 1466ab4 + 0555156
commit f388630
Show file tree

Hide file tree

Showing 16 changed files with 204 additions and 168 deletions.
diff --git a/content/404.md b/content/404.md
@@ -1,9 +1,9 @@
 ---
 layout: single
-title: Page Not Found
+title: पेज नहीं मिला
 permalink: 404.html
 ---
 
-We couldn't find what you were looking for.
+जिसकी आपको तलाश थी, हमें वह नहीं मिला।
 
-Please contact the owner of the site that linked you to the original URL and let them know their link is broken.
+कृपया उस साइट के मालिक को संपर्क करें जिसने आपको मूल URL से जोड़ा है और उन्हें बताएं कि उनका लिंक टूटा हुआ है।
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 @@ There are many wonderful curated resources the React community has put together.
 
 - [Awesome React Talks](https://github.com/tiaanduplessis/awesome-react-talks) - A curated list of React talks.
 
+- [Awesome React Videos](https://www.awesomereact.com) - A website highlighting the best React videos.
+
 - [Hero35 React Hub](https://hero35.com/topic/react) - A website with _all_ React conferences and talks, categorized & curated.
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
@@ -82,3 +82,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 {
 
 Since the `value` attribute is set on our form element, the displayed value will always be `this.state.value`, making the React state the source of truth. Since `handleChange` runs on every keystroke to update the React state, the displayed value will update as the user types.
 
-With a controlled component, every state mutation will have an associated handler function. This makes it straightforward to modify or validate user input. For example, if we wanted to enforce that names are written with all uppercase letters, we could write `handleChange` as:
-
-```javascript{2}
-handleChange(event) {
-  this.setState({value: event.target.value.toUpperCase()});
-}
-```
+With a controlled component, the input's value is always driven by the React state. While this means you have to type a bit more code, you can now pass the value to other UI elements too, or reset it from other event handlers.
 
 ## The textarea Tag {#the-textarea-tag}