diff --git a/beta/src/pages/learn/installation.md b/beta/src/pages/learn/installation.md index 430646740..9cb9a8ca2 100644 --- a/beta/src/pages/learn/installation.md +++ b/beta/src/pages/learn/installation.md @@ -13,7 +13,7 @@ React został zaprojektowany z myślą o stopniowym wdrażaniu. Dzięki temu zaw - [Jak dodać Reacta do strony HTML](/learn/add-react-to-a-website) - [Jak wystartować nowy projekt reactowy](/learn/start-a-new-react-project) - [Jak skonfigurować edytor kodu](/learn/editor-setup) -- [Jak zainstalować React Developer Tools](/learn/react-developer-tools) +- [Jak zainstalować narzędzia deweloperskie dla Reacta](/learn/react-developer-tools) diff --git a/beta/src/pages/learn/react-developer-tools.md b/beta/src/pages/learn/react-developer-tools.md index 2aa9321df..5333b5a78 100644 --- a/beta/src/pages/learn/react-developer-tools.md +++ b/beta/src/pages/learn/react-developer-tools.md @@ -1,70 +1,79 @@ ---- -title: React Developer Tools ---- - - - -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. - - - -## 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: - -* [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) - -Now, if you visit a website **built with React**, you will see the _Components_ and _Profiler_ panels. - -![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: -```bash -# Yarn -yarn global add react-devtools - -# Npm -npm install -g react-devtools -``` - -Next open the developer tools from the 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 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. - -The easiest way to use React Developer Tools is to install it globally: -```bash -# Yarn -yarn global add react-devtools - -# Npm -npm install -g react-devtools -``` - -Next open the developer tools from the terminal. -```bash -react-devtools -``` - -It should connect to any local React Native app that's running. - -> Try reloading the app if developer tools doesn't connect after a few seconds. - -[Learn more about debugging React Native.](https://reactnative.dev/docs/debugging) +--- +title: Narzędzia deweloperskie dla Reacta +--- + + + +Użyj narzędzi deweloperskich dla Reacta, aby zbadać [komponenty reactowe](/learn/your-first-component), zmienić ich [właściwości (_ang._ props)](/learn/passing-props-to-a-component) oraz [stan (_ang._ state)](/learn/state-a-components-memory), a także zidentyfikować problemy wydajnościowe w aplikacji. + + + +## Rozszerzenie dla przeglądarki {/_browser-extension_/} + +Najprostszym sposobem na debugowanie stron internetowych stworzonych w Reakcie jest zainstalowanie rozszerzenia dla przeglądarki o nazwie React Developer Tools (_pol._ narzędzia deweloperskie dla Reacta). Jest ono dostępne dla kilku popularnych przeglądarek: + +- [Zainstaluj rozszerzenie dla **Chrome'a**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) +- [Zainstaluj rozszerzenie dla **Firefoksa**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) +- [Zainstaluj rozszerzenie dla **Edge'a**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) + +Teraz, gdy wejdziesz na stronę **zbudowaną w Reakcie**, zobaczysz dodatkowe zakładki o nazwie _Components_ oraz _Profiler_. + +![Narzędzia deweloperskie dla Reacta w przeglądarce](/images/docs/react-devtools-extension.png) + +### Safari i inne przeglądarki {/_safari-and-other-browsers_/} + +Jeśli używasz innej przeglądarki (na przykład Safari), zainstaluj pakiet npm-owy o nazwie [`react-devtools`](https://www.npmjs.com/package/react-devtools): + +```bash +# Yarn +yarn global add react-devtools + +# Npm +npm install -g react-devtools +``` + +Następnie otwórz narzędzia deweloperskie w terminalu: + +```bash +react-devtools +``` + +Później podłącz się do swojej strony internetowej dodając poniższy tag ` + + +``` + +Na koniec odśwież stronę w przeglądarce, aby podejrzeć ją w narzędziach deweloperskich. + +![Narzędzia deweloperskie dla Reacta - wersja samodzielna](/images/docs/react-devtools-standalone.png) + +## Aplikacje mobilne (React Native) {/_mobile-react-native_/} + +Narzędzi deweloperskicj dla Reacta można z powodzeniem używać do podglądania aplikacji napisanych w [React Native](https://reactnative.dev/) as well. + +Najprościej jest zainstalować je globalnie: + +```bash +# Yarn +yarn global add react-devtools + +# Npm +npm install -g react-devtools +``` + +Teraz uruchom narzędzia deweloperskie z terminala. + +```bash +react-devtools +``` + +Powinno nastąpić połączenie do lokalnie działającej aplikacji. + +> Jeśli połączenie nie nastąpi w ciągu następnych kilku sekund, spróbuj załadować aplikację ponownie. + +[Dowiedz się więcej o debuggowaniu w React Native.](https://reactnative.dev/docs/debugging) diff --git a/beta/src/sidebarLearn.json b/beta/src/sidebarLearn.json index 12a96f481..308c4b41b 100644 --- a/beta/src/sidebarLearn.json +++ b/beta/src/sidebarLearn.json @@ -24,7 +24,7 @@ "path": "/learn/editor-setup" }, { - "title": "React Developer Tools", + "title": "Narzędzia deweloperskie dla Reacta", "path": "/learn/react-developer-tools" } ]