Skip to content

Commit a8ec27c

Browse files
committed
Another suggestions
1 parent 6dbe405 commit a8ec27c

File tree

1 file changed

+24
-26
lines changed

1 file changed

+24
-26
lines changed

content/docs/code-splitting.md

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -156,10 +156,10 @@ Powyższy kod automatycznie załaduje paczkę zawierającą `OtherComponent` pod
156156
Musi ona zwrócić obiekt (`Promise`) (pol. *obietnicę*), która rozwiązuje się do modułu z eksportem domyślnym (`default`) zawierającym
157157
komponent reactowy.
158158

159-
### Zawieszenie {#suspense}
159+
### Zawieszenie (ang. *Suspense*) {#suspense}
160160

161-
Jeśli moduł zawierający `OtherComponent` nie zostanie jeszcze załadowany na czas renderowania
162-
`MyComponent`, musimy wyświetlić zapasową zawartość, dopóki trwa ładowanie - na przykład
161+
Jeśli moduł zawierający `OtherComponent` nie zostanie załadowany przed renderowaniem komponentu
162+
`MyComponent`, musimy wyświetlić alternatywną zawartość, dopóki trwa ładowanie - na przykład
163163
wskaźnik ładowania. Robimy to za pomocą komponentu `Suspense`.
164164

165165
```js
@@ -168,18 +168,18 @@ const OtherComponent = React.lazy(() => import('./OtherComponent'));
168168
function MyComponent() {
169169
return (
170170
<div>
171-
<Suspense fallback={<div>Loading...</div>}>
171+
<Suspense fallback={<div>Wczytywanie...</div>}>
172172
<OtherComponent />
173173
</Suspense>
174174
</div>
175175
);
176176
}
177177
```
178178

179-
Props `fallback` akceptuje wszystkie elementy reactowe, które chcesz wyświetlić
179+
Właściwość `fallback` tego komponentu akceptuje dowolny element reactowy, który będzie wyświetlany
180180
w trakcie oczekiwania na załadowanie komponentu. Możesz umieścić komponent `Suspense`
181-
w dowolnym miejscu nad "leniwym" komponentem. Możesz nawet zawijać wiele "leniwych komponentów"
182-
za pomocą jednego komponentu `Suspense`.
181+
w dowolnym miejscu nad "leniwym" (ang. *lazy*) komponentem. Możesz nawet opakować kilka "leniwych" komponentów
182+
w jeden komponent `Suspense`.
183183

184184
```js
185185
const OtherComponent = React.lazy(() => import('./OtherComponent'));
@@ -201,10 +201,10 @@ function MyComponent() {
201201

202202
### Granice błędów {#error-boundaries}
203203

204-
Jeśli inny moduł się nie doładuje (na przykład z powodu awarii sieci), spowoduje to błąd.
205-
Możesz je obsługiwać aby zapewnić najlepsze doświadczenia użytkownika i zarządzać ratunkiem z pomocą
206-
[Granic Błędów](/docs/error-boundaries.html). Po utworzeniu granic możesz ich użyć w dowolnym
207-
miejscu nad "leniwymi" komponentami, aby wyświetlić stan błędu gdy sieć jest niedostępna.
204+
Jeśli inny moduł nie wczyta się poprawnie (na przykład z powodu awarii sieci), spowoduje to błąd.
205+
Możesz go obsłużyć aby zapewnić użytkownikowi lepsze doświadczenie, a także aby określić sposób obsługi błędu za pomocą
206+
[granicy błędu](/docs/error-boundaries.html). Taką granicę błędu możesz umieścić w dowolnym
207+
miejscu ponad "leniwymi" komponentami i, na przykład, aby wyświetlić stan błędu, gdy połączenie z siecią zostanie zerwane.
208208

209209
```js
210210
import MyErrorBoundary from './MyErrorBoundary';
@@ -225,19 +225,18 @@ const MyComponent = () => (
225225
);
226226
```
227227

228-
## Podział kodu na podstawie szlaku (Route-based) {#route-based-code-splitting}
228+
## Podział kodu na podstawie ścieżki URL {#route-based-code-splitting}
229229

230-
Decydowanie gdzie w twojej aplikacji użyć podziału kodu może być nieco skomplikowane.
231-
Chcesz mieć pewność, że wybierasz miejsca, które równomiernie podzielą twoje pakiety,
232-
ale nie chcesz naruszyć doświadczeń użytkownika.
230+
Decyzja o tym, w których miejscach podzielić kod aplikacji, może okazać się kłopotliwa.
231+
Zależy ci na miejscach, że wybierasz miejsca, które równomiernie podzielą twoje pakiety,
232+
ale nie chcesz zepsuć doświadczeń użytkownika.
233233

234-
Dobrym miejscem do rozpoczęcia są trasy (routes). Większość osób w sieci jest przywyczajona
235-
do przechodzenia między stronami, które wymaga pewnego czasu. Jest także trend ponownego
236-
renderowania całej strony, więc uzytkownicy raczej nie będą wchodzić w inną interakcje
237-
w tym samym czasie.
234+
Dobrym punktem startowym są ścieżki (ang. *routes*) w aplikacji. Większość ludzi korzystających z Internetu przyzwyczajona jest,
235+
że przejście pomiędzy stronami zajmuje trochę czasu. Dodatkowo, zazwyczaj podczas takiego przejścia spora część ekranu jest renderowana ponownie
236+
Można więc założyć, że użytkownik nie będzie wykonywał żadnych akcji na interfejsie podczas ładowania.
238237

239-
Oto przykład konfiguracji dzielenia kodu w twojej aplikacji opartej na trasach za pomoca
240-
bibliotek takich jak [React Router](https://reacttraining.com/react-router/) wraz z `React.lazy`.
238+
Oto przykład skonfigurowania dzielenia kodu aplikacji opartego na ścieżkach, przy użyciu
239+
biblioteki [React Router](https://reacttraining.com/react-router/) wraz z funkcją `React.lazy`.
241240

242241
```js
243242
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
@@ -248,7 +247,7 @@ const About = lazy(() => import('./routes/About'));
248247

249248
const App = () => (
250249
<Router>
251-
<Suspense fallback={<div>Loading...</div>}>
250+
<Suspense fallback={<div>Wczytywanie...</div>}>
252251
<Switch>
253252
<Route exact path="/" component={Home}/>
254253
<Route path="/about" component={About}/>
@@ -258,12 +257,11 @@ const App = () => (
258257
);
259258
```
260259

261-
## Eksport nazw {#named-exports}
260+
## Eksporty nazwane {#named-exports}
262261

263-
`React.lazy` obecnie obsługuje tylko domyślne eksporty. Jeśli moduł, który chcesz zaimportowac,
262+
`React.lazy` obecnie obsługuje tylko domyślne eksporty. Jeśli moduł, który chcesz zaimportować,
264263
używa nazwanych eksportów, możesz utworzyć moduł pośredni, który ponownie eksportuje je jako
265-
domyślny eksport. Gwarantuje to, utrzymanie działającego drzewa oraz niepobieranie nieuzywanych
266-
komponentów.
264+
domyślny eksport. Gwarantuje to działanie mechanizmu "tree-shaking" (pol. *potrząsanie drzewem*), a także zapobiega pobieraniu nieużywanych komponentów.
267265

268266
```js
269267
// ManyComponents.js

0 commit comments

Comments
 (0)