Skip to content

Commit

Permalink
Merge pull request #661 from Czechitas-podklady-WEB/660-react-2-oprav…
Browse files Browse the repository at this point in the history
…y-překlepů

React 2: Opravy překlepů
  • Loading branch information
podlomar authored Nov 4, 2023
2 parents 6921376 + 88a217b commit 033ce33
Show file tree
Hide file tree
Showing 4 changed files with 7 additions and 7 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,6 @@ solutionAccess: lock

:::solution

Řešení naleznete v samostatném [Codesanboxu zde](https://codesandbox.io/s/da-web-prazsky-cas-8n3ruv?file=/src/App.jsx).
Řešení naleznete v samostatném [Codesandboxu zde](https://codesandbox.io/s/da-web-prazsky-cas-8n3ruv?file=/src/App.jsx).

:::
2 changes: 1 addition & 1 deletion daweb/react/formulare-efekty/efekty-api.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
## Efekty a volání API

Pokud chceme v naší aplikaci zobrazovat data z nějakého API, musíme si tato data stáhnout pomocí nám již známé funkce `fetch`. V čiistéme JavaScriptu jsme byli zvýklí tuto funkci volat ve chvíli, kdy se načítá naše stránka a načíst si všechna data pro celou stránku najednou. V Reactu však můžeme načítat data jen pro každou komponentu zvlášť. Funkci `fetch` tak budeme chtít volat ve chvíli, kdy se naše komponenta poprvé objeví na stránce. To zní jako případ pro použale můžeme ji pojmenovat jakkoliv.ití efektů.
Pokud chceme v naší aplikaci zobrazovat data z nějakého API, musíme si tato data stáhnout pomocí nám již známé funkce `fetch`. V čiistéme JavaScriptu jsme byli zvýklí tuto funkci volat ve chvíli, kdy se načítá naše stránka a načíst si všechna data pro celou stránku najednou. V Reactu však můžeme načítat data jen pro každou komponentu zvlášť. Funkci `fetch` tak budeme chtít volat ve chvíli, kdy se naše komponenta poprvé objeví na stránce. To zní jako případ pro použití efektů.

Naše poslední aplikace zatím zobrazovala, že svátek má Jiří. To je však pravda pouze jeden den v roce. Pojďme aplikaci vylepšit tak, aby si stáhla aktuální jméno z API.

Expand Down
6 changes: 3 additions & 3 deletions daweb/react/formulare-efekty/efekty-zavislosti.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
## Efekty se závislostmi

Zatím jsme viděli efekty, které se spouštějí pouze jednou, tedy ve chvíli, kdy se komponenta poprvé objeví na stránce. Občas však potřebujeme efekt, který se spustí pokaždé, když se změní nějaká stavová proměnná nebo _prop_. Takový efekt vyrobíme tak, že do hranatých závorek napíšeme stavovou proměnnou nebo _prop_, na kterou má efekt reagovat, nebo-li na které spuštění efektu záviset.
Zatím jsme viděli efekty, které se spouštějí pouze jednou, tedy ve chvíli, kdy se komponenta poprvé objeví na stránce. Občas však potřebujeme efekt, který se spustí pokaždé, když se změní nějaká stavová proměnná nebo _prop_. Takový efekt vyrobíme tak, že do hranatých závorek napíšeme stavovou proměnnou nebo _prop_, na kterou má efekt reagovat, nebo-li na které spuštění efektu záviset.

```js
const Komponenta = () => {
Expand All @@ -14,7 +14,7 @@ const Komponenta = () => {
};
```

Tato technika se nám hodí nejčastějí ve chvíli, kdy chceme stáhnout nějaká data z API ve chvíli, kdy komponenta změní svůj stav. V našem příkladu si stáhneme jméno z API, které má svátek v den, který uživatel vybere v kalendáři.
Tato technika se nám hodí nejčastěji ve chvíli, kdy chceme stáhnout nějaká data z API ve chvíli, kdy komponenta změní svůj stav. V našem příkladu si stáhneme jméno z API, které má svátek v den, který uživatel vybere v kalendáři.

```jsx
export const HomePage = () => {
Expand All @@ -28,7 +28,7 @@ export const HomePage = () => {
`https://nameday.abalin.net/api/V1/getdate?day=${den}&month=${mesic}`
);
const data = await response.json();
setName(data.namedays.cz);
setName(data.nameday.cz);
};

fetchName();
Expand Down
4 changes: 2 additions & 2 deletions daweb/react/formulare-efekty/formularove-prvky.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
## Formulářové prvky

Díky tomu, že jsme se v minulé lekci naučili pracovat se stavem, otvírají se nám v Reactu mnohé nové možnosti.
Díky tomu, že jsme se v minulé lekci naučili pracovat se stavem, otevírá se nám v Reactu mnoho nových možností.

Formulářové prvky jako textová políčka, zaškrtávací tlačítka apod. jsou jedním z hlavních způsobů, jak získat vstup od uživatele. V čistém JavaScritpu jsme zvyklí získávat hodnoty z těchto prvků tak, že je vybereme pomocí `querySelector` a použijeme například vlastnost `value`.
Formulářové prvky jako textová políčka, zaškrtávací tlačítka apod. jsou jedním z hlavních způsobů, jak získat vstup od uživatele. V čistém JavaScriptu jsme zvyklí získávat hodnoty z těchto prvků tak, že je vybereme pomocí `querySelector` a použijeme například vlastnost `value`.

```html
<form>
Expand Down

0 comments on commit 033ce33

Please sign in to comment.