From 1ed0ecb98969921a91519135aed983941abdfda5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dante=20Calder=C3=B3n?= Date: Fri, 26 Apr 2019 13:43:02 -0500 Subject: [PATCH 1/8] Open external links in a new Tab (#1380) Add this functionality with gatsby-remark-external-links plugin --- gatsby-config.js | 1 + package.json | 1 + yarn.lock | 81 +++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 82 insertions(+), 1 deletion(-) diff --git a/gatsby-config.js b/gatsby-config.js index 456396f92..957c39145 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -55,6 +55,7 @@ module.exports = { maxWidth: 840, }, }, + 'gatsby-remark-external-links', 'gatsby-remark-header-custom-ids', { resolve: 'gatsby-remark-code-repls', diff --git a/package.json b/package.json index 3e255133b..ba61ccc95 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "gatsby-remark-code-repls": "^2.0.0", "gatsby-remark-copy-linked-files": "^2.0.0", "gatsby-remark-embed-snippet": "^3.0.0", + "gatsby-remark-external-links": "^0.0.4", "gatsby-remark-images": "^2.0.0", "gatsby-remark-prismjs": "^3.0.2", "gatsby-remark-responsive-iframe": "^2.0.0", diff --git a/yarn.lock b/yarn.lock index 246285339..fd392c929 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5499,6 +5499,15 @@ gatsby-remark-embed-snippet@^3.0.0: parse-numeric-range "^0.0.2" unist-util-map "^1.0.3" +gatsby-remark-external-links@^0.0.4: + version "0.0.4" + resolved "https://registry.yarnpkg.com/gatsby-remark-external-links/-/gatsby-remark-external-links-0.0.4.tgz#85b98c1e9dacfaa58085319648c904ff3cab42f0" + dependencies: + babel-runtime "^6.26.0" + is-relative-url "^2.0.0" + unist-util-find "^1.0.1" + unist-util-visit "^1.1.3" + gatsby-remark-images@^2.0.0: version "2.0.4" resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-2.0.4.tgz#29894b85b4181527fa34514fb73218c8e7f89129" @@ -7889,6 +7898,10 @@ lodash.isstring@^4.0.1: resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451" integrity sha1-1SfftUVuynzJu5XV2ur4i6VKVFE= +lodash.iteratee@^4.5.0: + version "4.7.0" + resolved "https://registry.yarnpkg.com/lodash.iteratee/-/lodash.iteratee-4.7.0.tgz#be4177db289a8ccc3c0990f1db26b5b22fc1554c" + lodash.kebabcase@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36" @@ -7984,6 +7997,10 @@ loglevel@^1.4.1: resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa" integrity sha1-4PyVEztu8nbNyIh82vJKpvFW+Po= +longest-streak@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-1.0.0.tgz#d06597c4d4c31b52ccb1f5d8f8fe7148eafd6965" + longest-streak@^2.0.1: version "2.0.2" resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.2.tgz#2421b6ba939a443bb9ffebf596585a50b4c38e2e" @@ -8105,6 +8122,10 @@ markdown-escapes@^1.0.0: resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.2.tgz#e639cbde7b99c841c0bacc8a07982873b46d2122" integrity sha512-lbRZ2mE3Q9RtLjxZBZ9+IMl68DKIXaVAhwvwn9pmjnPLS0h/6kyBMgNhqi1xFJ/2yv6cSyv0jbiZavZv93JkkA== +markdown-table@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-0.4.0.tgz#890c2c1b3bfe83fb00e4129b8e4cfe645270f9d1" + markdown-table@^1.1.0: version "1.1.2" resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.2.tgz#c78db948fa879903a41bce522e3b96f801c63786" @@ -8967,7 +8988,7 @@ on-headers@~1.0.1: resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.1.tgz#928f5d0f470d49342651ea6794b0857c100693f7" integrity sha1-ko9dD0cNSTQmUepnlLCFfBAGk/c= -once@^1.3.0, once@^1.3.1, once@^1.4.0: +once@^1.3.0, once@^1.3.1, once@^1.3.3, once@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1" integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E= @@ -10588,6 +10609,20 @@ relay-runtime@1.5.0: babel-runtime "^6.23.0" fbjs "^0.8.14" +remark-parse@^1.1.0: + version "1.1.0" + resolved "http://registry.npmjs.org/remark-parse/-/remark-parse-1.1.0.tgz#c3ca10f9a8da04615c28f09aa4e304510526ec21" + dependencies: + collapse-white-space "^1.0.0" + extend "^3.0.0" + parse-entities "^1.0.2" + repeat-string "^1.5.4" + trim "0.0.1" + trim-trailing-lines "^1.0.0" + unherit "^1.0.4" + unist-util-remove-position "^1.0.0" + vfile-location "^2.0.0" + remark-parse@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-5.0.0.tgz#4c077f9e499044d1d5c13f80d7a98cf7b9285d95" @@ -10616,6 +10651,19 @@ remark-retext@^3.1.0: dependencies: mdast-util-to-nlcst "^3.2.0" +remark-stringify@^1.1.0: + version "1.1.0" + resolved "http://registry.npmjs.org/remark-stringify/-/remark-stringify-1.1.0.tgz#a7105e25b9ee2bf9a49b75d2c423f11b06ae2092" + dependencies: + ccount "^1.0.0" + extend "^3.0.0" + longest-streak "^1.0.0" + markdown-table "^0.4.0" + parse-entities "^1.0.2" + repeat-string "^1.5.4" + stringify-entities "^1.0.1" + unherit "^1.0.4" + remark-stringify@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-5.0.0.tgz#336d3a4d4a6a3390d933eeba62e8de4bd280afba" @@ -10636,6 +10684,14 @@ remark-stringify@^5.0.0: unherit "^1.0.4" xtend "^4.0.1" +remark@^5.0.1: + version "5.1.0" + resolved "http://registry.npmjs.org/remark/-/remark-5.1.0.tgz#cb463bd3dbcb4b99794935eee1cf71d7a8e3068c" + dependencies: + remark-parse "^1.1.0" + remark-stringify "^1.1.0" + unified "^4.1.1" + remark@^9.0.0: version "9.0.0" resolved "https://registry.yarnpkg.com/remark/-/remark-9.0.0.tgz#c5cfa8ec535c73a67c4b0f12bfdbd3a67d8b2f60" @@ -12328,6 +12384,17 @@ unicode-property-aliases-ecmascript@^1.0.4: resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.4.tgz#5a533f31b4317ea76f17d807fa0d116546111dd0" integrity sha512-2WSLa6OdYd2ng8oqiGIWnJqyFArvhn+5vgx5GTxMbUYjCYKUcuKS62YLFF0R/BDGlB1yzXjQOLtPAfHsgirEpg== +unified@^4.1.1: + version "4.2.1" + resolved "http://registry.npmjs.org/unified/-/unified-4.2.1.tgz#76ff43aa8da430f6e7e4a55c84ebac2ad2cfcd2e" + dependencies: + bail "^1.0.0" + extend "^3.0.0" + has "^1.0.1" + once "^1.3.3" + trough "^1.0.0" + vfile "^1.0.0" + unified@^6.0.0, unified@^6.1.5: version "6.2.0" resolved "https://registry.yarnpkg.com/unified/-/unified-6.2.0.tgz#7fbd630f719126d67d40c644b7e3f617035f6dba" @@ -12396,6 +12463,14 @@ unist-builder@^1.0.1: dependencies: object-assign "^4.1.0" +unist-util-find@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/unist-util-find/-/unist-util-find-1.0.1.tgz#1062bbb6928c7a97c6adc89b53745d4c46c222a2" + dependencies: + lodash.iteratee "^4.5.0" + remark "^5.0.1" + unist-util-visit "^1.1.0" + unist-util-generated@^1.1.0: version "1.1.2" resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-1.1.2.tgz#8b993f9239d8e560be6ee6e91c3f7b7208e5ce25" @@ -12686,6 +12761,10 @@ vfile-message@^1.0.0: dependencies: unist-util-stringify-position "^1.1.1" +vfile@^1.0.0: + version "1.4.0" + resolved "http://registry.npmjs.org/vfile/-/vfile-1.4.0.tgz#c0fd6fa484f8debdb771f68c31ed75d88da97fe7" + vfile@^2.0.0: version "2.3.0" resolved "https://registry.yarnpkg.com/vfile/-/vfile-2.3.0.tgz#e62d8e72b20e83c324bc6c67278ee272488bf84a" From 4daa36b293506df72ad1262986e830d5524baaa9 Mon Sep 17 00:00:00 2001 From: Eric Date: Fri, 26 Apr 2019 15:26:58 -0400 Subject: [PATCH 2/8] adds React Boston 2019 to conference page (#1948) * add React Boston 2019 to conference page * add massachusetts to react-boston listing --- content/community/conferences.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/content/community/conferences.md b/content/community/conferences.md index e8e727ee7..0f635a39d 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -72,6 +72,11 @@ September 13th, 2019. New York, USA [Website](https://reactnewyork.com/) - [Twitter](https://twitter.com/reactnewyork) +### React Boston 2019 {#react-boston-2019} +September 21-22, 2019 in Boston, Massachusetts USA + +[Website](https://www.reactboston.com/) - [Twitter](https://twitter.com/reactboston) + ### React India 2019 {#react-india-2019} September 26-28, 2019 in Goa, India @@ -379,4 +384,4 @@ April 4-5, 2019 in Kraków, Poland ### React Amsterdam 2019 {#react-amsterdam-2019} April 12, 2019 in Amsterdam, The Netherlands -[Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences) \ No newline at end of file +[Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences) From 066479b69a63c0ec3b1fcc20aff5f318f4d8f4ca Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sat, 27 Apr 2019 22:13:12 +0300 Subject: [PATCH 3/8] Generate ids for new headers --- content/community/conferences.md | 6 +++--- content/docs/hooks-faq.md | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/content/community/conferences.md b/content/community/conferences.md index 0f635a39d..c3ffbfdbb 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -17,7 +17,7 @@ April 24-26 in Helsinki, Finland [Website](https://react-finland.fi/) - [Twitter](https://twitter.com/ReactFinland) -### ReactJS Girls Conference +### ReactJS Girls Conference {#reactjs-girls-conference} May 3, 2019 in London, UK [Website](https://reactjsgirls.com/) - [Twitter](https://twitter.com/reactjsgirls) @@ -47,12 +47,12 @@ June 21, 2019 Chicago, Illinois USA [Website](https://reactloop.com) - [Twitter](https://twitter.com/ReactLoop) -### Chain React 2019 +### Chain React 2019 {#chain-react-2019} July 11-12, 2019. Portland, OR, USA. [Website](https://infinite.red/ChainReactConf) -### React Rally 2019 +### React Rally 2019 {#react-rally-2019} August 22-23, 2019. Salt Lake City, USA. [Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/) diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md index 7d2953293..b49e0d18c 100644 --- a/content/docs/hooks-faq.md +++ b/content/docs/hooks-faq.md @@ -209,7 +209,7 @@ There are a few more heuristics, and they might change over time as we fine-tune * `componentDidCatch` and `getDerivedStateFromError`: There are no Hook equivalents for these methods yet, but they will be added soon. -### How can I do data fetching with Hooks? +### How can I do data fetching with Hooks? {#how-can-i-do-data-fetching-with-hooks} Here is a [small demo](https://codesandbox.io/s/jvvkoo8pq3) to get you started. To learn more, check out [this article](https://www.robinwieruch.de/react-hooks-fetch-data/) about data fetching with Hooks. @@ -654,7 +654,7 @@ function ProductDetails({ fetchProduct }) Note that in the above example we **need** to keep the function in the dependencies list. This ensures that a change in the `productId` prop of `ProductPage` automatically triggers a refetch in the `ProductDetails` component. -### What can I do if my effect dependencies change too often? +### What can I do if my effect dependencies change too often? {#what-can-i-do-if-my-effect-dependencies-change-too-often} Sometimes, your effect may be using reading state that changes too often. You might be tempted to omit that state from a list of dependencies, but that usually leads to bugs: From 0097b38994b5f263938ef960b218e46f9563dca4 Mon Sep 17 00:00:00 2001 From: Abdelrahman Rifai Date: Sat, 27 Apr 2019 21:20:14 +0200 Subject: [PATCH 4/8] Fix anchor link offset with fixed header (#1914) * Fix anchor link offset with fixed header * handle h3 too * h4 as an anchor * don't affect UI by any means * no need for px * more fixes * consistency * more consistency * pixel perfection * fix h4 after gatsby-highlight * final touch --- src/theme.js | 52 +++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 43 insertions(+), 9 deletions(-) diff --git a/src/theme.js b/src/theme.js index 8d0c2735f..a89e7d78d 100644 --- a/src/theme.js +++ b/src/theme.js @@ -285,15 +285,24 @@ const sharedStyles = { }, '& h2': { - borderTop: `1px solid ${colors.divider}`, - marginTop: 44, - paddingTop: 40, + '::before': { + content: ' ', + display: 'block', + borderBottom: `1px solid ${colors.divider}`, + paddingTop: 44, + marginBottom: 40, + }, + lineHeight: 1.2, ':first-child': { - borderTop: 0, - marginTop: 0, - paddingTop: 0, + '::before': { + content: ' ', + display: 'block', + borderBottom: 0, + paddingTop: 40, + marginTop: -80, + }, }, [media.lessThan('large')]: { @@ -310,7 +319,12 @@ const sharedStyles = { }, '& h3': { - paddingTop: 45, + '::before': { + content: ' ', + display: 'block', + paddingTop: 90, + marginTop: -45, + }, [media.lessThan('small')]: { overflowWrap: 'break-word', @@ -324,14 +338,25 @@ const sharedStyles = { }, '& h2 + h3, & h2 + h3:first-of-type': { - paddingTop: 30, + '::before': { + content: ' ', + display: 'block', + paddingTop: 60, + marginTop: -30, + }, }, '& h4': { + '::before': { + content: ' ', + display: 'block', + paddingTop: 100, + marginTop: -50, + }, + fontSize: 20, color: colors.subtle, lineHeight: 1.3, - marginTop: 50, fontWeight: 400, }, @@ -414,6 +439,15 @@ const sharedStyles = { '& .gatsby-highlight + blockquote': { marginTop: 40, }, + + '& .gatsby-highlight + h4': { + '::before': { + content: ' ', + display: 'block', + paddingTop: 85, + marginTop: -60, + }, + }, }, }; From 8c39db7f07c230277397ba5a4cc0f7a327108145 Mon Sep 17 00:00:00 2001 From: 0xnoob <49793844+0xnoob@users.noreply.github.com> Date: Sun, 28 Apr 2019 22:36:09 +0200 Subject: [PATCH 5/8] Broken anchor link in Advanced Concepts. (#1951) The link should probably either go to directly to the beginning of main concepts (which is what my proposes change does), or to the anchor -tag of "Step-by-Step Guide" (#step-by-step-guide). There is no other link in the article which refers to another anchor-tag, that's why I chose to directly link to the main-concepts. --- content/docs/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/getting-started.md b/content/docs/getting-started.md index 672a1812b..a6384d3f5 100644 --- a/content/docs/getting-started.md +++ b/content/docs/getting-started.md @@ -99,7 +99,7 @@ Sometimes people find third-party books and video courses more helpful than the ### Advanced Concepts {#advanced-concepts} -Once you're comfortable with the [main concepts](#main-concepts) and played with React a little bit, you might be interested in more advanced topics. This section will introduce you to the powerful, but less commonly used React features like [context](/docs/context.html) and [refs](/docs/refs-and-the-dom.html). +Once you're comfortable with the [main concepts](/docs/hello-world.html) and played with React a little bit, you might be interested in more advanced topics. This section will introduce you to the powerful, but less commonly used React features like [context](/docs/context.html) and [refs](/docs/refs-and-the-dom.html). ### API Reference {#api-reference} From b8b3db7acbba117addeea8a7fb86957eb046d7ce Mon Sep 17 00:00:00 2001 From: Nat Alison Date: Sun, 28 Apr 2019 21:18:29 -0700 Subject: [PATCH 6/8] Update languages.yml for Polish completion Also add Mongolian and Catalan. --- content/languages.yml | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/content/languages.yml b/content/languages.yml index c8d5cf4df..3919bb503 100644 --- a/content/languages.yml +++ b/content/languages.yml @@ -23,6 +23,10 @@ translated_name: বাংলা code: bn status: 0 +- name: Catalan + translated_name: Català + code: ca + status: 0 - name: German translated_name: Deutsch code: de @@ -99,6 +103,10 @@ translated_name: മലയാളം code: ml status: 0 +- name: Mongolian + translated_name: Монгол хэл + code: mn + status: 0 - name: Nepali translated_name: नेपाली code: ne @@ -110,7 +118,7 @@ - name: Polish translated_name: Polski code: pl - status: 1 + status: 2 - name: Portuguese (Brazil) translated_name: Português do Brasil code: pt-br From f58befcfd088f601b94f3d16b256c411db732cb8 Mon Sep 17 00:00:00 2001 From: Arshad Kazmi Date: Mon, 29 Apr 2019 20:39:08 +0530 Subject: [PATCH 7/8] Conflicts fixes --- content/docs/getting-started.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/content/docs/getting-started.md b/content/docs/getting-started.md index ae2ede84a..07bb28b1e 100644 --- a/content/docs/getting-started.md +++ b/content/docs/getting-started.md @@ -99,11 +99,7 @@ React के दस्तावेज़ मानते है की आपको ### एडवांस्ड कॉन्सेप्ट्स {#advanced-concepts} -<<<<<<< HEAD -जब आप [मुख्य कॉन्सेप्ट्स](#main-concepts) के साथ सहज महसूस करना शुरू कर दें और React का थोड़ा अभ्यास करलें, हो सकता है आपको एडवांस्ड विषयों में भी दिलचस्पी हों | यह भाग आपको ताकतवर लेकिन कम इस्तेमाल किये जाने वाली React की खासियत जैसे कि [context](/docs/context.html) और [refs](/docs/refs-and-the-dom.html) से आपका परिचय करवाएगा। -======= -Once you're comfortable with the [main concepts](/docs/hello-world.html) and played with React a little bit, you might be interested in more advanced topics. This section will introduce you to the powerful, but less commonly used React features like [context](/docs/context.html) and [refs](/docs/refs-and-the-dom.html). ->>>>>>> b8b3db7acbba117addeea8a7fb86957eb046d7ce +जब आप [मुख्य कॉन्सेप्ट्स](/docs/hello-world.html) के साथ सहज महसूस करना शुरू कर दें और React का थोड़ा अभ्यास करलें, हो सकता है आपको एडवांस्ड विषयों में भी दिलचस्पी हों | यह भाग आपको ताकतवर लेकिन कम इस्तेमाल किये जाने वाली React की खासियत जैसे कि [context](/docs/context.html) और [refs](/docs/refs-and-the-dom.html) से आपका परिचय करवाएगा। ### API रिफरेन्स {#api-reference} From 8b1060602d074363fd5ddb2c3ac8ce3e405335e8 Mon Sep 17 00:00:00 2001 From: Arshad Kazmi Date: Mon, 29 Apr 2019 21:58:48 +0530 Subject: [PATCH 8/8] Cleanup, minor fixes --- content/docs/getting-started.md | 68 ++++++++++++++++----------------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/content/docs/getting-started.md b/content/docs/getting-started.md index 07bb28b1e..9437345f8 100644 --- a/content/docs/getting-started.md +++ b/content/docs/getting-started.md @@ -18,109 +18,109 @@ redirect_from: - "docs/environments.html" --- -यह पेज React के दस्तावेज और उससे सम्बंधित साधनो का ओवरव्यू है | +यह पेज React के दस्तावेज और उससे सम्बंधित साधनो का ओवरव्यू है । -**React** उपयोगकर्ता इंटरफेस के निर्माण के लिए एक जावास्क्रिप्ट लाइब्रेरी है | React के बारे में जान्ने के लिए [हमारे होमपेज पर](/) या फिर [यह टुटोरिअल](/tutorial/tutorial.html) को देखें | +**React** उपयोगकर्ता इंटरफेस के निर्माण के लिए एक जावास्क्रिप्ट लाइब्रेरी है। React के बारे में जान्ने के लिए [हमारे होमपेज पर](/) या फिर [यह टुटोरिअल](/tutorial/tutorial.html) को देखें। --- - [React का प्रयोग करके देखें](#try-react) - [React सीखे](#learn-react) - [सूचित रहना](staying-informed) - - [वर्ज़न दस्तावेज़](#versioned-documentation) + - [वर्ज़न दस्तावेज़](#versioned-documentation) - [कुछ छूट रहा है क्या?](#something-missing ) ## React का प्रयोग करके देखें {#try-react} -React को धीरे-धीरे ग्रहण करने के लिए बनाया गया है, और **आप जितनी कम और ज्यादा चाहे उतनी React इस्तेमाल कर सकते है |** यदि आप React का नमूना देखना चाहें, अपने सरल HTML पेज में कुछ इंटरएक्टिविट डालना चाहें, या एक जटिल React-संचालित ऐप बनाना चाहे, इन सभी के लिए इस अनुभाग में दी गई लिंक्स आपकी सहायता करेंगी | +React को धीरे-धीरे ग्रहण करने के लिए बनाया गया है, और **आप जितनी कम और ज्यादा चाहे उतनी React इस्तेमाल कर सकते है।** यदि आप React का नमूना देखना चाहें, अपने सरल HTML पेज में कुछ इंटरएक्टिविट डालना चाहें, या एक जटिल React-संचालित ऐप बनाना चाहे, इन सभी के लिए इस अनुभाग में दी गई लिंक्स आपकी सहायता करेंगी। ### ऑनलाइन प्लेग्राउंड्स {#online-playgrounds} -अगर आप React को इस्तेमाल करने में रूचि रखतें है, तो आप एक ऑनलाइन कोड प्लेग्राउंड इस्तेमाल कर सकते है | आप [CodePen](codepen://hello-world) या [CodeSandbox](https://codesandbox.io/s/new) पर एक Hello World टेम्पलेट इस्तेमाल कर सकते हैं | +अगर आप React को इस्तेमाल करने में रूचि रखतें है, तो आप एक ऑनलाइन कोड प्लेग्राउंड इस्तेमाल कर सकते है। आप [CodePen](codepen://hello-world) या [CodeSandbox](https://codesandbox.io/s/new) पर एक Hello World टेम्पलेट इस्तेमाल कर सकते हैं। -अगर आप अपना Text Editor इस्तमाल करना चा रहे है, आप [इस HTML फाइल को डाउनलोड](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html) कर सकतें हैं, फिर आप उसे एडिट करके अपने लोकल फिलेसिस्टम से इसे अपने ब्राउज़र में खोल सकते हैं | यह रनटाइम कोड ट्रांसफॉर्मेशन को धीमे करता है, हम इसे खाली सरल डेमो के लिए ही इस्तेमाल करने का अनुग्रह करते हैं | +अगर आप अपना Text Editor इस्तमाल करना चा रहे है, आप [इस HTML फाइल को डाउनलोड](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html) कर सकतें हैं, फिर आप उसे एडिट करके अपने लोकल फिलेसिस्टम से इसे अपने ब्राउज़र में खोल सकते हैं। यह रनटाइम कोड ट्रांसफॉर्मेशन को धीमे करता है, हम इसे खाली सरल डेमो के लिए ही इस्तेमाल करने का अनुग्रह करते हैं। ### React को वेबसाइट में डालें {#add-react-to-a-website} -आप [React को अपने पेज में एक मिनट में डाल सकते हैं](/docs/add-react-to-a-website.html) | इसके बाद या तो आप इसे धीमे से बड़ाह सकते है या इसे कुछ ही डायनामिक widgets तक सीमित रख सकते हैं | +आप [React को अपने पेज में एक मिनट में डाल सकते हैं](/docs/add-react-to-a-website.html)। इसके बाद या तो आप इसे धीमे से बड़ाह सकते है या इसे कुछ ही डायनामिक widgets तक सीमित रख सकते हैं। ### नया React ऐप बनाए {#create-a-new-react-app} -जब आप नया React प्रोजेक्ट शुरू करते है, [एक सरल HTML पेज स्क्रिप्ट टैग्स के साथ](/docs/add-react-to-a-website.html) एक उत्तम विकल्प हो सकता है | इसे तैयार करने में सिर्फ एक मिनट लगता है! +जब आप नया React प्रोजेक्ट शुरू करते है, [एक सरल HTML पेज स्क्रिप्ट टैग्स के साथ](/docs/add-react-to-a-website.html) एक उत्तम विकल्प हो सकता है। इसे तैयार करने में सिर्फ एक मिनट लगता है! -जैसे आपकी एप्लीकेशन बड़ी होती जाती है, आप शायद एक ज़्यादा इंटीग्रेटेड सेटअप इस्तेमाल करना चाहेंगे | ऐसी [बहुत सारी जावास्क्रिप्ट टूलचैन हैं](/docs/create-a-new-react-app.html) जिन्हे हम बड़ी एप्लिकेशनों के साथ इस्तेमाल करने के लिए अनुरोध करते हैं | ये सारे थोड़ी या बिना कॉन्फ़िगरेशन के साथ आपको React के इकोसिस्टम का पूरा इस्तेमाल करने देते है | +जैसे आपकी एप्लीकेशन बड़ी होती जाती है, आप शायद एक ज़्यादा इंटीग्रेटेड सेटअप इस्तेमाल करना चाहेंगे। ऐसी [बहुत सारी जावास्क्रिप्ट टूलचैन हैं](/docs/create-a-new-react-app.html) जिन्हे हम बड़ी एप्लिकेशनों के साथ इस्तेमाल करने के लिए अनुरोध करते हैं। ये सारे थोड़ी या बिना कॉन्फ़िगरेशन के साथ आपको React के इकोसिस्टम का पूरा इस्तेमाल करने देते है। ## React सीखें {#learn-react} -लोग React सीखने अलग-अलग बैकग्राउंडस से आते हैं, उनके सिखने के ढंग भी अलग-अलग होते है | चाहे आप थेओरिटिकल ढंग से सीखना चाहे या प्रैक्टिकल से, हम आशा करते हैं कि यह अनुभाग आपके लिए मददगार साबित होगा | +लोग React सीखने अलग-अलग बैकग्राउंडस से आते हैं, उनके सिखने के ढंग भी अलग-अलग होते है। चाहे आप थेओरिटिकल ढंग से सीखना चाहे या प्रैक्टिकल से, हम आशा करते हैं कि यह अनुभाग आपके लिए मददगार साबित होगा। -* अगर आप **करके** सीखना पसंद करते हैं, तो हमारे [प्रैक्टिकल टुटोरिअल](/tutorial/tutorial.html) के साथ शुरू करें | -* अगर आप इस **कॉन्सेप्ट्स को स्टेप बाय स्टेप** सीखना पसंद करते हैं, हमारे [मुख्य धारणा कि गाइड](/docs/hello-world.html) से शुरू करें | +* अगर आप **करके** सीखना पसंद करते हैं, तो हमारे [प्रैक्टिकल टुटोरिअल](/tutorial/tutorial.html) के साथ शुरू करें। +* अगर आप इस **कॉन्सेप्ट्स को स्टेप बाय स्टेप** सीखना पसंद करते हैं, हमारे [मुख्य धारणा कि गाइड](/docs/hello-world.html) से शुरू करें। -किसी भी अनजान टेक्नोलॉजी की तरह React की भी एक सीखने की अवस्था है | अभ्यास और धीरज के साथ आपको *जल्द ही* React समझ में आजाएगी | +किसी भी अनजान टेक्नोलॉजी की तरह React की भी एक सीखने की अवस्था है। अभ्यास और धीरज के साथ आपको *जल्द ही* React समझ में आजाएगी। ### पहला उदहारण {#first-examples} -[React के होमपेज](/) में लाइव एडिटर के साथ React के कुछ छोटे उद्धरण हैं | अगर आप React के बारे में कुछ नहीं जानते तो कोड में कुछ बदलाव करके देखें कि वो कैसे परिणाम को बदलता है | +[React के होमपेज](/) में लाइव एडिटर के साथ React के कुछ छोटे उद्धरण हैं। अगर आप React के बारे में कुछ नहीं जानते तो कोड में कुछ बदलाव करके देखें कि वो कैसे परिणाम को बदलता है। ### शुरू करने वालों के लिए React {#react-for-beginners} -अगर आप को लगता है की React के दस्तावेज आपकी गति पर नहीं चल रहे तो [Tania Rascia के इस ओवरव्यू को देखें](https://www.taniarascia.com/getting-started-with-react/) | ये React के सबसे ज्यादा ज़रूरी कॉन्सेप्ट्स से आपका विस्तार और शुरुवातकर्ता-अनुकूल परिचय करता है | एक बार आप इसे पूरा करलें आप दस्तावेजों को दुबारा देख सकते हैं! +अगर आप को लगता है की React के दस्तावेज आपकी गति पर नहीं चल रहे तो [Tania Rascia के इस ओवरव्यू को देखें](https://www.taniarascia.com/getting-started-with-react/)। ये React के सबसे ज्यादा ज़रूरी कॉन्सेप्ट्स से आपका विस्तार और शुरुवातकर्ता-अनुकूल परिचय करता है। एक बार आप इसे पूरा करलें आप दस्तावेजों को दुबारा देख सकते हैं! -### डिज़ाइनरों के लिए React {#react-for-designers} +### डिज़ाइनरों के लिए React {#react-for-designers} -आगर आप डिज़ाइन बैकग्राउंड से आ रहे हैं, [ये साधन](https://reactfordesigners.com/) आपकी शुरुवात करने में मदद करेंगे | +आगर आप डिज़ाइन बैकग्राउंड से आ रहे हैं, [ये साधन](https://reactfordesigners.com/) आपकी शुरुवात करने में मदद करेंगे। -### जावास्क्रिप्ट के रिसोर्सेज़ {#javascript-resources} +### जावास्क्रिप्ट के रिसोर्सेज़ {#javascript-resources} -React के दस्तावेज़ मानते है की आपको जावास्क्रिप्ट लैंग्वेज की थोड़ी जानकारी है | आपको जावास्क्रिप्ट में माहिर होने कि ज़रूरत नहीं है, लेकिन जावास्क्रिप्ट और React को एक साथ सीखना मुश्किल हैं | +React के दस्तावेज़ मानते है की आपको जावास्क्रिप्ट लैंग्वेज की थोड़ी जानकारी है। आपको जावास्क्रिप्ट में माहिर होने कि ज़रूरत नहीं है, लेकिन जावास्क्रिप्ट और React को एक साथ सीखना मुश्किल हैं। -हम अनुरोध करते है की आप [इस जावास्क्रिप्ट के ओवरव्यू को देखे](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) ताकि आप अपने जानकारी के स्तर को आक सकें | इसमें आपको आधे से एक घंटा लगेगा लेकिन आप React सीखने में अधिक आत्मविश्वास महसूस करेंगे | +हम अनुरोध करते है की आप [इस जावास्क्रिप्ट के ओवरव्यू को देखे](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) ताकि आप अपने जानकारी के स्तर को आक सकें। इसमें आपको आधे से एक घंटा लगेगा लेकिन आप React सीखने में अधिक आत्मविश्वास महसूस करेंगे। >सुझाव > ->जब भी आप किसी जावास्क्रिप्ट की चीज़ की वजह से उलझन में पड जाएं तो [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) और [javascript.info](https://javascript.info/) जाँच करने के लिए बहुत अच्छी वेबसाइटस हैं | [कम्युनिटी सहायता मंच](/community/support.html) पे भी आप मदद माँग सकते हैं | +>जब भी आप किसी जावास्क्रिप्ट की चीज़ की वजह से उलझन में पड जाएं तो [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) और [javascript.info](https://javascript.info/) जाँच करने के लिए बहुत अच्छी वेबसाइटस हैं। [कम्युनिटी सहायता मंच](/community/support.html) पे भी आप मदद माँग सकते हैं। ### प्रैक्टिकल टुटोरिअल {#practical-tutorial} -अगर आप **कर के** सीखना पसंद करते हैं तो हमारा [प्रैक्टिकल टुटोरिअल देखें](/tutorial/tutorial.html). इस टुटोरिअल में हम एक टिक-टैक्-टो का गेम बनाएँगे | हो सकता है आपको ऐसा लगे की हमें ये छोड़ देना चाहिए क्योकि हम कोई गेम नहीं बना रहे -- लेकिन इसे एक मौका दें | इसमें सीखी गई विधियां *किसी भी* React ऐप को बनाने में काम आएगी, और इसका अच्छा अभ्यास आपको React की गहरी समझ देगा | +अगर आप **कर के** सीखना पसंद करते हैं तो हमारा [प्रैक्टिकल टुटोरिअल देखें](/tutorial/tutorial.html). इस टुटोरिअल में हम एक टिक-टैक्-टो का गेम बनाएँगे। हो सकता है आपको ऐसा लगे की हमें ये छोड़ देना चाहिए क्योकि हम कोई गेम नहीं बना रहे -- लेकिन इसे एक मौका दें। इसमें सीखी गई विधियां *किसी भी* React ऐप को बनाने में काम आएगी, और इसका अच्छा अभ्यास आपको React की गहरी समझ देगा। ### स्टेप-बाय-स्टेप गाइड {#step-by-step-guide} -अगर आप React के **कांसेप्ट को स्टेप-बाय-स्टेप सीखना** पसंद करते हैं तो हमारी [मुख्य कॉन्सेप्ट्स की गाइड](/docs/hello-world.html) शुरू करने की लिए एक उत्तम जगह है | इसमें हर अगला अध्याय पिछले अध्यायों पर बना है तो इससे आप से कुछ छूटेगा नहीं | +अगर आप React के **कांसेप्ट को स्टेप-बाय-स्टेप सीखना** पसंद करते हैं तो हमारी [मुख्य कॉन्सेप्ट्स की गाइड](/docs/hello-world.html) शुरू करने की लिए एक उत्तम जगह है। इसमें हर अगला अध्याय पिछले अध्यायों पर बना है तो इससे आप से कुछ छूटेगा नहीं। ### React में सोचें {#thinking-in-react} -बहुत सारे React के यूज़र्स [React में सोचे](/docs/thinking-in-react.html) पढ़ने को उनकी React की समझ बढ़ाने में मदद करने का क्रेडिट देते हैं, वह समझते हैं की इसको पढ़ने के बाद ही उन्हें React समझ में आई | ये React के सबसे पुराने वॉकथ्रू में से एक है लेकिन यह अभी भी उतना ही उचित है। +बहुत सारे React के यूज़र्स [React में सोचे](/docs/thinking-in-react.html) पढ़ने को उनकी React की समझ बढ़ाने में मदद करने का क्रेडिट देते हैं, वह समझते हैं की इसको पढ़ने के बाद ही उन्हें React समझ में आई। ये React के सबसे पुराने वॉकथ्रू में से एक है लेकिन यह अभी भी उतना ही उचित है। ### रेकमेंडेड कोर्सेज {#recommended-courses} -कभी-कभी लोगों को अन्य पार्टियों कि किताबें और वीडियो कोर्सेज़ ऑफिसियल दस्तावेज़ों से ज़्यादा मददगार लगती है | हम एक [आम तौर पर इस्तेमाल करे जाने वाले साधनो की सूचि](/community/courses.html) बनाए रखते हैं, जिनमे से कुछ मुफ्त हैं | +कभी-कभी लोगों को अन्य पार्टियों कि किताबें और वीडियो कोर्सेज़ ऑफिसियल दस्तावेज़ों से ज़्यादा मददगार लगती है। हम एक [आम तौर पर इस्तेमाल करे जाने वाले साधनो की सूचि](/community/courses.html) बनाए रखते हैं, जिनमे से कुछ मुफ्त हैं। ### एडवांस्ड कॉन्सेप्ट्स {#advanced-concepts} -जब आप [मुख्य कॉन्सेप्ट्स](/docs/hello-world.html) के साथ सहज महसूस करना शुरू कर दें और React का थोड़ा अभ्यास करलें, हो सकता है आपको एडवांस्ड विषयों में भी दिलचस्पी हों | यह भाग आपको ताकतवर लेकिन कम इस्तेमाल किये जाने वाली React की खासियत जैसे कि [context](/docs/context.html) और [refs](/docs/refs-and-the-dom.html) से आपका परिचय करवाएगा। +जब आप [मुख्य कॉन्सेप्ट्स](/docs/hello-world.html) के साथ सहज महसूस करना शुरू कर दें और React का थोड़ा अभ्यास करलें, हो सकता है आपको एडवांस्ड विषयों में भी दिलचस्पी हों। यह भाग आपको ताकतवर लेकिन कम इस्तेमाल किये जाने वाली React की खासियत जैसे कि [context](/docs/context.html) और [refs](/docs/refs-and-the-dom.html) से आपका परिचय करवाएगा। ### API रिफरेन्स {#api-reference} -अगर आप किसी विशेष React API के बारे में और जानना चाह रहें हैं यह दस्तावेज़ का भाग आपके काम आएगा | उदहारण के लिए, [`React.Component` API रिफरेन्स](/docs/react-component.html) आपको `setState()` कैसे काम करता है, और दूसरे लाइफसाइकिल मेथड्स किस काम के हैं इनपर आपको विवरण दे सखता है | +अगर आप किसी विशेष React API के बारे में और जानना चाह रहें हैं यह दस्तावेज़ का भाग आपके काम आएगा। उदहारण के लिए, [`React.Component` API रिफरेन्स](/docs/react-component.html) आपको `setState()` कैसे काम करता है, और दूसरे लाइफसाइकिल मेथड्स किस काम के हैं इनपर आपको विवरण दे सखता है। ### शब्दकोष और FAQ {#glossary-and-faq} -यह [शब्दकोष](/docs/glossary.html) React के दस्तावेज़ों में सबसे ज़्यादा बार आने वाले शब्दों का एक ओवरव्यू है | [AJAX रिक्वैस्ट करना](/docs/faq-ajax.html), [कॉम्पोनेन्ट state](/docs/faq-state.html), और [फाइल स्ट्रक्चर](/docs/faq-structure.html) के साथ यहाँ सामान्य विषयों के बारे में छोटे प्रशनों और उत्तरों के लिए एक FAQ सेक्शन भी है | +यह [शब्दकोष](/docs/glossary.html) React के दस्तावेज़ों में सबसे ज़्यादा बार आने वाले शब्दों का एक ओवरव्यू है। [AJAX रिक्वैस्ट करना](/docs/faq-ajax.html), [कॉम्पोनेन्ट state](/docs/faq-state.html), और [फाइल स्ट्रक्चर](/docs/faq-structure.html) के साथ यहाँ सामान्य विषयों के बारे में छोटे प्रशनों और उत्तरों के लिए एक FAQ सेक्शन भी है। ## जागृत रहें {#staying-informed} -[React ब्लॉग](/blog/) React टीम के द्वारा अपडेट्स के लिए एक ओफ़िशिअल स्रोत है, इसमें कोई भी आवशयक सूचना जैसे की रिलीज़ नोट्स और डेप्रिसिएशन की सूचनाए सबसे पहले आती हैं | +[React ब्लॉग](/blog/) React टीम के द्वारा अपडेट्स के लिए एक ओफ़िशिअल स्रोत है, इसमें कोई भी आवशयक सूचना जैसे की रिलीज़ नोट्स और डेप्रिसिएशन की सूचनाए सबसे पहले आती हैं। -आप ट्विटर पर [@reactjs का अकाउंट](https://twitter.com/reactjs) भी फॉलो कर सकते हैं, लेकिन अगर आप हमारा ब्लॉग पढ़ते हैं तो आप कोई ज़रूरी चीज़ नहीं छोड़ेंगे | +आप ट्विटर पर [@reactjs का अकाउंट](https://twitter.com/reactjs) भी फॉलो कर सकते हैं, लेकिन अगर आप हमारा ब्लॉग पढ़ते हैं तो आप कोई ज़रूरी चीज़ नहीं छोड़ेंगे। -हर React रिलीज़ अपने ब्लॉग पोस्ट के लायक नहीं होती है लेकिन हर रिलीज़ का पूरा चेंज लोग आपको [`CHANGELOG.md` फाइल जो React की रिपॉजिटरी में है](https://github.com/facebook/react/blob/master/CHANGELOG.md) या [Release](https://github.com/facebook/react/releases) पेज पर मिल जाएगा | +हर React रिलीज़ अपने ब्लॉग पोस्ट के लायक नहीं होती है लेकिन हर रिलीज़ का पूरा चेंज लोग आपको [`CHANGELOG.md` फाइल जो React की रिपॉजिटरी में है](https://github.com/facebook/react/blob/master/CHANGELOG.md) या [Release](https://github.com/facebook/react/releases) पेज पर मिल जाएगा। -## वर्ज़न्ड दस्तावेज़ {#versioned-documentation} +## वर्ज़न्ड दस्तावेज़ {#versioned-documentation} -ये दस्तावेज़ हमेशा React के लेटेस्ट स्टेबल वर्ज़न पे आधारित होते हैं | आप React 16 के बाद के सारे दस्तावेज़ एक [अलग पेज पर](/versions) पर पा सकते हैं | ध्यान दें की सारे पिछले वर्ज़न अपने रिलीज़ के समय जैसे थे वैसे ही हैं और इनमें लगातार बदलाव नहीं किये जाते | +ये दस्तावेज़ हमेशा React के लेटेस्ट स्टेबल वर्ज़न पे आधारित होते हैं। आप React 16 के बाद के सारे दस्तावेज़ एक [अलग पेज पर](/versions) पर पा सकते हैं। ध्यान दें की सारे पिछले वर्ज़न अपने रिलीज़ के समय जैसे थे वैसे ही हैं और इनमें लगातार बदलाव नहीं किये जाते। ## क्या कुछ छूट रहा है? {#something-missing} -अगर आप को लग रहा है की इन दस्तावेज़ों में कुछ छूटा है या आपको कुछ समझ नहीं आ रहा है तो कृपया अपने सुझाव के साथ [दस्तावेज़ रिपॉजिटरी में एक इशू दर्ज करें](https://github.com/reactjs/reactjs.org/issues/new) ताकि हम सुधार की ओर बढ़ सकें, या फिर आप [@reactjs के अकाउंट](https://twitter.com/reactjs) पर ट्वीट भी कर सकते हैं | हम आपसे सुन्ना बेहद पसंद करेंगे | +अगर आप को लग रहा है की इन दस्तावेज़ों में कुछ छूटा है या आपको कुछ समझ नहीं आ रहा है तो कृपया अपने सुझाव के साथ [दस्तावेज़ रिपॉजिटरी में एक इशू दर्ज करें](https://github.com/reactjs/reactjs.org/issues/new) ताकि हम सुधार की ओर बढ़ सकें, या फिर आप [@reactjs के अकाउंट](https://twitter.com/reactjs) पर ट्वीट भी कर सकते हैं। हम आपसे सुन्ना बेहद पसंद करेंगे।