From 94d9596569a79bee6e5dc64be1a7479c4b80e95d Mon Sep 17 00:00:00 2001 From: pchalupa Date: Tue, 6 Jun 2023 19:26:38 +0200 Subject: [PATCH 1/5] translation draft --- .../importing-and-exporting-components.md | 74 +++++++++---------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index f8f55605c..3b19b7c1c 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -1,26 +1,26 @@ --- -title: Importing and Exporting Components +title: Importování a exportování komponent --- -The magic of components lies in their reusability: you can create components that are composed of other components. But as you nest more and more components, it often makes sense to start splitting them into different files. This lets you keep your files easy to scan and reuse components in more places. +Krása komponent tkví v jejich znovupoužitelnosti: můžete vytvořit komponentu, která bude složena z dalších komponent. Občas dává smysl, že jakmile začnete přidávat více a více kompoentnt, je dobré je rozdělit do dalších souborů. Toto vede ke snažšímu čtení souborů a větší znovupoužitelnosti samostatných komponent. -* What a root component file is -* How to import and export a component -* When to use default and named imports and exports -* How to import and export multiple components from one file -* How to split components into multiple files +* Co je kořenová komponenta +* Jak importovat a exportovat komponenty +* Kdy použít výchozí a kdy jmený import a export +* Jak importovat a exportovat vícero komponent z jednoho souboru +* Jak rozdělit komponenty do dalších souborů -## The root component file {/*the-root-component-file*/} +## Kořenová komponenta {/*the-root-component-file*/} -In [Your First Component](/learn/your-first-component), you made a `Profile` component and a `Gallery` component that renders it: +V kapitole [Vaše první komponenta](/learn/your-first-component), byla vytvořena komponenta `Profile` a komponenta `Gallery` ji rendruje: @@ -52,17 +52,17 @@ img { margin: 0 10px 10px 0; height: 90px; } -These currently live in a **root component file,** named `App.js` in this example. In [Create React App](https://create-react-app.dev/), your app lives in `src/App.js`. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page. +V tomto příkladě jsou komponenty v ***kořenovém souboru*** jménem `App.js`. V [Create React App](https://create-react-app.dev/), je aplikace umístěna do `src/App.js`.V závislosti na projektu může být kořenová kompoenenta v úplně jiném souboru. Pokud používáte framework s navigací založenou na souborovém systému jako je třeba Next.js, bude vaše kořenová komponenta jiná pro každou stránku. -## Exporting and importing a component {/*exporting-and-importing-a-component*/} +## Export a import komponent {/*exporting-and-importing-a-component*/} -What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to move `Gallery` and `Profile` out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps: +Představte si, že chcete na úvodní stránce zobrazit seznam učebnic? Nebo vložit seznam profilů někam jinam? Dává smysl přesunout `Gallery` a `Profile` mimo kořenový soubor. Tyto kompoenty tak budou více modulární a znovupoužitelné i v dalších souborech. Komponenty můžete přesouvat pomocí těchto tří kroků: -1. **Make** a new JS file to put the components in. -2. **Export** your function component from that file (using either [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exports). -3. **Import** it in the file where you’ll use the component (using the corresponding technique for importing [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) exports). +1. **Vytvořte** nový JS soubor pro komponenty. +2. **Exportujte** vaši funkcionální komponentu z tohoto souboru (použitím buď [defaultního](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) nabo [jmeného](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exportu). +3. **Importujte** ji do souboru, kde se chystáte tuto komponentu použít (použitím korespondující techniky pro import [defaultní](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) nebo [jmenný](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) import). -Here both `Profile` and `Gallery` have been moved out of `App.js` into a new file called `Gallery.js`. Now you can change `App.js` to import `Gallery` from `Gallery.js`: +Zde obě komponenty `Profile` a `Gallery` byly přesunuty mimo soubor `App.js` do nového souboru `Gallery.js`. Nyný můžete upravit `App.js` aby importoval `Gallery` z `Gallery.js`: @@ -104,31 +104,31 @@ img { margin: 0 10px 10px 0; height: 90px; } -Notice how this example is broken down into two component files now: +Všimněte si jak je tento příklad rozdělen do dvou souborů: 1. `Gallery.js`: - - Defines the `Profile` component which is only used within the same file and is not exported. - - Exports the `Gallery` component as a **default export.** + - Definuje `Profile` komponentu, která je použita pouze uvnitř tohoto souboru a není exportována. + - Exportuje `Gallery` komponentu jako **výchozí export.** 2. `App.js`: - - Imports `Gallery` as a **default import** from `Gallery.js`. - - Exports the root `App` component as a **default export.** + - Importuje `Gallery` přes **defaultní import** z `Gallery.js`. + - Exportuje kořenovou komponentu `App` jako **defaultní export.** -You may encounter files that leave off the `.js` file extension like so: +Můžete si povšimnout, že soubory postrádají koncovku `.js` například tady: -```js +```js import Gallery from './Gallery'; ``` -Either `'./Gallery.js'` or `'./Gallery'` will work with React, though the former is closer to how [native ES Modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) work. +Obě `'./Gallery.js'` nebo `'./Gallery'` boudou fungovat s Reactem, ikdyž první je blíže tomu jak [nativní ES Moduly](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) fungují. -#### Default vs named exports {/*default-vs-named-exports*/} +#### Defaultní vs jmenné exporty {/*default-vs-named-exports*/} There are two primary ways to export values with JavaScript: default exports and named exports. So far, our examples have only used default exports. But you can use one or both of them in the same file. **A file can have no more than one _default_ export, but it can have as many _named_ exports as you like.** @@ -247,22 +247,22 @@ On this page you learned: -#### Split the components further {/*split-the-components-further*/} +#### Další rozdělení kopmponent {/*split-the-components-further*/} -Currently, `Gallery.js` exports both `Profile` and `Gallery`, which is a bit confusing. +Aktuálně, `Gallery.js` exportuje obě komponenty `Profile` a `Gallery`, což je trochu matoucí. -Move the `Profile` component to its own `Profile.js`, and then change the `App` component to render both `` and `` one after another. +Přesuňte komponentu `Profile` vlastního souboru `Profile.js` a změňte komponentu `App`, aby rendrovala obě komponenty `` a `` v tomto pořadí. -You may use either a default or a named export for `Profile`, but make sure that you use the corresponding import syntax in both `App.js` and `Gallery.js`! You can refer to the table from the deep dive above: +Můžete použít buďto defaultní nebo jmenný export pro `Profile`, ale ujistěte se, že použijete korespondující syntaxy pro import v obou soborech `App.js` a `Gallery.js`! Můžete se podívat na tabulku z rozboru výše: -| Syntax | Export statement | Import statement | +| Syntaxe | Výraz pro export | Výraz pro import | | ----------- | ----------- | ----------- | -| Default | `export default function Button() {}` | `import Button from './Button.js';` | -| Named | `export function Button() {}` | `import { Button } from './Button.js';` | +| Defalutní | `export default function Button() {}` | `import Button from './Button.js';` | +| Jmenný | `export function Button() {}` | `import { Button } from './Button.js';` | -Don't forget to import your components where they are called. Doesn't `Gallery` use `Profile`, too? +Nezapomeťe naimportovat vaše komponenty tam, kde je voláte. Nepoužívá komponenta `Gallery` komponentu `Profile` také? @@ -282,7 +282,7 @@ export default function App() { ``` ```js Gallery.js active -// Move me to Profile.js! +// Přesuň mne do Profile.js! export function Profile() { return ( -After you get it working with one kind of exports, make it work with the other kind. +Jakmile to zvládnete s jedním typem exportu, zkuste to i s druhým. -This is the solution with named exports: +Toto je řešení s využitím jmenných exportů: @@ -367,7 +367,7 @@ img { margin: 0 10px 10px 0; height: 90px; } -This is the solution with default exports: +Toto je řešení s využitím defaultních exportů: From b94033c7cc166a2264bf25b9109d2e9437208878 Mon Sep 17 00:00:00 2001 From: pchalupa Date: Wed, 7 Jun 2023 15:46:15 +0200 Subject: [PATCH 2/5] paragraph translation --- .../importing-and-exporting-components.md | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index 3b19b7c1c..ff9effa84 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -130,26 +130,26 @@ Obě `'./Gallery.js'` nebo `'./Gallery'` boudou fungovat s Reactem, ikdyž prvn #### Defaultní vs jmenné exporty {/*default-vs-named-exports*/} -There are two primary ways to export values with JavaScript: default exports and named exports. So far, our examples have only used default exports. But you can use one or both of them in the same file. **A file can have no more than one _default_ export, but it can have as many _named_ exports as you like.** +Máme dva hlavní způsoby, jak exportovat hodnoty v JavaScriptu, defaultní a jmenný export. Pro zatím jsme v našich příkladech používali pouze defaultní exporty. Můžete použít jeden nebo oba způsoby ve stejném souboru. **Soubor může mít pouze jeden _defaultní_ export, ale může mít několik _jmenných_ exportů.** -![Default and named exports](/images/docs/illustrations/i_import-export.svg) +![Defaultní a jmenné exporty](/images/docs/illustrations/i_import-export.svg) -How you export your component dictates how you must import it. You will get an error if you try to import a default export the same way you would a named export! This chart can help you keep track: +Druh exportu komponenty určuje jak ji musíte naimportovat. V případě, že se pokusíte importovat defaultní export jako jmenný, dostanete error! Tato tabulka vám pomůže s určením typu: -| Syntax | Export statement | Import statement | +| Syntaxe | Výraz pro export | Výraz pro import | | ----------- | ----------- | ----------- | -| Default | `export default function Button() {}` | `import Button from './Button.js';` | -| Named | `export function Button() {}` | `import { Button } from './Button.js';` | +| Defalutní | `export default function Button() {}` | `import Button from './Button.js';` | +| Jmenný | `export function Button() {}` | `import { Button } from './Button.js';` | -When you write a _default_ import, you can put any name you want after `import`. For example, you could write `import Banana from './Button.js'` instead and it would still provide you with the same default export. In contrast, with named imports, the name has to match on both sides. That's why they are called _named_ imports! +S _defaultním_ importem můžete za `import` vložit jakékoliv jméno. Na příklad můžete napsat `import Banana from './Button.js'` a stále dostane defaulutní export. Na rozdíl, v případě jmenných importů, musí jméno odpovídat na obou stranách. Proto se jim říká _jmenné_ importy! -**People often use default exports if the file exports only one component, and use named exports if it exports multiple components and values.** Regardless of which coding style you prefer, always give meaningful names to your component functions and the files that contain them. Components without names, like `export default () => {}`, are discouraged because they make debugging harder. +**Defaultní export se většinou používá pokud soubor exportuje pouze jednu komponentu. Naopak jmenný export se většinou používá tam kde se exportuje více komponent nebo hodnot z jednoho souboru.** Nehledě jaký programaátorský styl preferujete, dávejte komponentám a souborům které je obsahují smysluplné názvy. Komponenty bez jmen, například `export default () => {}`, jsou nežádoucí protože je těžší je deubgovat. -## Exporting and importing multiple components from the same file {/*exporting-and-importing-multiple-components-from-the-same-file*/} +## Exportování a importování vícero komponent ze stejného souboru {/*exporting-and-importing-multiple-components-from-the-same-file*/} -What if you want to show just one `Profile` instead of a gallery? You can export the `Profile` component, too. But `Gallery.js` already has a *default* export, and you can't have _two_ default exports. You could create a new file with a default export, or you could add a *named* export for `Profile`. **A file can only have one default export, but it can have numerous named exports!** +Co když chceme zobrazit pouze `Profile` namísto galerie? Komponentu `Profile` můžete vyexportovat také. Ale soubor `Gallery.js` již má *defaultní* export a nemůže mít _two_ defaultní exporty. Můžete vytvořit nový soubor s defaultním exportem, nebo můžete přidat jmenný export pro komponentu `Profile`. **Soubor může mít pouze jeden defaultní export, ale může mít vícero jmenných exportů!** @@ -262,7 +262,7 @@ Můžete použít buďto defaultní nebo jmenný export pro `Profile`, ale ujist -Nezapomeťe naimportovat vaše komponenty tam, kde je voláte. Nepoužívá komponenta `Gallery` komponentu `Profile` také? +Nezapomeňte naimportovat vaše komponenty tam, kde je voláte. Nepoužívá komponenta `Gallery` komponentu `Profile` také? From 0d2733691e24ade0d8fceba2eccc84a501e8714a Mon Sep 17 00:00:00 2001 From: pchalupa Date: Thu, 8 Jun 2023 13:24:45 +0200 Subject: [PATCH 3/5] draft translation --- .../importing-and-exporting-components.md | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index ff9effa84..5e9a16707 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -153,11 +153,11 @@ Co když chceme zobrazit pouze `Profile` namísto galerie? Komponentu `Profile` -To reduce the potential confusion between default and named exports, some teams choose to only stick to one style (default or named), or avoid mixing them in a single file. Do what works best for you! +Pro snížení nejasností mezi defaultními a jmennými exporty, se některé týmy rozhodly používat pouze jeden styl (defaulutní nebo jmený) nebo nemíchat tyto styly v jednom souboru. Zařiďte se podle sebe! -First, **export** `Profile` from `Gallery.js` using a named export (no `default` keyword): +Nejprve **exportujte** `Profile` z `Gallery.js` použitím jmenného exportu (bez klíčového slova `default`): ```js export function Profile() { @@ -165,13 +165,13 @@ export function Profile() { } ``` -Then, **import** `Profile` from `Gallery.js` to `App.js` using a named import (with the curly braces): +Poté **importujte** `Profile` z `Gallery.js` do `App.js` použitím jmenného importu (se složenými závorkami): ```js import { Profile } from './Gallery.js'; ``` -Finally, **render** `` from the `App` component: +Nakonec **vyrenderujte** `` z komponenty `App`: ```js export default function App() { @@ -179,7 +179,7 @@ export default function App() { } ``` -Now `Gallery.js` contains two exports: a default `Gallery` export, and a named `Profile` export. `App.js` imports both of them. Try editing `` to `` and back in this example: +Nyní `Gallery.js` obsahuje dva exporty, defaultní `Gallery` a jmenný `Profile`. `App.js` importuje oba dva. Zkuste upravit `` na `` a zpět v následujícím příkladu: @@ -222,24 +222,24 @@ img { margin: 0 10px 10px 0; height: 90px; } -Now you're using a mix of default and named exports: +Nyný používáte mix defaultních a jmenných exportů: * `Gallery.js`: - - Exports the `Profile` component as a **named export called `Profile`.** - - Exports the `Gallery` component as a **default export.** + - Exportuje komponentu `Profile` jako **jmenný export `Profile`.** + - Exportuje komponentu `Gallery` jako **defaultní export.** * `App.js`: - - Imports `Profile` as a **named import called `Profile`** from `Gallery.js`. - - Imports `Gallery` as a **default import** from `Gallery.js`. - - Exports the root `App` component as a **default export.** + - Importuje `Profile` jako **jmenný import `Profile`** z `Gallery.js`. + - Importuje `Gallery` jako **defaultní import** z `Gallery.js`. + - Exportuje kořenovou komponentu `App` jako **defaultní export.** -On this page you learned: +Na této stránce jste se naučili: -* What a root component file is -* How to import and export a component -* When and how to use default and named imports and exports -* How to export multiple components from the same file +* Co je to soubor s kořenovou komponentou +* Jak importovat a exportovat komponentu +* Kdy a jak použít defaultní a jmenný import a export +* Jak exportovat vícero komponent z jednoho souboru From 6396178be210594838cbc9e4015fcbeecc5701c7 Mon Sep 17 00:00:00 2001 From: pchalupa Date: Mon, 12 Jun 2023 21:26:22 +0200 Subject: [PATCH 4/5] translation fixes --- .../importing-and-exporting-components.md | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index 5e9a16707..b1b7c422a 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -4,15 +4,15 @@ title: Importování a exportování komponent -Krása komponent tkví v jejich znovupoužitelnosti: můžete vytvořit komponentu, která bude složena z dalších komponent. Občas dává smysl, že jakmile začnete přidávat více a více kompoentnt, je dobré je rozdělit do dalších souborů. Toto vede ke snažšímu čtení souborů a větší znovupoužitelnosti samostatných komponent. +Krása komponent spočívá v jejich znovupoužitelnosti, můžete vytvořit komponentu, která je složená z dalších komponent. Občas dává smysl, že jakmile začnete přidávat více a více komponent, je dobré je rozdělit do více souborů. Toto vede ke snazšímu čtení kódu a větší znovupoužitelnosti jednotlivých komponent. -* Co je kořenová komponenta +* Co je to kořenová komponenta * Jak importovat a exportovat komponenty -* Kdy použít výchozí a kdy jmený import a export +* Kdy použít výchozí a kdy jmenný import a export * Jak importovat a exportovat vícero komponent z jednoho souboru * Jak rozdělit komponenty do dalších souborů @@ -20,7 +20,7 @@ Krása komponent tkví v jejich znovupoužitelnosti: můžete vytvořit komponen ## Kořenová komponenta {/*the-root-component-file*/} -V kapitole [Vaše první komponenta](/learn/your-first-component), byla vytvořena komponenta `Profile` a komponenta `Gallery` ji rendruje: +V kapitole [Vaše první komponenta](/learn/your-first-component), byly vytvořeny komponenty `Profile` a `Gallery`, která ji rendruje: @@ -52,17 +52,17 @@ img { margin: 0 10px 10px 0; height: 90px; } -V tomto příkladě jsou komponenty v ***kořenovém souboru*** jménem `App.js`. V [Create React App](https://create-react-app.dev/), je aplikace umístěna do `src/App.js`.V závislosti na projektu může být kořenová kompoenenta v úplně jiném souboru. Pokud používáte framework s navigací založenou na souborovém systému jako je třeba Next.js, bude vaše kořenová komponenta jiná pro každou stránku. +V tomto příkladě jsou komponenty v ***kořenovém souboru*** jménem `App.js`. V [Create React App](https://create-react-app.dev/), je aplikace umístěna do `src/App.js`. V závislosti na projektu může být kořenová komponenta v úplně jiném souboru. Pokud používáte framework s navigací založenou na souborovém systému, jako je třeba Next.js, bude vaše kořenová komponenta jiná pro každou stránku. ## Export a import komponent {/*exporting-and-importing-a-component*/} -Představte si, že chcete na úvodní stránce zobrazit seznam učebnic? Nebo vložit seznam profilů někam jinam? Dává smysl přesunout `Gallery` a `Profile` mimo kořenový soubor. Tyto kompoenty tak budou více modulární a znovupoužitelné i v dalších souborech. Komponenty můžete přesouvat pomocí těchto tří kroků: +Představte si, že chcete na úvodní stránce zobrazit seznam učebnic. Nebo vložit seznam profilů někam jinam. Teď dává smysl přesunout `Gallery` a `Profile` mimo kořenový soubor. Tyto komponenty tak budou více modulární a znovupoužitelné i v dalších souborech. Komponenty můžete přesouvat pomocí těchto tří kroků: 1. **Vytvořte** nový JS soubor pro komponenty. 2. **Exportujte** vaši funkcionální komponentu z tohoto souboru (použitím buď [defaultního](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) nabo [jmeného](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exportu). 3. **Importujte** ji do souboru, kde se chystáte tuto komponentu použít (použitím korespondující techniky pro import [defaultní](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) nebo [jmenný](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) import). -Zde obě komponenty `Profile` a `Gallery` byly přesunuty mimo soubor `App.js` do nového souboru `Gallery.js`. Nyný můžete upravit `App.js` aby importoval `Gallery` z `Gallery.js`: +Obě komponenty, `Profile` a `Gallery`, byly přesunuty mimo soubor `App.js` do nového souboru `Gallery.js`. Nyní můžete upravit `App.js` aby importoval `Gallery` z `Gallery.js`: @@ -104,7 +104,7 @@ img { margin: 0 10px 10px 0; height: 90px; } -Všimněte si jak je tento příklad rozdělen do dvou souborů: +Všimněte si, jak je tento příklad rozdělen do dvou souborů: 1. `Gallery.js`: - Definuje `Profile` komponentu, která je použita pouze uvnitř tohoto souboru a není exportována. @@ -116,21 +116,21 @@ Všimněte si jak je tento příklad rozdělen do dvou souborů: -Můžete si povšimnout, že soubory postrádají koncovku `.js` například tady: +Můžete si povšimnout, že soubory postrádají příponu `.js` například tady: ```js import Gallery from './Gallery'; ``` -Obě `'./Gallery.js'` nebo `'./Gallery'` boudou fungovat s Reactem, ikdyž první je blíže tomu jak [nativní ES Moduly](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) fungují. +Obě `'./Gallery.js'` nebo `'./Gallery'` budou fungovat s Reactem, přestože první je blíže tomu, jak [nativní ES Moduly](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) fungují. -#### Defaultní vs jmenné exporty {/*default-vs-named-exports*/} +#### Defaultní vs. jmenné exporty {/*default-vs-named-exports*/} -Máme dva hlavní způsoby, jak exportovat hodnoty v JavaScriptu, defaultní a jmenný export. Pro zatím jsme v našich příkladech používali pouze defaultní exporty. Můžete použít jeden nebo oba způsoby ve stejném souboru. **Soubor může mít pouze jeden _defaultní_ export, ale může mít několik _jmenných_ exportů.** +Máme dva hlavní způsoby jak exportovat hodnoty v JavaScriptu, defaultní a jmenný export. Prozatím jsme v našich příkladech používali pouze defaultní exporty. V jednom souboru můžeme použít jeden nebo oba způsoby. **Soubor může mít pouze jeden _defaultní_ export, ale může mít několik _jmenných_ exportů.** ![Defaultní a jmenné exporty](/images/docs/illustrations/i_import-export.svg) @@ -141,19 +141,19 @@ Druh exportu komponenty určuje jak ji musíte naimportovat. V případě, že s | Defalutní | `export default function Button() {}` | `import Button from './Button.js';` | | Jmenný | `export function Button() {}` | `import { Button } from './Button.js';` | -S _defaultním_ importem můžete za `import` vložit jakékoliv jméno. Na příklad můžete napsat `import Banana from './Button.js'` a stále dostane defaulutní export. Na rozdíl, v případě jmenných importů, musí jméno odpovídat na obou stranách. Proto se jim říká _jmenné_ importy! +S _defaultním_ importem můžete za klíčové slovo `import` vložit jakékoliv jméno. Například můžete napsat `import Banana from './Button.js'` a stále dostane defaulutní export. Na rozdíl od jmenných importů, kde musí jméno odpovídat na obou stranách. Proto se jim říká _jmenné_ importy! -**Defaultní export se většinou používá pokud soubor exportuje pouze jednu komponentu. Naopak jmenný export se většinou používá tam kde se exportuje více komponent nebo hodnot z jednoho souboru.** Nehledě jaký programaátorský styl preferujete, dávejte komponentám a souborům které je obsahují smysluplné názvy. Komponenty bez jmen, například `export default () => {}`, jsou nežádoucí protože je těžší je deubgovat. +**Defaultní export se většinou používá pokud soubor exportuje pouze jednu komponentu. Naopak jmenný export se používá tam, kde se exportuje více komponent nebo hodnot z jednoho souboru.** Nehledě jaký programátorský styl preferujete, dávejte komponentám a souborům které je obsahují smysluplné názvy. Bezejmenná komponenta, například `export default () => {}`, je nežádoucí protože je těžké ji deubgovat. ## Exportování a importování vícero komponent ze stejného souboru {/*exporting-and-importing-multiple-components-from-the-same-file*/} -Co když chceme zobrazit pouze `Profile` namísto galerie? Komponentu `Profile` můžete vyexportovat také. Ale soubor `Gallery.js` již má *defaultní* export a nemůže mít _two_ defaultní exporty. Můžete vytvořit nový soubor s defaultním exportem, nebo můžete přidat jmenný export pro komponentu `Profile`. **Soubor může mít pouze jeden defaultní export, ale může mít vícero jmenných exportů!** +Co když chceme zobrazit pouze `Profile` namísto galerie? Komponentu `Profile` lze také vyexportovat. Pozor, soubor `Gallery.js` již má *defaultní* export a nemůže mít _dva_ defaultní exporty. Můžete vytvořit nový soubor s defaultním exportem, nebo můžete přidat jmenný export pro komponentu `Profile`. **Soubor může mít pouze jeden defaultní export, ale může mít vícero jmenných exportů!** -Pro snížení nejasností mezi defaultními a jmennými exporty, se některé týmy rozhodly používat pouze jeden styl (defaulutní nebo jmený) nebo nemíchat tyto styly v jednom souboru. Zařiďte se podle sebe! +Pro zjednodušení, se některé týmy rozhodly používat pouze jeden styl (defaulutní nebo jmený) nebo nemíchat tyto styly v jednom souboru. Zařiďte se podle sebe! @@ -171,7 +171,7 @@ Poté **importujte** `Profile` z `Gallery.js` do `App.js` použitím jmenného i import { Profile } from './Gallery.js'; ``` -Nakonec **vyrenderujte** `` z komponenty `App`: +Nakonec **vyrenderujte** `` v komponentě `App`: ```js export default function App() { @@ -179,7 +179,7 @@ export default function App() { } ``` -Nyní `Gallery.js` obsahuje dva exporty, defaultní `Gallery` a jmenný `Profile`. `App.js` importuje oba dva. Zkuste upravit `` na `` a zpět v následujícím příkladu: +Nyní, `Gallery.js` obsahuje dva exporty, defaultní `Gallery` a jmenný `Profile`. `App.js` importuje oba dva. Zkuste upravit `` na `` a zpět v následujícím příkladu: @@ -222,7 +222,7 @@ img { margin: 0 10px 10px 0; height: 90px; } -Nyný používáte mix defaultních a jmenných exportů: +Nyní používáte mix defaultních a jmenných exportů: * `Gallery.js`: - Exportuje komponentu `Profile` jako **jmenný export `Profile`.** @@ -247,13 +247,13 @@ Na této stránce jste se naučili: -#### Další rozdělení kopmponent {/*split-the-components-further*/} +#### Další rozdělení komponent {/*split-the-components-further*/} -Aktuálně, `Gallery.js` exportuje obě komponenty `Profile` a `Gallery`, což je trochu matoucí. +Nyní, `Gallery.js` exportuje obě komponenty `Profile` a `Gallery` což je trochu matoucí. -Přesuňte komponentu `Profile` vlastního souboru `Profile.js` a změňte komponentu `App`, aby rendrovala obě komponenty `` a `` v tomto pořadí. +Přesuňte komponentu `Profile` do vlastního souboru `Profile.js` a změňte komponentu `App` tak, aby rendrovala obě komponenty `` a `` v tomto pořadí. -Můžete použít buďto defaultní nebo jmenný export pro `Profile`, ale ujistěte se, že použijete korespondující syntaxy pro import v obou soborech `App.js` a `Gallery.js`! Můžete se podívat na tabulku z rozboru výše: +Můžete použít buďto defaultní nebo jmenný export pro `Profile`, ale ujistěte se, že použijete korespondující syntaxi pro import v obou souborech `App.js` a `Gallery.js`! Můžete se podívat na tabulku z rozboru výše: | Syntaxe | Výraz pro export | Výraz pro import | | ----------- | ----------- | ----------- | From adb3a007846e5fc44a82e6a1d47fb27d6aa81d0a Mon Sep 17 00:00:00 2001 From: pchalupa Date: Mon, 12 Jun 2023 21:37:40 +0200 Subject: [PATCH 5/5] translation fixes --- .../importing-and-exporting-components.md | 44 +++++++++---------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index b1b7c422a..0204ef5b1 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -59,8 +59,8 @@ V tomto příkladě jsou komponenty v ***kořenovém souboru*** jménem `App.js` Představte si, že chcete na úvodní stránce zobrazit seznam učebnic. Nebo vložit seznam profilů někam jinam. Teď dává smysl přesunout `Gallery` a `Profile` mimo kořenový soubor. Tyto komponenty tak budou více modulární a znovupoužitelné i v dalších souborech. Komponenty můžete přesouvat pomocí těchto tří kroků: 1. **Vytvořte** nový JS soubor pro komponenty. -2. **Exportujte** vaši funkcionální komponentu z tohoto souboru (použitím buď [defaultního](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) nabo [jmeného](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exportu). -3. **Importujte** ji do souboru, kde se chystáte tuto komponentu použít (použitím korespondující techniky pro import [defaultní](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) nebo [jmenný](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) import). +2. **Exportujte** vaši funkcionální komponentu z tohoto souboru (použitím buď [výchozího](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) nebo [jmenného](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exportu). +3. **Importujte** ji do souboru, kde se chystáte tuto komponentu použít (použitím korespondující techniky pro import [výchozí](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) nebo [jmenný](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) import). Obě komponenty, `Profile` a `Gallery`, byly přesunuty mimo soubor `App.js` do nového souboru `Gallery.js`. Nyní můžete upravit `App.js` aby importoval `Gallery` z `Gallery.js`: @@ -110,8 +110,8 @@ Všimněte si, jak je tento příklad rozdělen do dvou souborů: - Definuje `Profile` komponentu, která je použita pouze uvnitř tohoto souboru a není exportována. - Exportuje `Gallery` komponentu jako **výchozí export.** 2. `App.js`: - - Importuje `Gallery` přes **defaultní import** z `Gallery.js`. - - Exportuje kořenovou komponentu `App` jako **defaultní export.** + - Importuje `Gallery` přes **výchozí import** z `Gallery.js`. + - Exportuje kořenovou komponentu `App` jako **výchozí export.** @@ -128,32 +128,32 @@ Obě `'./Gallery.js'` nebo `'./Gallery'` budou fungovat s Reactem, přestože pr -#### Defaultní vs. jmenné exporty {/*default-vs-named-exports*/} +#### Výchozí vs. jmenné exporty {/*default-vs-named-exports*/} -Máme dva hlavní způsoby jak exportovat hodnoty v JavaScriptu, defaultní a jmenný export. Prozatím jsme v našich příkladech používali pouze defaultní exporty. V jednom souboru můžeme použít jeden nebo oba způsoby. **Soubor může mít pouze jeden _defaultní_ export, ale může mít několik _jmenných_ exportů.** +Máme dva hlavní způsoby jak exportovat hodnoty v JavaScriptu, výchozí a jmenný export. Prozatím jsme v našich příkladech používali pouze výchozí exporty. V jednom souboru můžeme použít jeden nebo oba způsoby. **Soubor může mít pouze jeden _výchozí_ export, ale může mít několik _jmenných_ exportů.** -![Defaultní a jmenné exporty](/images/docs/illustrations/i_import-export.svg) +![Výchozí a jmenné exporty](/images/docs/illustrations/i_import-export.svg) -Druh exportu komponenty určuje jak ji musíte naimportovat. V případě, že se pokusíte importovat defaultní export jako jmenný, dostanete error! Tato tabulka vám pomůže s určením typu: +Druh exportu komponenty určuje jak ji musíte naimportovat. V případě, že se pokusíte importovat výchozí export jako jmenný, dostanete error! Tato tabulka vám pomůže s určením typu: | Syntaxe | Výraz pro export | Výraz pro import | | ----------- | ----------- | ----------- | -| Defalutní | `export default function Button() {}` | `import Button from './Button.js';` | +| Výchozí | `export default function Button() {}` | `import Button from './Button.js';` | | Jmenný | `export function Button() {}` | `import { Button } from './Button.js';` | -S _defaultním_ importem můžete za klíčové slovo `import` vložit jakékoliv jméno. Například můžete napsat `import Banana from './Button.js'` a stále dostane defaulutní export. Na rozdíl od jmenných importů, kde musí jméno odpovídat na obou stranách. Proto se jim říká _jmenné_ importy! +S _výchozím_ importem můžete za klíčové slovo `import` vložit jakékoliv jméno. Například můžete napsat `import Banana from './Button.js'` a stále dostane výchozí export. Na rozdíl od jmenných importů, kde musí jméno odpovídat na obou stranách. Proto se jim říká _jmenné_ importy! -**Defaultní export se většinou používá pokud soubor exportuje pouze jednu komponentu. Naopak jmenný export se používá tam, kde se exportuje více komponent nebo hodnot z jednoho souboru.** Nehledě jaký programátorský styl preferujete, dávejte komponentám a souborům které je obsahují smysluplné názvy. Bezejmenná komponenta, například `export default () => {}`, je nežádoucí protože je těžké ji deubgovat. +**Výchozí export se většinou používá pokud soubor exportuje pouze jednu komponentu. Naopak jmenný export se používá tam, kde se exportuje více komponent nebo hodnot z jednoho souboru.** Nehledě jaký programátorský styl preferujete, dávejte komponentám a souborům které je obsahují smysluplné názvy. Bezejmenná komponenta, například `export default () => {}`, je nežádoucí protože je těžké ji debugovat. ## Exportování a importování vícero komponent ze stejného souboru {/*exporting-and-importing-multiple-components-from-the-same-file*/} -Co když chceme zobrazit pouze `Profile` namísto galerie? Komponentu `Profile` lze také vyexportovat. Pozor, soubor `Gallery.js` již má *defaultní* export a nemůže mít _dva_ defaultní exporty. Můžete vytvořit nový soubor s defaultním exportem, nebo můžete přidat jmenný export pro komponentu `Profile`. **Soubor může mít pouze jeden defaultní export, ale může mít vícero jmenných exportů!** +Co když chceme zobrazit pouze `Profile` namísto galerie? Komponentu `Profile` lze také vyexportovat. Pozor, soubor `Gallery.js` již má *výchozí* export a nemůže mít _dva_ výchozí exporty. Můžete vytvořit nový soubor s výchozím exportem, nebo můžete přidat jmenný export pro komponentu `Profile`. **Soubor může mít pouze jeden výchozí export, ale může mít vícero jmenných exportů!** -Pro zjednodušení, se některé týmy rozhodly používat pouze jeden styl (defaulutní nebo jmený) nebo nemíchat tyto styly v jednom souboru. Zařiďte se podle sebe! +Pro zjednodušení, se některé týmy rozhodly používat pouze jeden styl (výchozí nebo jmenný) nebo nemíchat tyto styly v jednom souboru. Zařiďte se podle sebe! @@ -179,7 +179,7 @@ export default function App() { } ``` -Nyní, `Gallery.js` obsahuje dva exporty, defaultní `Gallery` a jmenný `Profile`. `App.js` importuje oba dva. Zkuste upravit `` na `` a zpět v následujícím příkladu: +Nyní, `Gallery.js` obsahuje dva exporty, výchozí `Gallery` a jmenný `Profile`. `App.js` importuje oba dva. Zkuste upravit `` na `` a zpět v následujícím příkladu: @@ -222,15 +222,15 @@ img { margin: 0 10px 10px 0; height: 90px; } -Nyní používáte mix defaultních a jmenných exportů: +Nyní používáte mix výchozích a jmenných exportů: * `Gallery.js`: - Exportuje komponentu `Profile` jako **jmenný export `Profile`.** - - Exportuje komponentu `Gallery` jako **defaultní export.** + - Exportuje komponentu `Gallery` jako **výchozí export.** * `App.js`: - Importuje `Profile` jako **jmenný import `Profile`** z `Gallery.js`. - - Importuje `Gallery` jako **defaultní import** z `Gallery.js`. - - Exportuje kořenovou komponentu `App` jako **defaultní export.** + - Importuje `Gallery` jako **výchozí import** z `Gallery.js`. + - Exportuje kořenovou komponentu `App` jako **výchozí export.** @@ -238,7 +238,7 @@ Na této stránce jste se naučili: * Co je to soubor s kořenovou komponentou * Jak importovat a exportovat komponentu -* Kdy a jak použít defaultní a jmenný import a export +* Kdy a jak použít výchozí a jmenný import a export * Jak exportovat vícero komponent z jednoho souboru @@ -253,11 +253,11 @@ Nyní, `Gallery.js` exportuje obě komponenty `Profile` a `Gallery` což je troc Přesuňte komponentu `Profile` do vlastního souboru `Profile.js` a změňte komponentu `App` tak, aby rendrovala obě komponenty `` a `` v tomto pořadí. -Můžete použít buďto defaultní nebo jmenný export pro `Profile`, ale ujistěte se, že použijete korespondující syntaxi pro import v obou souborech `App.js` a `Gallery.js`! Můžete se podívat na tabulku z rozboru výše: +Můžete použít buďto výchozí nebo jmenný export pro `Profile`, ale ujistěte se, že použijete korespondující syntaxi pro import v obou souborech `App.js` a `Gallery.js`! Můžete se podívat na tabulku z rozboru výše: | Syntaxe | Výraz pro export | Výraz pro import | | ----------- | ----------- | ----------- | -| Defalutní | `export default function Button() {}` | `import Button from './Button.js';` | +| Výchozí | `export default function Button() {}` | `import Button from './Button.js';` | | Jmenný | `export function Button() {}` | `import { Button } from './Button.js';` | @@ -367,7 +367,7 @@ img { margin: 0 10px 10px 0; height: 90px; } -Toto je řešení s využitím defaultních exportů: +Toto je řešení s využitím výchozí exportů: