Sync with reactjs.org @ 4b685084

README.md

@@ -10,11 +10,11 @@ This repo contains the source code and documentation powering [reactjs.org](http
 1. Node: any 12.x version starting with v12.0.0 or greater
 1. Yarn v1: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/)
 1. A fork of the repo (for any contributions)
-1. A clone of the [reactjs.org repo](https://github.com/reactjs/reactjs.org) on your local machine
+1. A clone of the [reactjs.org repo](https://github.com/reactjs/ur.reactjs.org) on your local machine
 
 ### Installation
 
-1. `cd reactjs.org` to go into the project root
+1. `cd ur.reactjs.org` to go into the project root
 1. `yarn` to install the website's npm dependencies
 
 ### Running locally
@@ -26,11 +26,11 @@ This repo contains the source code and documentation powering [reactjs.org](http
 
 ### Guidelines
 
-The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/reactjs.org/blob/main/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections.
+The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/ur.reactjs.org/blob/master/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections.
 
 ### Create a branch
 
-1. `git checkout main` from any folder in your local `reactjs.org` repository
+1. `git checkout main` from any folder in your local `ur.reactjs.org` repository
 1. `git pull origin main` to ensure you have the latest main code
 1. `git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch` with a suitable name) to create a branch
 

content/community/courses.md

@@ -1,60 +1,69 @@
 ---
 id: courses
-title: Courses
+title: نصاب
 layout: community
 sectionid: community
 permalink: community/courses.html
 ---
 
-## Free Courses {#free-courses}
+## مفت نصاب {#free-courses}
 
-- [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.
+- [Glitch: React Starter Kit](https://glitch.com/glimmer/post/react-starter-kit/) - متعامل کوڈ کی مثالوں کے ساتھ ۵ حصوں پر مبنی ایک مفت ویڈیو کورس جوآپ کو React سیکھنے میں مدد دے گا۔
 
-- [Egghead.io: Start Learning React](https://egghead.io/courses/start-learning-react) - This series will explore the basic fundamentals of React to get you started.
+- [Codecademy: React 101](https://www.codecademy.com/learn/react-101) - <span dir="rtl">Codeacademy کا React کے لیے  تعارفی کورس </span>
 
-- [React Crash Course 2018](https://www.youtube.com/watch?v=Ke90Tje7VS0) - A beginner-friendly crash course through the most important React topics.
+- [Egghead.io: Start Learning React](https://egghead.io/courses/start-learning-react) - یہ سبق آموز سلسلہ آپ کو React  لائبریری کی بنیادی باتیں سکھائے گا ۔  
 
-- [Frontend Armory: React Fundamentals](https://frontarm.com/courses/react-fundamentals/) - Learn React without the buzzwords.
+- [React Crash Course 2018](https://www.youtube.com/watch?v=Ke90Tje7VS0)<span dir="rtl"> - React لائبریری کے انتہائی اہم موضوعات کی وضاحت کرنے والے ابتدائیہ افراد کے لئے ایک خصوصی تربیتی کورس ۔</span>
 
-- [Egghead.io: The Beginner's Guide to ReactJS](https://egghead.io/courses/the-beginner-s-guide-to-react) - Free course for React newbies and those looking to get a better understanding of React fundamentals.
+- [React Armory: Learn React by Itself](https://reactarmory.com/guides/learn-react-by-itself)<span dir="rtl"> - React کے وسائل کے ساتھ ، آپ رمزيہ الفاظ  کے بغیر React سیکھ سکتے ہیں ۔</span>
 
-- [Free React Bootcamp](https://tylermcginnis.com/free-react-bootcamp/) - Recordings from three days of a free online React bootcamp.
+- [Egghead.io: The Beginner's Guide to ReactJS ](https://egghead.io/courses/the-beginner-s-guide-to-reactjs)<span dir='rtl'> - React کے نئے طلباء اور React کے بنیادی اصولوں کی بہتر تفہیم حاصل کرنے کے خواہاں افراد کے لئے مفت کورس ۔</span>
 
-- [Scrimba: Learn React for free](https://scrimba.com/g/glearnreact) - 48 hands-on video tutorials building react apps.
+- [Free React Bootcamp](https://tylermcginnis.com/free-react-bootcamp/) <span dir='rtl'> - React کے مفت تربیتی کیمپ کی تین دن کی مفت آن لائن ریکارڈنگ ۔</span>
+
+- [Scrimba: Learn React for free](https://scrimba.com/g/glearnreact)<span dir='rtl'> - React app کی تعمیر میں 48 ویڈیو سبق ۔</span>
 
 - [University of Helsinki: Full Stack Open MOOC](https://fullstackopen.com/en/) - Learn to build web applications with React. Available in English, Spanish, Chinese and Finnish.
 
 
-## Paid Courses {#paid-courses}
+## ادا کردہ سبق {#paid-courses}
 
+<<<<<<< HEAD
+- [Egghead.io](https://egghead.io/browse/frameworks/react)<span dir="rtl"> - React اور بہت سے دوسرے عنوانات پر مختصر تدریسی ویڈیوز ۔</span>
+=======
 - [Meta Front-End Developer Professional Certificate](https://www.coursera.org/professional-certificates/meta-front-end-developer) - Launch your career as a front-end developer. Build job-ready skills for an in-demand career and earn a credential from Meta. No degree or prior experience required to get started.
 
 - [Egghead.io](https://egghead.io/browse/frameworks/react) - Short instructional videos on React and many other topics.
+>>>>>>> 4b68508440a985598571f78f60637b6dccdd5a1a
 
-- [Frontend Masters](https://frontendmasters.com/learn/react/) - Video courses on React.
+- [Frontend Masters](https://frontendmasters.com/courses/)<span dir='rtl'> - React لائبریری اور دیگر Frontend فریم ورک کو سیکھنے کے لئے ویڈیو کورسز کی تربیت کرنا ۔</span>
 
-- [Fullstack React](https://www.fullstackreact.com/) - The up-to-date, in-depth, complete guide to React and friends.
+- [Fullstack React](https://www.fullstackreact.com/)<span dir='rtl'> - تازہ ترین ، گہرائی میں ، مکمل رہنمای کے ساتھ React دستیاب ھے ۔</span> دستیاب ھے ۔
 
-- [Pure React](https://daveceddia.com/pure-react/) - A step-by-step guide to mastering React.
+- [Pure React](https://daveceddia.com/pure-react/)<span dir="rtl"> - React میں مہارت حاصل کرنے کے لئے ایک قدم بہ قدم رہنما ۔</span>
 
-- [React for Beginners](https://reactforbeginners.com/) - Learn React in just a couple of afternoons.
+- [React for Beginners](https://reactforbeginners.com/)<span dir="rtl"> - صرف چند دن میں React سیکھین ۔</span>
+
+- [React for Designers](https://designcode.io/react)<span dir="rtl"> - React کا 6 گھنٹے کا کورس ڈیزائنرز کے ذریعہ ، ڈیزائنرز کے لئے۔</span>
 
-- [React for Designers](https://designcode.io/react) - A 6-hour React course for designers, by designers.
+- [React Essentials for Designers](https://learnreact.design)<span dir='rtl'> - React
+ڈیزائنرز کے لئے تیار کردہ کورسز: بنیادی اصول ، قابلیت ، حدود اور ان کا ڈیزائن سے کس طرح تعلق ہے ۔</span>
+
+- [Essential React](https://learnreact.com/lessons/2018-essential-react-1-overview) - کوڈ لکھ کر سیکھنا پسند کرنے والوں کے لئے ایک تعلیمی نصاب ، یہ کورس انہیں جلدی سیکھنے اور جدید ترین ایپلیکیشنز بنانے کے قابل بنائے گا ۔
 
-- [React Essentials for Designers](https://learnreact.design) - React courses tailored for designers: the fundamentals, capabilities, limitations and how they relate to design.
 
-- [Essential React](https://learnreact.com/lessons/2018-essential-react-1-overview) - A crash course for doers, moving fast from "Hello World" to advanced component composition.
+- [React Training: Advanced React.js](https://courses.reacttraining.com/p/advanced-react)<span dir='rtl'> - React میں اپنی صلاحیتوں کو ترقی دیں ۔</span>
 
-- [React Training: Advanced React.js](https://courses.reacttraining.com/p/advanced-react) - Take your React skills to the next level.
+- [Tyler McGinnis](https://tylermcginnis.com/courses)<span dir='rtl'> - Tyler McGinnis کے ساتھ سیکھیں ، جو ماہانہ تربیتی سیشن پیش کرتا ہے۔ ان کورسز میں بنیادی باتیں سیکھنا بھی  شامل ہے ۔</span>
 
+<<<<<<< HEAD
+- [Mastering React](https://codewithmosh.com/p/mastering-react/)<span dir='rtl'> - React لائبریری کے ساتھ انٹرایکٹو ایپلی کیشنز بنائیں ۔</span>
+=======
 - [Tyler McGinnis](https://ui.dev/) - Tyler McGinnis provides access to his courses for a monthly fee. Courses include "React Fundamentals" and "Universal React".
+>>>>>>> 2310e15532aba273d713996a4c6ef04247dff764
 
-- [Mastering React](https://codewithmosh.com/p/mastering-react/) - Build professional interactive apps with React.
-
-- [React Tutorial](https://react-tutorial.app) - Learn React step by step in an interactive environment with flashcards.
-
-- [Road to React](https://www.roadtoreact.com/) - Your journey to master React in JavaScript.
+- [Road to React](https://www.roadtoreact.com/)<span dir='rtl'> - React میں عبور حاصل کرنے کے لیے آپ کا سفر ۔</span>
 
-- [Epic React](https://epicreact.dev/) - Confidently Ship Well-Architected Production Ready React Apps Like a Pro
+- [Epic React](https://epicreact.dev/) - <span dir='rtl'>اعتماد کے ساتھ اعلی میعار کی پروڈکشن ایپلی کیشنز بنائیں</span> 

content/docs/handling-events.md

@@ -1,27 +1,27 @@
 ---
 id: handling-events
-title: Handling Events
+title: Event Handling کی ترتیب
 permalink: docs/handling-events.html
 prev: state-and-lifecycle.html
 next: conditional-rendering.html
 redirect_from:
   - "docs/events-ko-KR.html"
 ---
 
-Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences:
+React اور DOM دونوں میں event handling کی ترتیب ایک دوسرے سے مشابہت رکھتی ہے لیکن ان  دونوں کے لکھنے کا انداز مختلف ہے
 
-* React events are named using camelCase, rather than lowercase.
-* With JSX you pass a function as the event handler, rather than a string.
+* React events کو lowercase کے بجائے camelCase میں لکھا جاتا ہے
+* JSX میں آپ event handler کو string کے بجائے function کے طور پر پیش کرتے ہیں
 
-For example, the HTML:
+مثلاً یہ HTML
 
 ```html
 <button onclick="activateLasers()">
   Activate Lasers
 </button>
 ```
 
-is slightly different in React:
+React میں یوں لکھا جائے گا
 
 ```js{1}
 <button onClick={activateLasers}>
@@ -37,7 +37,7 @@ Another difference is that you cannot return `false` to prevent default behavior
 </form>
 ```
 
-In React, this could instead be:
+وہیں React میں یہ یوں لکھا جا سکتا ہے
 
 ```js{3}
 function Form() {
@@ -54,11 +54,11 @@ function Form() {
 }
 ```
 
-Here, `e` is a synthetic event. React defines these synthetic events according to the [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), so you don't need to worry about cross-browser compatibility. React events do not work exactly the same as native events. See the [`SyntheticEvent`](/docs/events.html) reference guide to learn more.
+`e` یہاں پر ایک synthethic event ہے، ان synthetic events کو React نے [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/) کو مدنظر رکھتے ہوئے بنایا ہے لہٰذا یہ مختلف براوزروں کے درمیان مطابقت رکھتے ہیں ۔ اس موضوع پہ مزید معلومات حاصل کرنے کے لیے [`SyntheticEvent`](/docs/events.html) سے منسوب گائیڈ کو ملاحظہ فرمائیں
 
-When using React, you generally don't need to call `addEventListener` to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered.
+React میں عموماً DOM کے عناصر پر listeners جوڑنے کے لیے `addEventListener` استعمال نہیں کرنا پڑتا، یہ کافی ہے کہ جب عناصر render ہو تب آپ listener فراہم کر دیں
 
-When you define a component using an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), a common pattern is for an event handler to be a method on the class. For example, this `Toggle` component renders a button that lets the user toggle between "ON" and "OFF" states:
+جب آپ [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) کا استعمال کرتے ہوئے جزو بناتے ہیں تو ایک عام طریقہ کار یہ ہے کہ event handler کو اس class کا طریقہ (method) بنا دیا جائے ۔ مثال کے طور پر یہ `Toggle` جزو ایک بٹن render کر رہا ہے جس سے ایک صارف "ON" اور "OFF" states کے درمیان ٹوگل کر سکتا ہے
 
 ```js{6,7,10-14,18}
 class Toggle extends React.Component {
@@ -86,13 +86,17 @@ class Toggle extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010)
+[**Codepen میں دیکھیں**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010)
 
-You have to be careful about the meaning of `this` in JSX callbacks. In JavaScript, class methods are not [bound](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) by default. If you forget to bind `this.handleClick` and pass it to `onClick`, `this` will be `undefined` when the function is actually called.
+آپ کو JSX callbacks میں `this` کے معنی کا خاص خیال رکھنا پڑے گا، Javascript میں class کے طریقے (methods) پہلے سے [bound](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) نہیں ہوتے لہٰذا اگر آپ `this.handleClick` کو bind کرنا بھول کیے اور اسے `onClick` میں پاس کر دیا تو `this` کا حاصل function call کے وقت `undefined` ہو جائے گا
 
-This is not React-specific behavior; it is a part of [how functions work in JavaScript](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generally, if you refer to a method without `()` after it, such as `onClick={this.handleClick}`, you should bind that method.
+یہ طرزِ عمل React کی وجہ سے نہیں ہے، یے [JavaScript functions کا ایک بنیادی پہلو ہے](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/) ۔ عموماً اگر آپ کسی طریقے (method) کو بنا () کے مخاطب کرتے ہیں جیسے مثلاً `onClick={this.handleClick}`، تو آپ کو اسے bind کرنا چاہیے
 
+<<<<<<< HEAD
+اگر `bind` کا استعمال آپ کو دشوار لگتا ہے تو آپ دو طریقے اختیار کر سکتے ہیں ۔ اگر آپ تجرباتی [public class fields syntax](https://babeljs.io/docs/plugins/transform-class-properties/) کا استعمال کر رہے ہیں تو آپ class fields سے callbacks کو صحیح طریقہ سے bind کر سکتے ہیں
+=======
 If calling `bind` annoys you, there are two ways you can get around this. You can use [public class fields syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields#public_instance_fields) to correctly bind callbacks:
+>>>>>>> 4b68508440a985598571f78f60637b6dccdd5a1a
 
 ```js{2-6}
 class LoggingButton extends React.Component {
@@ -111,9 +115,9 @@ class LoggingButton extends React.Component {
 }
 ```
 
-This syntax is enabled by default in [Create React App](https://github.com/facebookincubator/create-react-app).
+یہ syntax پہلے سے ہی [Create React App](https://github.com/facebookincubator/create-react-app) میں زیر استعمال ہے
 
-If you aren't using class fields syntax, you can use an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in the callback:
+اگر آپ class fields syntax کا استعمال نہیں کر رہے تو آپ callback میں [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) کا استعمال کر سکتے ہیں
 
 ```js{7-9}
 class LoggingButton extends React.Component {
@@ -132,17 +136,17 @@ class LoggingButton extends React.Component {
 }
 ```
 
-The problem with this syntax is that a different callback is created each time the `LoggingButton` renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.
+اس syntax کی خامی یہ ہے کہ `LoggingButton` کا ہر ایک render ایک نیا callback بھی بنائے گا، زیادہ تر معاملات میں، یہ ٹھیک ہے۔ حالانکہ اگر اس callback کو ایک prop کے طور پہ نچلے جزو میں پیش کیا جائے تو وہ جزو ایک اضافی re-rendering کر سکتے ہیں ۔ کارکردگی سے متعلق ان مسائل سے بچنے کے لیے ہم آپ کو دو مشورے دیں گے، پہلا constructor میں binding کا استعمال ہے اور دوسرا class fields syntax کا
 
-## Passing Arguments to Event Handlers {#passing-arguments-to-event-handlers}
+## Event Handlers میں arguments فراہم کرنا {#passing-arguments-to-event-handlers}
 
-Inside a loop, it is common to want to pass an extra parameter to an event handler. For example, if `id` is the row ID, either of the following would work:
+Loop کے اندر event handler میں ایک اضافی parameter فراہم کرنا ایک عام عمل ہے، مثلاً اگر `id` کو  row ID سے نسبت دی جائے تو ان میں سے کوئی بھی طریقہ استعمال میں لایا جا سکتا ہے
 
 ```js
 <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
 <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
 ```
 
-The above two lines are equivalent, and use [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) and [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) respectively.
+یہ دونوں ترتیبات برابر ہیں جو کہ [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) اور [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) کا استعمال کر رہی ہیں
 
-In both cases, the `e` argument representing the React event will be passed as a second argument after the ID. With an arrow function, we have to pass it explicitly, but with `bind` any further arguments are automatically forwarded.
+یہاں `e` argument ایک React event ہے جو کی ID کے بعد دوسرے argument کی طرح پیش کیا جائے گا، ایک arrow function کے ساتھ ہم اسے واضح طور پر پیش کریں گے جب کہ `bind` کے استعمال میں باقی arguments خود بخود آگے پیش کر دیئے جائیں گے