From 76cbfce824fcefc57c0a2f408a53b969cd699525 Mon Sep 17 00:00:00 2001 From: Anchal Agarwal Date: Fri, 11 Oct 2019 23:03:59 +0530 Subject: [PATCH 01/11] Update faq-structure --- content/docs/faq-structure.md | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/content/docs/faq-structure.md b/content/docs/faq-structure.md index 4241a04dd..90e7b3d80 100644 --- a/content/docs/faq-structure.md +++ b/content/docs/faq-structure.md @@ -6,13 +6,13 @@ layout: docs category: FAQ --- -### Is there a recommended way to structure React projects? {#is-there-a-recommended-way-to-structure-react-projects} +### क्या रियेक्ट प्रोजेक्ट्स की संरचना का अनुशंसित तरीका है? {#is-there-a-recommended-way-to-structure-react-projects} -React doesn't have opinions on how you put files into folders. That said there are a few common approaches popular in the ecosystem you may want to consider. +रियेक्ट को यह नहीं पता कि आप फ़ाइलों को फ़ोल्डर्स में कैसे डालते हैं। आप जिस पारिस्थितिकी तंत्र पर विचार करना चाहते हैं, उसमें कुछ सामान्य दृष्टिकोण लोकप्रिय हैं। -#### Grouping by features or routes {#grouping-by-features-or-routes} +#### फीचर्स या रुट्स द्वारा समूहीकरण {#grouping-by-features-or-routes} -One common way to structure projects is locate CSS, JS, and tests together inside folders grouped by feature or route. +प्रोजेक्ट्स की संरचना का एक सामान्य तरीका सीएसएस, जेएस का पता लगाकर,फ़ीचर या मार्ग द्वारा समूहीकृत फ़ोल्डर के अंदर एक साथ परीक्षण करना हैं। ``` common/ @@ -35,11 +35,11 @@ profile/ ProfileAPI.js ``` -The definition of a "feature" is not universal, and it is up to you to choose the granularity. If you can't come up with a list of top-level folders, you can ask the users of your product what major parts it consists of, and use their mental model as a blueprint. +"फीचर" की परिभाषा सार्वभौमिक नहीं है, और यह आप पर निर्भर है कि आप किस विवरण का चयन करते हैं। यदि आप शीर्ष स्तर के फ़ोल्डरों की सूची के साथ नहीं आ सकते हैं, तो आप अपने उत्पाद के उपयोगकर्ताओं से पूछ सकते हैं कि इसमें कौन से प्रमुख भाग हैं, और उनके मानसिक मॉडल का ब्लूप्रिंट के रूप में उपयोग कर सकते हैं। -#### Grouping by file type {#grouping-by-file-type} +#### फ़ाइल प्रकार द्वारा समूहीकरण {#grouping-by-file-type} -Another popular way to structure projects is to group similar files together, for example: +परियोजनाओं के लिए एक और लोकप्रिय तरीका समान फ़ाइलों को एक साथ समूहित करना है, उदाहरण के लिए: ``` api/ @@ -59,16 +59,17 @@ components/ ProfileHeader.css ``` -Some people also prefer to go further, and separate components into different folders depending on their role in the application. For example, [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) is a design methodology built on this principle. Remember that it's often more productive to treat such methodologies as helpful examples rather than strict rules to follow. +कुछ लोग गहराई में जाना पसंद करते हैं, और कॉम्पोनेन्ट को उनकी भूमिका के आधार पर विभिन्न फ़ोल्डर्स में अलग अलग करते हैं। उदाहरण के लिए, [परमाणु डिजाइन](http://bradfrost.com/blog/post/atomic-web-design/) इस सिद्धांत पर निर्मित एक डिजाइन पद्धति है। याद रखें कि इस तरह की कार्यप्रणालियों को व्यवहार में लाने के लिए अक्सर सख्त नियमों के बजाय सहायक उदाहरणों का उपयोग करना अधिक लाभदायक होता है। -#### Avoid too much nesting {#avoid-too-much-nesting} +#### बहुत ज्यादा नेस्टिंग से बचें {#avoid-too-much-nesting} -There are many pain points associated with deep directory nesting in JavaScript projects. It becomes harder to write relative imports between them, or to update those imports when the files are moved. Unless you have a very compelling reason to use a deep folder structure, consider limiting yourself to a maximum of three or four nested folders within a single project. Of course, this is only a recommendation, and it may not be relevant to your project. +जावास्क्रिप्ट प्रोजेक्ट्स में डीप डायरेक्टरी नेस्टिंग को लेकर काफी समस्याएं हैं। जब फाइल्स को मूव कराते हैं तब उनके बीच सापेक्ष इम्पोर्ट्स लिखना या उन इम्पोर्ट्स को अपडेट करना मुश्किल हो जाता है। जब तक आपके पास एक गहरी फ़ोल्डर संरचना का उपयोग करने के लिए एक बहुत ही सम्मोहक कारण नहीं है, तब तक अपने आप को एक ही प्रोजेक्ट के भीतर अधिकतम तीन या चार नेस्टेड फ़ोल्डरों तक सीमित करने पर विचार करें। बेशक, यह केवल एक सिफारिश है, और यह आपके प्रोजेक्ट के लिए प्रासंगिक नहीं हो सकता है। -#### Don't overthink it {#dont-overthink-it} +#### ज्यादा न सोचें {#dont-overthink-it} -If you're just starting a project, [don't spend more than five minutes](https://en.wikipedia.org/wiki/Analysis_paralysis) on choosing a file structure. Pick any of the above approaches (or come up with your own) and start writing code! You'll likely want to rethink it anyway after you've written some real code. +यदि आप एक प्रोजेक्ट शुरू कर रहें हैं, तो फ़ाइल संरचना चुनने के लिए [पांच मिनट से अधिक समय न लगाएं।](https://en.wikipedia.org/wiki/Analysis_paralysis) +उपरोक्त किसी भी दृष्टिकोण को चुनें (या अपने स्वयं के साथ आएं) और कोड लिखना शुरू करें! आपके द्वारा कुछ वास्तविक कोड लिखे जाने के बाद, आप इसे वैसे भी पुनर्विचार करना चाहेंगे। -If you feel completely stuck, start by keeping all files in a single folder. Eventually it will grow large enough that you will want to separate some files from the rest. By that time you'll have enough knowledge to tell which files you edit together most often. In general, it is a good idea to keep files that often change together close to each other. This principle is called "colocation". +यदि आप पूरी तरह से फंसे हुए महसूस करते हैं, तो सभी फ़ाइलों को एक फ़ोल्डर में रखकर शुरू करें। आखिरकार यह काफी बड़ा हो जाएगा कि आप कुछ फ़ाइलों को बाकी हिस्सों से अलग करना चाहेंगे। उस समय तक आपको यह पर्याप्त ज्ञान होगा कि आप यह बता सकेंगे की आप किन फ़ाइलों को अक्सर एक साथ संपादित करते हैं। सामान्य तौर पर, फाइलों को रखना एक अच्छा विचार है जो अक्सर एक-दूसरे के करीब बदल जाते हैं। इस सिद्धांत को "कोलोकेशन" कहा जाता है। -As projects grow larger, they often use a mix of both of the above approaches in practice. So choosing the "right" one in the beginning isn't very important. +जैसे-जैसे प्रोजेक्ट बड़े होते हैं, वे अक्सर अभ्यास में उपरोक्त दोनों दृष्टिकोणों के मिश्रण का उपयोग करते हैं। इसलिए शुरुआत में किसी एक को "सही" चुनना बहुत महत्वपूर्ण नहीं है। From 7547e40c9a0f942d4ddb5df272fbbe501f6167b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=A4nchal7299?= Date: Tue, 22 Oct 2019 19:35:36 +0530 Subject: [PATCH 02/11] updating faq-structure --- content/docs/faq-structure.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/content/docs/faq-structure.md b/content/docs/faq-structure.md index 90e7b3d80..0290bc814 100644 --- a/content/docs/faq-structure.md +++ b/content/docs/faq-structure.md @@ -6,13 +6,13 @@ layout: docs category: FAQ --- -### क्या रियेक्ट प्रोजेक्ट्स की संरचना का अनुशंसित तरीका है? {#is-there-a-recommended-way-to-structure-react-projects} +### क्या React प्रोजेक्ट्स की संरचना का अनुशंसित तरीका है? {#is-there-a-recommended-way-to-structure-react-projects} -रियेक्ट को यह नहीं पता कि आप फ़ाइलों को फ़ोल्डर्स में कैसे डालते हैं। आप जिस पारिस्थितिकी तंत्र पर विचार करना चाहते हैं, उसमें कुछ सामान्य दृष्टिकोण लोकप्रिय हैं। +React को यह नहीं पता कि आप फ़ाइलों को फ़ोल्डर्स में कैसे डालते हैं। आप जिस इकोसिस्टम पर विचार करना चाहते हैं, उसमें कुछ सामान्य दृष्टिकोण लोकप्रिय हैं। -#### फीचर्स या रुट्स द्वारा समूहीकरण {#grouping-by-features-or-routes} +#### फीचर्स या रआउट्स द्वारा समूहीकरण {#grouping-by-features-or-routes} -प्रोजेक्ट्स की संरचना का एक सामान्य तरीका सीएसएस, जेएस का पता लगाकर,फ़ीचर या मार्ग द्वारा समूहीकृत फ़ोल्डर के अंदर एक साथ परीक्षण करना हैं। +प्रोजेक्ट्स की संरचना का एक सामान्य तरीका CSS, JS का पता लगाकर, फ़ीचर या रआउट्स द्वारा समूहीकृत फ़ोल्डर के अंदर एक साथ परीक्षण करना हैं। ``` common/ @@ -39,7 +39,7 @@ profile/ #### फ़ाइल प्रकार द्वारा समूहीकरण {#grouping-by-file-type} -परियोजनाओं के लिए एक और लोकप्रिय तरीका समान फ़ाइलों को एक साथ समूहित करना है, उदाहरण के लिए: + प्रोजेक्ट्स के लिए एक और लोकप्रिय तरीका समान फ़ाइलों को एक साथ समूहित करना है, उदाहरण के लिए: ``` api/ @@ -59,17 +59,16 @@ components/ ProfileHeader.css ``` -कुछ लोग गहराई में जाना पसंद करते हैं, और कॉम्पोनेन्ट को उनकी भूमिका के आधार पर विभिन्न फ़ोल्डर्स में अलग अलग करते हैं। उदाहरण के लिए, [परमाणु डिजाइन](http://bradfrost.com/blog/post/atomic-web-design/) इस सिद्धांत पर निर्मित एक डिजाइन पद्धति है। याद रखें कि इस तरह की कार्यप्रणालियों को व्यवहार में लाने के लिए अक्सर सख्त नियमों के बजाय सहायक उदाहरणों का उपयोग करना अधिक लाभदायक होता है। +कुछ लोग गहराई में जाना पसंद करते हैं, और कॉम्पोनेन्ट को उनकी भूमिका के आधार पर विभिन्न फ़ोल्डर्स में अलग अलग करते हैं। उदाहरण के लिए, [एटॉमिक डिजाइन](http://bradfrost.com/blog/post/atomic-web-design/) इस सिद्धांत पर निर्मित एक डिजाइन पद्धति है। याद रखें कि इस तरह की कार्यप्रणालियों को व्यवहार में लाने के लिए अक्सर सख्त नियमों के बजाय सहायक उदाहरणों का उपयोग करना अधिक लाभदायक होता है। #### बहुत ज्यादा नेस्टिंग से बचें {#avoid-too-much-nesting} जावास्क्रिप्ट प्रोजेक्ट्स में डीप डायरेक्टरी नेस्टिंग को लेकर काफी समस्याएं हैं। जब फाइल्स को मूव कराते हैं तब उनके बीच सापेक्ष इम्पोर्ट्स लिखना या उन इम्पोर्ट्स को अपडेट करना मुश्किल हो जाता है। जब तक आपके पास एक गहरी फ़ोल्डर संरचना का उपयोग करने के लिए एक बहुत ही सम्मोहक कारण नहीं है, तब तक अपने आप को एक ही प्रोजेक्ट के भीतर अधिकतम तीन या चार नेस्टेड फ़ोल्डरों तक सीमित करने पर विचार करें। बेशक, यह केवल एक सिफारिश है, और यह आपके प्रोजेक्ट के लिए प्रासंगिक नहीं हो सकता है। -#### ज्यादा न सोचें {#dont-overthink-it} +#### ज़रूरत से ज्यादा न सोचें {#dont-overthink-it} -यदि आप एक प्रोजेक्ट शुरू कर रहें हैं, तो फ़ाइल संरचना चुनने के लिए [पांच मिनट से अधिक समय न लगाएं।](https://en.wikipedia.org/wiki/Analysis_paralysis) +यदि आप एक प्रोजेक्ट शुरू कर रहें हैं, तो फ़ाइल संरचना चुनने के लिए [पांच मिनट से अधिक समय न लगाएं](https://en.wikipedia.org/wiki/Analysis_paralysis) । उपरोक्त किसी भी दृष्टिकोण को चुनें (या अपने स्वयं के साथ आएं) और कोड लिखना शुरू करें! आपके द्वारा कुछ वास्तविक कोड लिखे जाने के बाद, आप इसे वैसे भी पुनर्विचार करना चाहेंगे। - -यदि आप पूरी तरह से फंसे हुए महसूस करते हैं, तो सभी फ़ाइलों को एक फ़ोल्डर में रखकर शुरू करें। आखिरकार यह काफी बड़ा हो जाएगा कि आप कुछ फ़ाइलों को बाकी हिस्सों से अलग करना चाहेंगे। उस समय तक आपको यह पर्याप्त ज्ञान होगा कि आप यह बता सकेंगे की आप किन फ़ाइलों को अक्सर एक साथ संपादित करते हैं। सामान्य तौर पर, फाइलों को रखना एक अच्छा विचार है जो अक्सर एक-दूसरे के करीब बदल जाते हैं। इस सिद्धांत को "कोलोकेशन" कहा जाता है। +यदि आप पूरी तरह से फंसे हुए महसूस करते हैं, तो सभी फ़ाइलों को एक फ़ोल्डर में रखकर शुरू करें। आखिरकार यह काफी बड़ा हो जाएगा कि आप कुछ फ़ाइलों को बाकी हिस्सों से अलग करना चाहेंगे। उस समय तक आपको यह पर्याप्त ज्ञान होगा कि आप यह बता सकेंगे की आप किन फ़ाइलों पर अक्सर काम करते हैं। सामान्य तौर पर, फाइलों को रखना एक अच्छा विचार है जो अक्सर एक-दूसरे के करीब बदल जाते हैं। इस सिद्धांत को "कोलोकेशन" कहा जाता है। जैसे-जैसे प्रोजेक्ट बड़े होते हैं, वे अक्सर अभ्यास में उपरोक्त दोनों दृष्टिकोणों के मिश्रण का उपयोग करते हैं। इसलिए शुरुआत में किसी एक को "सही" चुनना बहुत महत्वपूर्ण नहीं है। From 8d65ca5545e1ab3753594eef9fbd3d77e45b19f8 Mon Sep 17 00:00:00 2001 From: Robert Haritonov Date: Mon, 14 Oct 2019 22:11:50 +0100 Subject: [PATCH 03/11] Add React Summit Amsterdam 2020, and update conf domain (#2423) --- content/community/conferences.md | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/content/community/conferences.md b/content/community/conferences.md index 0e129a5b2..a18c66ad1 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -37,6 +37,11 @@ February 27 & 28, 2020 in Sydney, Australia [Website](https://reactconfau.com/) - [Twitter](https://twitter.com/reactconfau) - [Facebook](https://www.facebook.com/reactconfau) - [Instagram](https://www.instagram.com/reactconfau/) +### React Summit Amsterdam 2020 {#react-summit-2020} +April 15-17, 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) + ### Render-Atlanta 2020 {#render-atlanta-2020} May 4-6, 2020. Atlanta, GA, USA. @@ -90,7 +95,7 @@ February 22 & 23 in San Francisco, CA ### React Amsterdam 2016 {#react-amsterdam-2016} April 16 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) +[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences) ### ReactEurope 2016 {#reacteurope-2016} June 2 & 3 in Paris, France @@ -140,7 +145,7 @@ March 28th at the [QEII Centre, London](http://qeiicentre.london/) ### React Amsterdam 2017 {#react-amsterdam-2017} April 21st in Amsterdam, The Netherlands -[Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences) +[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences) ### ReactEurope 2017 {#reacteurope-2017} May 18th & 19th in Paris, France @@ -245,7 +250,7 @@ March 31 in Kiev, Ukraine ### React Amsterdam 2018 {#react-amsterdam-2018} April 13 in Amsterdam, The Netherlands -[Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) +[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) ### React Finland 2018 {#react-finland-2018} April 24-26 in Helsinki, Finland @@ -350,7 +355,7 @@ 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) +[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences) ### React Finland 2019 {#react-finland-2019} April 24-26 in Helsinki, Finland From 0507cc921929dcb78e12f6811b8cbe8494227c94 Mon Sep 17 00:00:00 2001 From: Tom Beckenhauer Date: Wed, 16 Oct 2019 03:51:26 -0400 Subject: [PATCH 04/11] Update meetups.md (#2439) --- content/community/meetups.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/content/community/meetups.md b/content/community/meetups.md index 074440cff..78bcf1dd6 100644 --- a/content/community/meetups.md +++ b/content/community/meetups.md @@ -131,6 +131,8 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [Austin, TX - ReactJS](https://www.meetup.com/ReactJS-Austin-Meetup/) * [Boston, MA - ReactJS](https://www.meetup.com/ReactJS-Boston/) * [Boston, MA - React Native](https://www.meetup.com/Boston-React-Native-Meetup/) +* [Charlotte, NC - ReactJS](https://www.meetup.com/ReactJS-Charlotte/) +* [Charlotte, NC - React Native](https://www.meetup.com/cltreactnative/) * [Chicago, IL - ReactJS](https://www.meetup.com/React-Chicago/) * [Columbus, OH - ReactJS](https://www.meetup.com/ReactJS-Columbus-meetup/) * [Dallas, TX - ReactJS](https://www.meetup.com/ReactDallas/) From 32cb00663766c1197a499b7c6945dbe86aa49ebf Mon Sep 17 00:00:00 2001 From: Adebayo Ilerioluwa <46798106+adebayoileri@users.noreply.github.com> Date: Thu, 17 Oct 2019 19:20:58 +0100 Subject: [PATCH 05/11] Update conferences.md (#2445) Added reactsummit from nigeria --- content/community/conferences.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/content/community/conferences.md b/content/community/conferences.md index a18c66ad1..77ccf89d2 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -12,6 +12,11 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c ## Upcoming Conferences {#upcoming-conferences} +### React Summit 2019 {#reactsummit2019} +November 30, 2019 in Lagos, Nigeria + +[Website](https://reactsummit2019.splashthat.com) -[Twitter](https://twitter.com/react_summit) + ### React Conf 2019 {#react-conf-2019} October 24-25, 2019 in Henderson, Nevada USA From 7c1e9dfff49326a887e8ca000a6aad719a2eac37 Mon Sep 17 00:00:00 2001 From: mvikrammenon Date: Thu, 17 Oct 2019 16:25:55 -0700 Subject: [PATCH 06/11] Updated URL with page section (#2446) --- content/docs/uncontrolled-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/uncontrolled-components.md b/content/docs/uncontrolled-components.md index 10b6eab28..54b729e96 100644 --- a/content/docs/uncontrolled-components.md +++ b/content/docs/uncontrolled-components.md @@ -4,7 +4,7 @@ title: Uncontrolled Components permalink: docs/uncontrolled-components.html --- -In most cases, we recommend using [controlled components](/docs/forms.html) to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself. +In most cases, we recommend using [controlled components](/docs/forms.html#controlled-components) to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself. To write an uncontrolled component, instead of writing an event handler for every state update, you can [use a ref](/docs/refs-and-the-dom.html) to get form values from the DOM. From 686b25a0dc675d8d750de65505790248921aee33 Mon Sep 17 00:00:00 2001 From: Eugene Stepnov Date: Sat, 19 Oct 2019 11:23:41 +0300 Subject: [PATCH 07/11] Update tool-ui-component.md (#2447) Add a link to Flatlogic React admin templates. --- content/community/tools-ui-components.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/community/tools-ui-components.md b/content/community/tools-ui-components.md index fe3d4953d..7b0e59ce9 100644 --- a/content/community/tools-ui-components.md +++ b/content/community/tools-ui-components.md @@ -82,3 +82,4 @@ permalink: community/ui-components.html * **[KendoReact](https://www.telerik.com/kendo-react-ui/)**: UI for React Developers. * **[Mobiscroll React UI Components](https://mobiscroll.com/react)** Mobile UI Controls for the Productive React Developer. * **[React UI Toolkit](https://react-ui-tools.com/)**: 115+ professionally maintainted UI components ranging from a robust grid to charts and more. Try for FREE and build React apps faster. +* **[Flatlogic React Admin Templates](https://flatlogic.com/templates/react)** 5+ Paid and Free React Admin templates with a lot of components to speed up web development. No jQuery. From 1140e9e30a6b1037b05d381ab7ef5c29510b00ea Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sun, 20 Oct 2019 01:38:56 +0300 Subject: [PATCH 08/11] Specify lang option for gatsby-plugin-manifest --- gatsby-config.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/gatsby-config.js b/gatsby-config.js index 15ef0a53b..2637eac97 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -163,7 +163,9 @@ module.exports = { resolve: `gatsby-plugin-manifest`, options: { name: 'React Docs', - short_name: 'React', + short_name: 'React', // eg. React [%LANG_CODE%] + // Translators: please change this and two above options (see https://www.gatsbyjs.org/packages/gatsby-plugin-manifest/#feature-configuration---optional) + lang: 'en', start_url: '/', background_color: '#20232a', theme_color: '#20232a', From ca2532f6fc3943a5a82a8631c95fe958845c31a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=A4nchal7299?= Date: Sun, 20 Oct 2019 14:43:14 +0530 Subject: [PATCH 09/11] new changes in structure --- accessibility.md | 519 +++++++++ add-react-to-a-website.md | 202 ++++ addons-animation.md | 349 ++++++ addons-create-fragment.md | 68 ++ addons-perf.md | 148 +++ addons-pure-render-mixin.md | 44 + addons-shallow-compare.md | 44 + addons-shallow-renderer.md | 68 ++ addons-test-utils.md | 351 ++++++ addons-two-way-binding-helpers.md | 131 +++ addons-update.md | 117 ++ addons.md | 49 + cdn-links.md | 37 + code-splitting.md | 250 +++++ codebase-overview.md | 226 ++++ components-and-props.md | 263 +++++ composition-vs-inheritance.md | 172 +++ conditional-rendering.md | 243 ++++ context.md | 266 +++++ create-a-new-react-app.md | 94 ++ cross-origin-errors.md | 41 + design-principles.md | 163 +++ error-boundaries.md | 166 +++ error-decoder.md | 9 + faq-ajax.md | 84 ++ faq-build.md | 32 + faq-functions.md | 354 ++++++ faq-internals.md | 23 + faq-state.md | 106 ++ faq-structure.md | 74 ++ faq-styling.md | 51 + faq-versioning.md | 64 ++ forms.md | 298 +++++ forwarding-refs.md | 76 ++ fragments.md | 140 +++ getting-started.md | 126 +++ handling-events.md | 154 +++ hello-world.md | 49 + higher-order-components.md | 399 +++++++ hooks-custom.md | 252 +++++ hooks-effect.md | 489 ++++++++ hooks-faq.md | 1000 +++++++++++++++++ hooks-intro.md | 111 ++ hooks-overview.md | 272 +++++ hooks-reference.md | 463 ++++++++ hooks-rules.md | 138 +++ hooks-state.md | 280 +++++ how-to-contribute.md | 184 +++ implementation-notes.md | 898 +++++++++++++++ integrating-with-other-libraries.md | 439 ++++++++ introducing-jsx.md | 184 +++ jsx-in-depth.md | 461 ++++++++ legacy-context.md | 217 ++++ lifting-state-up.md | 330 ++++++ lists-and-keys.md | 301 +++++ nav.yml | 163 +++ optimizing-performance.md | 384 +++++++ portals.md | 154 +++ react-without-es6.md | 225 ++++ react-without-jsx.md | 59 + reconciliation.md | 157 +++ reference-dom-elements.md | 196 ++++ reference-events.md | 389 +++++++ reference-glossary.md | 166 +++ ...nce-javascript-environment-requirements.md | 31 + reference-profiler.md | 119 ++ reference-pure-render-mixin.md | 51 + reference-react-component.md | 642 +++++++++++ reference-react-dom-server.md | 92 ++ reference-react-dom.md | 114 ++ reference-react.md | 360 ++++++ reference-test-renderer.md | 314 ++++++ refs-and-the-dom.md | 290 +++++ render-props.md | 325 ++++++ rendering-elements.md | 76 ++ state-and-lifecycle.md | 467 ++++++++ static-type-checking.md | 333 ++++++ strict-mode.md | 124 ++ testing-environments.md | 58 + testing-recipes.md | 626 +++++++++++ testing.md | 40 + thinking-in-react.md | 146 +++ typechecking-with-proptypes.md | 196 ++++ uncontrolled-components.md | 84 ++ web-components.md | 62 + 85 files changed, 18512 insertions(+) create mode 100644 accessibility.md create mode 100644 add-react-to-a-website.md create mode 100644 addons-animation.md create mode 100644 addons-create-fragment.md create mode 100644 addons-perf.md create mode 100644 addons-pure-render-mixin.md create mode 100644 addons-shallow-compare.md create mode 100644 addons-shallow-renderer.md create mode 100644 addons-test-utils.md create mode 100644 addons-two-way-binding-helpers.md create mode 100644 addons-update.md create mode 100644 addons.md create mode 100644 cdn-links.md create mode 100644 code-splitting.md create mode 100644 codebase-overview.md create mode 100644 components-and-props.md create mode 100644 composition-vs-inheritance.md create mode 100644 conditional-rendering.md create mode 100644 context.md create mode 100644 create-a-new-react-app.md create mode 100644 cross-origin-errors.md create mode 100644 design-principles.md create mode 100644 error-boundaries.md create mode 100644 error-decoder.md create mode 100644 faq-ajax.md create mode 100644 faq-build.md create mode 100644 faq-functions.md create mode 100644 faq-internals.md create mode 100644 faq-state.md create mode 100644 faq-structure.md create mode 100644 faq-styling.md create mode 100644 faq-versioning.md create mode 100644 forms.md create mode 100644 forwarding-refs.md create mode 100644 fragments.md create mode 100644 getting-started.md create mode 100644 handling-events.md create mode 100644 hello-world.md create mode 100644 higher-order-components.md create mode 100644 hooks-custom.md create mode 100644 hooks-effect.md create mode 100644 hooks-faq.md create mode 100644 hooks-intro.md create mode 100644 hooks-overview.md create mode 100644 hooks-reference.md create mode 100644 hooks-rules.md create mode 100644 hooks-state.md create mode 100644 how-to-contribute.md create mode 100644 implementation-notes.md create mode 100644 integrating-with-other-libraries.md create mode 100644 introducing-jsx.md create mode 100644 jsx-in-depth.md create mode 100644 legacy-context.md create mode 100644 lifting-state-up.md create mode 100644 lists-and-keys.md create mode 100644 nav.yml create mode 100644 optimizing-performance.md create mode 100644 portals.md create mode 100644 react-without-es6.md create mode 100644 react-without-jsx.md create mode 100644 reconciliation.md create mode 100644 reference-dom-elements.md create mode 100644 reference-events.md create mode 100644 reference-glossary.md create mode 100644 reference-javascript-environment-requirements.md create mode 100644 reference-profiler.md create mode 100644 reference-pure-render-mixin.md create mode 100644 reference-react-component.md create mode 100644 reference-react-dom-server.md create mode 100644 reference-react-dom.md create mode 100644 reference-react.md create mode 100644 reference-test-renderer.md create mode 100644 refs-and-the-dom.md create mode 100644 render-props.md create mode 100644 rendering-elements.md create mode 100644 state-and-lifecycle.md create mode 100644 static-type-checking.md create mode 100644 strict-mode.md create mode 100644 testing-environments.md create mode 100644 testing-recipes.md create mode 100644 testing.md create mode 100644 thinking-in-react.md create mode 100644 typechecking-with-proptypes.md create mode 100644 uncontrolled-components.md create mode 100644 web-components.md diff --git a/accessibility.md b/accessibility.md new file mode 100644 index 000000000..6e75e34e6 --- /dev/null +++ b/accessibility.md @@ -0,0 +1,519 @@ +--- +id: accessibility +title: Accessibility +permalink: docs/accessibility.html +--- + +## Why Accessibility? {#why-accessibility} + +Web accessibility (also referred to as [**a11y**](https://en.wiktionary.org/wiki/a11y)) is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages. + +React fully supports building accessible websites, often by using standard HTML techniques. + +## Standards and Guidelines {#standards-and-guidelines} + +### WCAG {#wcag} + +The [Web Content Accessibility Guidelines](https://www.w3.org/WAI/intro/wcag) provides guidelines for creating accessible web sites. + +The following WCAG checklists provide an overview: + +- [WCAG checklist from Wuhcag](https://www.wuhcag.com/wcag-checklist/) +- [WCAG checklist from WebAIM](https://webaim.org/standards/wcag/checklist) +- [Checklist from The A11Y Project](https://a11yproject.com/checklist.html) + +### WAI-ARIA {#wai-aria} + +The [Web Accessibility Initiative - Accessible Rich Internet Applications](https://www.w3.org/WAI/intro/aria) document contains techniques for building fully accessible JavaScript widgets. + +Note that all `aria-*` HTML attributes are fully supported in JSX. Whereas most DOM properties and attributes in React are camelCased, these attributes should be hyphen-cased (also known as kebab-case, lisp-case, etc) as they are in plain HTML: + +```javascript{3,4} + +``` + +## Semantic HTML {#semantic-html} +Semantic HTML is the foundation of accessibility in a web application. Using the various HTML elements to reinforce the meaning of information +in our websites will often give us accessibility for free. + +- [MDN HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) + +Sometimes we break HTML semantics when we add `
` elements to our JSX to make our React code work, especially when working with lists (`
    `, `
      ` and `
      `) and the HTML ``. +In these cases we should rather use [React Fragments](/docs/fragments.html) to group together multiple elements. + +For example, + +```javascript{1,5,8} +import React, { Fragment } from 'react'; + +function ListItem({ item }) { + return ( + +
      {item.term}
      +
      {item.description}
      +       + ); +} + +function Glossary(props) { + return ( +
      + {props.items.map(item => ( + + ))} +
      + ); +} +``` + +You can map a collection of items to an array of fragments as you would any other type of element as well: + +```javascript{6,9} +function Glossary(props) { + return ( +
      + {props.items.map(item => ( + // Fragments should also have a `key` prop when mapping collections + +
      {item.term}
      +
      {item.description}
      +       + ))} +
      + ); +} +``` + +When you don't need any props on the Fragment tag you can use the [short syntax](/docs/fragments.html#short-syntax), if your tooling supports it: + +```javascript{3,6} +function ListItem({ item }) { + return ( + <> +
      {item.term}
      +
      {item.description}
      + + ); +} +``` + +For more info, see [the Fragments documentation](/docs/fragments.html). + +## Accessible Forms {#accessible-forms} + +### Labeling {#labeling} +Every HTML form control, such as `` and ` +``` + +In React, a `