Skip to content

Commit 1b95bfe

Browse files
committed
fix: vykreslit x vyrendrovat
1 parent 52bad2e commit 1b95bfe

File tree

1 file changed

+7
-7
lines changed

1 file changed

+7
-7
lines changed

src/content/learn/add-react-to-an-existing-project.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ Předpokládejme, že máte existující stránku, která byla vytvořena s vyu
3535
Tento postup lze provést ve dvou krocích:
3636

3737
1. **Nakonfigurujte si JavaScriptové prostředí** tak, ať vám dovolí používat [syntaxi JSX](/learn/writing-markup-with-jsx), rozdělit kód do modulů pomocí syntaxe [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) a používat balíčky (např. React) z registru balíčků [npm](https://www.npmjs.com/).
38-
2. **Vykreslete React komponenty** tam, kde je chcete na stránce zobrazit.
38+
2. **Vyrendrujte React komponenty** tam, kde je chcete na stránce zobrazit.
3939

4040
Přesný postup se bude lišit v závislosti na vašem existujícím nastavení stránky, takže se podíváme na některé detaily.
4141

@@ -73,7 +73,7 @@ import { createRoot } from 'react-dom/client';
7373
// Nahradí existující obsah HTML
7474
document.body.innerHTML = '<div id="app"></div>';
7575

76-
// Do něj nyní vykreslíme React komponentu
76+
// Do něj nyní vyrendrujeme React komponentu
7777
const root = createRoot(document.getElementById('app'));
7878
root.render(<h1>Hello, world</h1>);
7979
```
@@ -88,7 +88,7 @@ První integrace modulárního prostředí JavaScriptu do existujícího projekt
8888

8989
</Note>
9090

91-
### Krok 2: Vykreslení React komponenty na libovolném místě na stránce {/*step-2-render-react-components-anywhere-on-the-page*/}
91+
### Krok 2: Vyrendrujte React komponenty na libovolném místě na stránce {/*step-2-render-react-components-anywhere-on-the-page*/}
9292

9393
V předchozím kroku jste tento kód umístili na začátek hlavního souboru:
9494

@@ -98,7 +98,7 @@ import { createRoot } from 'react-dom/client';
9898
// Nahradí existující obsah HTML
9999
document.body.innerHTML = '<div id="app"></div>';
100100

101-
// Do něj nyní vykreslíme React komponentu
101+
// Do něj nyní vyrendrujeme React komponentu
102102
const root = createRoot(document.getElementById('app'));
103103
root.render(<h1>Hello, world</h1>);
104104
```
@@ -107,15 +107,15 @@ Samozřejmě, v reálném případě nebudete chtít existující obsah HTML vym
107107

108108
Tento kód odstraňte.
109109

110-
Spíše než vykreslovat celou stránku pomocí Reactu, budete chtít vykreslit React komponenty na specifických místech v HTML. Otevřete svou HTML stránku (nebo serverové šablony, které ji generují) a přidejte například unikátní atribut [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) k libovolnému tagu:
110+
Spíše než rendrovat celou stránku pomocí Reactu, budete chtít vyrendrovat React komponenty na specifických místech v HTML. Otevřete svou HTML stránku (nebo serverové šablony, které ji generují) a přidejte například unikátní atribut [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) k libovolnému tagu:
111111

112112
```html
113113
<!-- ... někde v html ... -->
114114
<nav id="navigation"></nav>
115115
<!-- ... více html ... -->
116116
```
117117

118-
Toto vám umožní vyhledat tento HTML prvek pomocí funkce [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) a předat ho do funkce [`createRoot`](/reference/react-dom/client/createRoot), abyste v něm mohli následně vykreslit vlastní komponentu React:
118+
Toto vám umožní vyhledat tento HTML prvek pomocí funkce [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) a předat ho do funkce [`createRoot`](/reference/react-dom/client/createRoot), abyste v něm mohli následně vyrendrovat vlastní komponentu React:
119119

120120
<Sandpack>
121121

@@ -146,7 +146,7 @@ root.render(<NavigationBar />);
146146

147147
</Sandpack>
148148

149-
Všimněte si, že původní obsah HTML ze souboru `index.html` zůstává nezměněn, zatímco vaše vlastní React komponenta `NavigationBar` se nyní zobrazuje uvnitř `<nav id="navigation">` v rámci vašeho HTML. Pro hlubší pochopení vykreslování React komponent uvnitř existující HTML stránky se podívejte na dokumentaci k funkci [`createRoot`](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react).
149+
Všimněte si, že původní obsah HTML ze souboru `index.html` zůstává nezměněn, zatímco vaše vlastní React komponenta `NavigationBar` se nyní zobrazuje uvnitř `<nav id="navigation">` v rámci vašeho HTML. Pro hlubší pochopení rendrování React komponentů uvnitř existující HTML stránky, doporučujeme prostudovat dokumentaci k funkci [`createRoot`](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react).
150150

151151
Běžným postupem při implementaci Reactu do existujícího projektu je začít s malými interaktivními komponenty (např. tlačítky) a postupně "postupovat nahoru", dokud celou stránku netvoří komponenty React. Pokud někdy dosáhnete tohoto bodu, doporučujeme hned poté přejít na [React framework](/learn/start-a-new-react-project), abyste z něj mohli vytěžit maximum.
152152

0 commit comments

Comments
 (0)