You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/add-react-to-an-existing-project.md
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -34,7 +34,7 @@ Předpokládejme, že máte stávající stránku, která byla vytvořena s vyu
34
34
35
35
Tento postup lze provést ve dvou krocích:
36
36
37
-
1.**Nakonfigurujte si JavaScriptové prostředí** tak, ať vám umožňí 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/).
37
+
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
38
2.**Vykreslete React komponenty** tam, kde je chcete na stránce zobrazit.
39
39
40
40
Přesný postup se bude lišit v závislosti na vašem současném nastavení stránky, takže se podíváme na některé detaily.
@@ -43,7 +43,7 @@ Přesný postup se bude lišit v závislosti na vašem současném nastavení st
43
43
44
44
Modulární prostředí JavaScriptu umožňuje psát React komponenty v jednotlivých souborech, na rozdíl od psaní celého kódu v jednom souboru. Modulární prostředí navíc nabízí možnost využít různé balíčky od jiných vývojářů, které jsou publikovány v [npm](https://www.npmjs.com/) registru - včetně samotného Reactu! Způsob implementace bude zcela záviset na vašem současném nastavení:
45
45
46
-
***If your app is already split into files that use`import` statements,**try to use the setup you already have. Check whether writing `<div />`in your JS code causes a syntax error. If it causes a syntax error, you might need to [transform your JavaScript code with Babel](https://babeljs.io/setup), and enable the [Babel React preset](https://babeljs.io/docs/babel-preset-react)to use JSX.
46
+
***Pokud je vaše aplikace již rozdělena do souborů využívajících příkazy`import`,**můžete vyzkoušet stávající nastavení. Ujistěte se, že zápis `<div />`ve vašem JavaScript kód nezpůsobuje syntaktickou chybu. Pokud to syntaktickou chybu způsobí, bude možná nutné použít [nástroj Babel k transformaci vašeho JavaScriptového kódu](https://babeljs.io/setup) a aktivovat [předvolbu Babel React](https://babeljs.io/docs/babel-preset-react)pro použití JSX.
47
47
48
48
***Pokud vaše aplikace nemá již existující nastavení pro kompilaci JavaScriptových modulů,** nastavte jej pomocí [Vite](https://vitejs.dev/). Komunita Vite se stará o [řadu integrací s backendovými frameworky](https://github.com/vitejs/awesome-vite#integrations-with-backends), včetně Rails, Django a Laravel. Pokud váš backendový framework není v seznamu uveden, [postupujte podle tohoto návodu](https://vitejs.dev/guide/backend-integration.html) a manuálně integrujte Vite do vašeho backendu.
49
49
@@ -73,7 +73,7 @@ import { createRoot } from 'react-dom/client';
Samozřejmě, v reálném scénáři nebudete chtít vymazat existující obsah HTML!
106
+
Samozřejmě, v reálném scénáři nebudete chtít stávající obsah HTML vymazat!
107
107
108
108
Tento kód odstraňte.
109
109
@@ -115,7 +115,7 @@ Spíše než vykreslovat celou stránku pomocí Reactu, budete pravděpodobně c
115
115
<!-- ... další html ... -->
116
116
```
117
117
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) předat jej do funkce [`createRoot`](/reference/react-dom/client/createRoot) abyste v něm mohli vykreslit vlastní komponentu Reactu:
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:
Všimněte si, že původní obsah HTML ze souboru `index.html` zůstává nezměněn, zatímco vaše vlastní Reactu komponenta `NavigationBar` se nyní zobrazuje uvnitř `<nav id="navigation">` v rámci vašeho HTML. Pro více informací o vykreslování React komponent uvnitř existující HTML stránky se podívejte na dokumentaci k [`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í 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).
150
150
151
-
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ěžili maximum.
151
+
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.
152
152
153
153
## Implementace React Native do existující nativní mobilní aplikace {/*using-react-native-in-an-existing-native-mobile-app*/}
0 commit comments