From e6e607e1e6b2a497c8bad88113e95d21fba431e6 Mon Sep 17 00:00:00 2001 From: Jakub Drozdek Date: Sun, 14 Jul 2024 22:28:55 +0200 Subject: [PATCH] Resolve merge conflicts --- src/components/SocialBanner.tsx | 4 ---- src/content/learn/editor-setup.md | 4 ---- src/content/learn/installation.md | 6 +---- src/content/reference/react/apis.md | 19 +++++---------- src/content/reference/react/hooks.md | 30 +----------------------- src/content/reference/react/useEffect.md | 8 ++----- 6 files changed, 10 insertions(+), 61 deletions(-) diff --git a/src/components/SocialBanner.tsx b/src/components/SocialBanner.tsx index 946aa069d..dd11acfa7 100644 --- a/src/components/SocialBanner.tsx +++ b/src/components/SocialBanner.tsx @@ -7,11 +7,7 @@ import {useRef, useEffect} from 'react'; import cn from 'classnames'; import {ExternalLink} from './ExternalLink'; -<<<<<<< HEAD const bannerText = 'Dołącz do nas na React Conf 15-16 maja.'; -======= -const bannerText = 'Stream React Conf on May 15-16.'; ->>>>>>> 2a2e02f1d88f4d2828728ce352626e84ed8abda0 const bannerLink = 'https://conf.react.dev/'; const bannerLinkText = 'Dowiedz się więcej.'; diff --git a/src/content/learn/editor-setup.md b/src/content/learn/editor-setup.md index cf695711c..cbc69150d 100644 --- a/src/content/learn/editor-setup.md +++ b/src/content/learn/editor-setup.md @@ -40,11 +40,7 @@ Lintery kodu znajdują problemy w kodzie podczas jego pisania i pomagają je zaw ### Formatowanie {/*formatting*/} -<<<<<<< HEAD Ostatnia rzecz, jaka powinna się wydarzyć po udostępnieniu twojego kodu współtwórcom projektu, jest dyskusja pt. [tabulatory vs spacje](https://www.google.com/search?q=tabulatory+vs+spacje)! Na szczęście jest [Prettier](https://prettier.io/), który posprząta w twoim kodzie, formatując go według ustalonych reguł. Uruchom Prettiera, a wszystkie tabulatory w kodzie zamienią się na spacje; wszelkie wcięcia, cudzysłowy i apostrofy itp. również zostaną podmienione na podstawie ustawień. Idealnie by było, gdyby Prettier był uruchamiany przy każdym zapisaniu pliku, automatycznie aplikując te reguły za ciebie. -======= -The last thing you want to do when sharing your code with another contributor is get into a discussion about [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces)! Fortunately, [Prettier](https://prettier.io/) will clean up your code by reformatting it to conform to preset, configurable rules. Run Prettier, and all your tabs will be converted to spaces—and your indentation, quotes, etc will also all be changed to conform to the configuration. In the ideal setup, Prettier will run when you save your file, quickly making these edits for you. ->>>>>>> 2a2e02f1d88f4d2828728ce352626e84ed8abda0 Aby zainstalować [rozszerzenie Prettier dla VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode), musisz: diff --git a/src/content/learn/installation.md b/src/content/learn/installation.md index a5f1e808d..5bf6a0acc 100644 --- a/src/content/learn/installation.md +++ b/src/content/learn/installation.md @@ -37,11 +37,7 @@ export default function App() { Możesz edytować kod bezpośrednio lub otworzyć go w nowej zakładce, klikając na przycisk "Forkuj" w prawym górnym rogu. -<<<<<<< HEAD -W całej dokumentacji natkniesz się na wiele takich sandboxów. Poza samą dokumentacją, w sieci istnieje także wiele niezależnych sandboxów, które posiadają wsparcie dla Reacta, na przykład: [CodeSandbox](https://codesandbox.io/s/new), [Stackblitz](https://stackblitz.com/fork/react) czy [CodePen](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb). -======= -Most pages in the React documentation contain sandboxes like this. Outside of the React documentation, there are many online sandboxes that support React: for example, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), or [CodePen.](https://codepen.io/pen?template=QWYVwWN) ->>>>>>> 2a2e02f1d88f4d2828728ce352626e84ed8abda0 +W całej dokumentacji natkniesz się na wiele takich sandboxów. Poza samą dokumentacją, w sieci istnieje także wiele niezależnych sandboxów, które posiadają wsparcie dla Reacta, na przykład: [CodeSandbox](https://codesandbox.io/s/new), [Stackblitz](https://stackblitz.com/fork/react) czy [CodePen](https://codepen.io/pen?template=QWYVwWN). ### Wypróbuj Reacta lokalnie {/*try-react-locally*/} diff --git a/src/content/reference/react/apis.md b/src/content/reference/react/apis.md index 02a1efacd..cbbe0b6ad 100644 --- a/src/content/reference/react/apis.md +++ b/src/content/reference/react/apis.md @@ -10,29 +10,23 @@ Poza [hookami](/reference/react) i [komponentami](/reference/react/components), --- -<<<<<<< HEAD * [`createContext`](/reference/react/createContext) pozwala zdefiniować i przekazać kontekst do komponentów potomnych. Używane w parze z [`useContext`.](/reference/react/useContext) * [`forwardRef`](/reference/react/forwardRef) umożliwia komponentowi na wystawienie do rodzica jakiegoś węzła DOM, służącego za referencję. Używane w parze z [`useRef`.](/reference/react/useRef) * [`lazy`](/reference/react/lazy) pozwala opóźnić załadowanie kodu komponentu do czasu jego pierwszego wyrenderowania. * [`memo`](/reference/react/memo) pozwala pominąć renderowanie komponentu, jeśli jego właściwości się nie zmieniły. Używane w parze z [`useMemo`](/reference/react/useMemo) i [`useCallback`.](/reference/react/useCallback) * [`startTransition`](/reference/react/startTransition) pozwala oznaczyć zmianę stanu jako mało pilną. Podobne do [`useTransition`.](/reference/react/useTransition) -======= -* [`createContext`](/reference/react/createContext) lets you define and provide context to the child components. Used with [`useContext`.](/reference/react/useContext) -* [`forwardRef`](/reference/react/forwardRef) lets your component expose a DOM node as a ref to the parent. Used with [`useRef`.](/reference/react/useRef) -* [`lazy`](/reference/react/lazy) lets you defer loading a component's code until it's rendered for the first time. -* [`memo`](/reference/react/memo) lets your component skip re-renders with same props. Used with [`useMemo`](/reference/react/useMemo) and [`useCallback`.](/reference/react/useCallback) -* [`startTransition`](/reference/react/startTransition) lets you mark a state update as non-urgent. Similar to [`useTransition`.](/reference/react/useTransition) -* [`act`](/reference/react/act) lets you wrap renders and interactions in tests to ensure updates have processed before making assertions. +* [`act`](/reference/react/act) pozwala upewnić się, że wszystkie aktualizacje podczas renderowania i interakcji w testach zostały przetworzone, zanim uruchomione zostaną asercje. --- -## Resource APIs {/*resource-apis*/} +## API zasobów {/*resource-apis*/} -*Resources* can be accessed by a component without having them as part of their state. For example, a component can read a message from a Promise or read styling information from a context. +Do *zasobów* można dostać się z poziomu komponentu bez konieczności tworzenia dla nich stanu lokalnego. Na przykład, komponent może odczytywać wiadomość z Obietnicy (*ang.* Promise) albo informacje o stylu z kontekstu. -To read a value from a resource, use this API: +Aby odczytać wartość z zasobu, użyj tego Hooka: + +- [`use`](/reference/react/use) pozwala na odczytanie wartości zasobu, takiego jak [Obietnica (*ang.* Promise)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) lub [kontekst](/learn/passing-data-deeply-with-context). -* [`use`](/reference/react/use) lets you read the value of a resource like a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context). ```js function MessageComponent({ messagePromise }) { const message = use(messagePromise); @@ -40,4 +34,3 @@ function MessageComponent({ messagePromise }) { // ... } ``` ->>>>>>> 2a2e02f1d88f4d2828728ce352626e84ed8abda0 diff --git a/src/content/reference/react/hooks.md b/src/content/reference/react/hooks.md index 0300fc91f..67a202100 100644 --- a/src/content/reference/react/hooks.md +++ b/src/content/reference/react/hooks.md @@ -106,42 +106,14 @@ Aby spriorytetyzować renderowanie, użyj jednego z tych hooków. --- -<<<<<<< HEAD -## Hooki zasobów {/*resource-hooks*/} - -Do *zasobów* można dostać się z poziomu komponentu bez konieczności tworzenia dla nich stanu lokalnego. Na przykład, komponent może odczytywać wiadomość z Obietnicy (*ang.* Promise) albo informacje o stylu z kontekstu. - -Aby odczytać wartość z zasobu, użyj tego Hooka: - -- [`use`](/reference/react/use) pozwala na odczytanie wartości zasobu, takiego jak [Obietnica (*ang.* Promise)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) lub [kontekst](/learn/passing-data-deeply-with-context). - -```js -function MessageComponent({ messagePromise }) { - const message = use(messagePromise); - const theme = use(ThemeContext); - // ... -} -``` - ---- - ## Inne hooki {/*other-hooks*/} -======= -## Other Hooks {/*other-hooks*/} ->>>>>>> 2a2e02f1d88f4d2828728ce352626e84ed8abda0 Te hooki przydają się zwykle tylko autorom bibliotek i nieczęsto spotyka się je w kodzie aplikacyjnym. -<<<<<<< HEAD - [`useDebugValue`](/reference/react/useDebugValue) pozwala zmienić etykietę twojego własnego hooka, którą wyświetlają React DevTools. - [`useId`](/reference/react/useId) pozwala komponentowi przypisać do siebie unikalny identyfikator. Zwykle używane w połączeniu z API dostępności (*ang.* accessibility). - [`useSyncExternalStore`](/reference/react/useSyncExternalStore) pozwala komponentowi na zasubskrybowanie się do magazynu zewnętrznego. -======= -- [`useDebugValue`](/reference/react/useDebugValue) lets you customize the label React DevTools displays for your custom Hook. -- [`useId`](/reference/react/useId) lets a component associate a unique ID with itself. Typically used with accessibility APIs. -- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) lets a component subscribe to an external store. -* [`useActionState`](/reference/react/useActionState) allows you to manage state of actions. ->>>>>>> 2a2e02f1d88f4d2828728ce352626e84ed8abda0 +* [`useActionState`](/reference/react/useActionState) pozwala zarządzać stanem akcji. --- diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md index 962af7d09..590a3e118 100644 --- a/src/content/reference/react/useEffect.md +++ b/src/content/reference/react/useEffect.md @@ -62,13 +62,9 @@ function ChatRoom({ roomId }) { * Jeśli niektóre z twoich zależności to obiekty lub funkcje zdefiniowane wewnątrz komponentu, istnieje ryzyko, że **spowodują, że efekt będzie wykonywał się częściej niż jest to potrzebne.** Aby to naprawić, usuń zbędne zależności od [obiektów](#removing-unnecessary-object-dependencies) i [funkcji](#removing-unnecessary-function-dependencies). Możesz również [wydzielić aktualizacje stanu](#updating-state-based-on-previous-state-from-an-effect) oraz [logikę niereaktywną](#reading-the-latest-props-and-state-from-an-effect) poza efekt. -<<<<<<< HEAD -* Jeśli twój efekt nie został wywołany przez interakcję (np. kliknięcie), React zazwyczaj pozwoli przeglądarce **najpierw odświeżyć ekran przed uruchomieniem twojego efektu.** Jeśli efekt ten wykonuje jakieś operacje związane z wyświetlaniem (np. ustawianie pozycji dymka (ang. *tooltip*)) i opóźnienie jest zauważalne (np. występuje migotanie), zastąp `useEffect` przez [`useLayoutEffect`.](/reference/react/useLayoutEffect) -======= -* If your Effect is caused by an interaction (like a click), **React may run your Effect before the browser paints the updated screen**. This ensures that the result of the Effect can be observed by the event system. Usually, this works as expected. However, if you must defer the work until after paint, such as an `alert()`, you can use `setTimeout`. See [reactwg/react-18/128](https://github.com/reactwg/react-18/discussions/128) for more information. +* Jeśli twój efekt został wywołany przez interakcję (np. kliknięcie), **React może uruchomić go zanim przeglądarka narysuje zaktualizowany ekran**. Dzięki temu wynik efektu może zostać zaobserwowany przez system zdarzeń. Zwykle działa to w oczekiwany sposób. Jeśli jednak koniecznie potrzebujesz opóźnić zadanie do momentu po rysowaniu, np. wyświetlenie `alert()`, możesz skorzystać z `setTimeout`. Po więcej informacji zajrzyj na [reactwg/react-18/128](https://github.com/reactwg/react-18/discussions/128). -* Even if your Effect was caused by an interaction (like a click), **React may allow the browser to repaint the screen before processing the state updates inside your Effect.** Usually, this works as expected. However, if you must block the browser from repainting the screen, you need to replace `useEffect` with [`useLayoutEffect`.](/reference/react/useLayoutEffect) ->>>>>>> 2a2e02f1d88f4d2828728ce352626e84ed8abda0 +* Jeśli twój efekt nie został wywołany przez interakcję (np. kliknięcie), React zazwyczaj pozwoli przeglądarce **najpierw odświeżyć ekran przed uruchomieniem twojego efektu.** Jeśli efekt ten wykonuje jakieś operacje związane z wyświetlaniem (np. ustawianie pozycji dymka (ang. *tooltip*)) i opóźnienie jest zauważalne (np. występuje migotanie), zastąp `useEffect` przez [`useLayoutEffect`.](/reference/react/useLayoutEffect) * Nawet jeśli twój efekt został wywołany przez interakcję (np. kliknięcie), **przeglądarka może odświeżyć ekran przed przetworzeniem aktualizacji stanu wewnątrz twojego efektu.** Zazwyczaj jest to pożądane zachowanie. Niemniej jednak, jeśli chcesz zablokować przeglądarkę przed odświeżaniem ekranu, musisz zastąpić `useEffect` przez [`useLayoutEffect`.](/reference/react/useLayoutEffect)