From baed6a92c48c6ef0bcbf13872941e2321aad0032 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Podlouck=C3=BD?= Date: Wed, 17 Apr 2024 10:00:48 +0200 Subject: [PATCH] =?UTF-8?q?P=C5=99esunut=C3=AD=20sekce=20o=20destrukturov?= =?UTF-8?q?=C3=A1n=C3=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../destrukturovani.md | 8 +++++--- daweb/js2/podminene-zobrazeni/entry.yml | 1 + 2 files changed, 6 insertions(+), 3 deletions(-) rename daweb/js2/{server-komunikace => podminene-zobrazeni}/destrukturovani.md (83%) diff --git a/daweb/js2/server-komunikace/destrukturovani.md b/daweb/js2/podminene-zobrazeni/destrukturovani.md similarity index 83% rename from daweb/js2/server-komunikace/destrukturovani.md rename to daweb/js2/podminene-zobrazeni/destrukturovani.md index b88d9854..c5b20d36 100644 --- a/daweb/js2/server-komunikace/destrukturovani.md +++ b/daweb/js2/podminene-zobrazeni/destrukturovani.md @@ -1,5 +1,7 @@ ## Destrukturování objektů +Než se pustíme do podmíněného zobrazování, ukážeme si jednu užitěčnou techniku, která se nám bude hodit jak při fetchování dat ze serveru tak při práci s komponentami. Jedná se o takzvané :term{cs="destrukturování objektů" en="object destructuring"}. + Při stahování dat ze serveru ale i v mnoha jiných situacích se nám bude často stávat, že chceme z objektu rychle získat vícero hodnot a uložit je do různých proměnných, například takto: ```js @@ -14,7 +16,7 @@ const price = product.price; const currency = product.currency; ``` -Programátoři jsou líné bytosti a tento postup jim přijde zdlouhavý. Pokud se naše proměnné jmenují stejně jako klíče uvnitř objektu, můžeme si ušetřit psaní a použít takzvané :term{cs="destrukturování" en="destructuring"}. +Programátoři jsou líné bytosti a tento postup jim přijde zdlouhavý. Pokud se naše proměnné jmenují stejně jako klíče uvnitř objektu, můžeme si ušetřit psaní a použít následující zkrácený zápis: ```js const product = { @@ -60,7 +62,7 @@ const { password, length } = await response.json(); ## Destrukturování props -Destrukturování se velmi často použivá při práci s komponentami. Mejmě pro příklad komponentu zobrazující čas. +Destrukturování se také často použije při práci s komponentami. Mejmě pro příklad komponentu zobrazující čas. ```jsx const Time = (props) => { @@ -100,4 +102,4 @@ const Time = ({ hours, minutes }) => { }; ``` -Takovýto zápis je pro nás novinka, ale v praxi se běžně používá, takže je dobré jej dostat pod kůži. Pokud vám přijde zápis až příliš líný, můžete jej prozatím bojkotovat. My jej však nadále v tomto kurzu budeme používat a brzy vás jistě zlákáme na naši stranu. +Takovýto zápis je pro nás novinka, ale v praxi se běžně používá, takže je dobré jej dostat pod kůži. Pokud vám přijde zápis až příliš líný, můžete jej prozatím bojkotovat. My jej však nadále v tomto kurzu budeme používat a brzy vás jistě zlákáme na svou stranu. diff --git a/daweb/js2/podminene-zobrazeni/entry.yml b/daweb/js2/podminene-zobrazeni/entry.yml index fdea3c20..a28cd81f 100644 --- a/daweb/js2/podminene-zobrazeni/entry.yml +++ b/daweb/js2/podminene-zobrazeni/entry.yml @@ -2,6 +2,7 @@ title: Podmíněné zobrazení lead: Naučíme se, jak sestavovat CSS třídy a jak se rozhodnout, kterou část JSX chceme zobrazit. access: protected sections: + - destrukturovani - ternarni-operator - predavani-hodnot - cv-podminene-vyrazy