From 42a6637cd8edb738fb29779e1b34276cfbc14875 Mon Sep 17 00:00:00 2001 From: Noman Dhoni <92979541+nomandhoni-cs@users.noreply.github.com> Date: Mon, 1 May 2023 13:29:55 +0000 Subject: [PATCH 1/4] [WIP] Just Translated first 2 lines --- src/content/learn/react-developer-tools.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index 89208a6bb..3ac787299 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -1,20 +1,20 @@ --- -title: React Developer Tools +title: React ডেভেলপার টুলস --- -Use React Developer Tools to inspect React [components](/learn/your-first-component), edit [props](/learn/passing-props-to-a-component) and [state](/learn/state-a-components-memory), and identify performance problems. + React এর [components](/learn/your-first-component), edit [props](/learn/passing-props-to-a-component) এবং [state](/learn/state-a-components-memory), এবং পারফরমেন্স সমস্যা শনাক্ত করার জন্য ব্যবহার করুন React ডেভেলপার টুলস। -* How to install React Developer Tools +* কিভাবে React ডেভেলপার টুলস ইন্সটল করতে হয় -## Browser extension {/*browser-extension*/} +## ব্রাউজার এক্সটেনশন {/*browser-extension*/} The easiest way to debug websites built with React is to install the React Developer Tools browser extension. It is available for several popular browsers: From c47a6a1bce9a77872427a2414662725249e60fe4 Mon Sep 17 00:00:00 2001 From: Noman Dhoni <92979541+nomandhoni-cs@users.noreply.github.com> Date: Mon, 1 May 2023 15:28:26 +0000 Subject: [PATCH 2/4] Finished React for Web section and React Native Remaining --- src/content/learn/react-developer-tools.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index 3ac787299..74127e268 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -16,18 +16,18 @@ title: React ডেভেলপার টুলস ## ব্রাউজার এক্সটেনশন {/*browser-extension*/} -The easiest way to debug websites built with React is to install the React Developer Tools browser extension. It is available for several popular browsers: +React দিয়ে তৈরি ওয়েবসাইট ডিবাগ করার সবচেয়ে সহজ উপায় হল React Developer Tools ব্রাউজার এক্সটেনশন ইনস্টল করা। এই ব্রাউজার এক্সটেনশনটি কয়েকটি জনপ্রিয় ব্রাউজারে পাওয়া যাচ্ছে। -* [Install for **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) -* [Install for **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) -* [Install for **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) +* [**গুগল ক্রোম** এর জন্য ইন্সটল করুন](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) +* [**মজিলা ফায়ারফক্স** এর জন্য ইন্সটল করুন](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) +* [**মাইক্রোসফট এজ** এর জন্য ইন্সটল করুন](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) -Now, if you visit a website **built with React,** you will see the _Components_ and _Profiler_ panels. +এখন, আপনি যদি **React দিয়ে তৈরি** ওয়েবসাইটে যান তাহলে, আপনি _Components_ এবং _Profiler_ প্যানেল ব্রাউজার ডেভেলপার টুলস এ দেখতে পাবেন। ![React Developer Tools extension](/images/docs/react-devtools-extension.png) -### Safari and other browsers {/*safari-and-other-browsers*/} -For other browsers (for example, Safari), install the [`react-devtools`](https://www.npmjs.com/package/react-devtools) npm package: +### সাফারি এবং অন্যান্য ব্রাউজার {/*safari-and-other-browsers*/} +অন্যান্য ব্রাউজার (যেমনঃ সাফারি) এর জন্য ইন্সটল করুন [`react-devtools`](https://www.npmjs.com/package/react-devtools) npm প্যাকেজঃ ```bash # Yarn yarn global add react-devtools @@ -36,19 +36,19 @@ yarn global add react-devtools npm install -g react-devtools ``` -Next open the developer tools from the terminal: +তারপর Terminal থেকে ডেভেলপার টুলসটি ওপেন করুনঃ ```bash react-devtools ``` -Then connect your website by adding the following ` ``` -Reload your website in the browser now to view it in developer tools. +এখন React ডেভেলপার টুলসটি, ব্রাউজার ডেভেলপার টুলস এ দেখার জন্য ব্রাউজারে আপনার ওয়েবসাইটি Reload করুন। ![React Developer Tools standalone](/images/docs/react-devtools-standalone.png) From 4c54f4bf4c4cd4c84b675fb8b9b864036c65bcd1 Mon Sep 17 00:00:00 2001 From: Noman Dhoni <92979541+nomandhoni-cs@users.noreply.github.com> Date: Mon, 1 May 2023 15:50:00 +0000 Subject: [PATCH 3/4] Finished how to install React Developer Tools page --- src/content/learn/react-developer-tools.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index 74127e268..101365960 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -52,10 +52,10 @@ react-devtools ![React Developer Tools standalone](/images/docs/react-devtools-standalone.png) -## Mobile (React Native) {/*mobile-react-native*/} -React Developer Tools can be used to inspect apps built with [React Native](https://reactnative.dev/) as well. +## মোবাইল (React Native) {/*mobile-react-native*/} +[React Native](https://reactnative.dev/) দিয়ে তৈরি অ্যাপস গুলো inspect করার জন্যেও আপনি React ডেভেলপার টুলস ব্যবহার করতে পারেন। -The easiest way to use React Developer Tools is to install it globally: +সবচেয়ে সহজ উপায় হলো React ডেভেলপার টুলস টি আপনার সিস্টেমে globally ইন্সটল করাঃ ```bash # Yarn yarn global add react-devtools @@ -64,13 +64,13 @@ yarn global add react-devtools npm install -g react-devtools ``` -Next open the developer tools from the terminal. +তারপর Terminal থেকে ডেভেলপার টুলসটি ওপেন করুনঃ ```bash react-devtools ``` -It should connect to any local React Native app that's running. +তারপর এটি আপনার যেকোনো চলমান local React Native অ্যাপ এর সাথে কাজ করবে। -> Try reloading the app if developer tools doesn't connect after a few seconds. +> যদি ডেভেলপার টুলসটি আপনার অ্যাপ এর সাথে কয়েক সেকেন্ডের মধ্যে কানেক্ট না হলে আপনার অ্যাপ টি Reload করুন। -[Learn more about debugging React Native.](https://reactnative.dev/docs/debugging) +[React Native দিয়ে তৈরি অ্যাপ এর ডিবাগিং করা সম্পর্কে আরো জানুন।](https://reactnative.dev/docs/debugging) From 31357a8f1994339a7117661a354ab1cb8e0523d8 Mon Sep 17 00:00:00 2001 From: Noman Dhoni <92979541+nomandhoni-cs@users.noreply.github.com> Date: Tue, 2 May 2023 02:41:01 +0000 Subject: [PATCH 4/4] Made changes according to suggesitions --- src/content/learn/react-developer-tools.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index 101365960..2809d3c12 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -4,7 +4,7 @@ title: React ডেভেলপার টুলস - React এর [components](/learn/your-first-component), edit [props](/learn/passing-props-to-a-component) এবং [state](/learn/state-a-components-memory), এবং পারফরমেন্স সমস্যা শনাক্ত করার জন্য ব্যবহার করুন React ডেভেলপার টুলস। + React এর [components](/learn/your-first-component) ইন্সপেক্ট, [props](/learn/passing-props-to-a-component) এবং [state](/learn/state-a-components-memory) এডিট, এবং পারফরমেন্স সমস্যা শনাক্ত করার জন্য React ডেভেলপার টুলস ব্যবহার করুন। @@ -16,13 +16,13 @@ title: React ডেভেলপার টুলস ## ব্রাউজার এক্সটেনশন {/*browser-extension*/} -React দিয়ে তৈরি ওয়েবসাইট ডিবাগ করার সবচেয়ে সহজ উপায় হল React Developer Tools ব্রাউজার এক্সটেনশন ইনস্টল করা। এই ব্রাউজার এক্সটেনশনটি কয়েকটি জনপ্রিয় ব্রাউজারে পাওয়া যাচ্ছে। +React দিয়ে তৈরি ওয়েবসাইট ডিবাগ করার সবচেয়ে সহজ উপায় হল React ডেভেলপার টুলস ব্রাউজার এক্সটেনশন ইনস্টল করা। এই ব্রাউজার এক্সটেনশনটি কয়েকটি জনপ্রিয় ব্রাউজারে পাওয়া যাচ্ছে। * [**গুগল ক্রোম** এর জন্য ইন্সটল করুন](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) * [**মজিলা ফায়ারফক্স** এর জন্য ইন্সটল করুন](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) * [**মাইক্রোসফট এজ** এর জন্য ইন্সটল করুন](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) -এখন, আপনি যদি **React দিয়ে তৈরি** ওয়েবসাইটে যান তাহলে, আপনি _Components_ এবং _Profiler_ প্যানেল ব্রাউজার ডেভেলপার টুলস এ দেখতে পাবেন। +এখন, আপনি যদি **React দিয়ে তৈরি** একটি ওয়েবসাইটে যান তাহলে, আপনি _Components_ এবং _Profiler_ প্যানেল ব্রাউজার ডেভেলপার টুলস এ দেখতে পাবেন। ![React Developer Tools extension](/images/docs/react-devtools-extension.png) @@ -71,6 +71,6 @@ react-devtools তারপর এটি আপনার যেকোনো চলমান local React Native অ্যাপ এর সাথে কাজ করবে। -> যদি ডেভেলপার টুলসটি আপনার অ্যাপ এর সাথে কয়েক সেকেন্ডের মধ্যে কানেক্ট না হলে আপনার অ্যাপ টি Reload করুন। +> যদি ডেভেলপার টুলসটি আপনার অ্যাপ এর সাথে কয়েক সেকেন্ডের মধ্যে কানেক্ট না হয় তাহলে আপনার অ্যাপটি Reload করুন। [React Native দিয়ে তৈরি অ্যাপ এর ডিবাগিং করা সম্পর্কে আরো জানুন।](https://reactnative.dev/docs/debugging)