Pravděpodobně jste slyšeli o populárním frameworku JavaScript od Facebooku – React. Používá jej mnoho populárních webových stránek, včetně samotného Facebooku a Instagramu. V tomto článku najdete 5 praktických příkladů, které byly vytvořeny pomocí Reactu a které vám poskytnou náskok s frameworkem. C
React si v poslední době získal velkou popularitu a přilákal velkou a aktivní komunitu. Výsledkem je obrovské množství opakovaně použitelných komponent, které vám ušetří čas při kódování. Samotná knihovna podporuje psaní volně spojeného kódu, který je modulární a skládá se. V tomto tutoriálu vám uk
Každá kapitola mé nové knihy Reaguj rychle (Manning, 2016) má projekt, který je doplněn video screencastem. Podívejte se na videa zde nebo na YouTube. Kód je na GitHubu. Reagujte rychle Celou první kapitolu si také můžete ZDARMA stáhnout na Manning. Vydání knihy je naplánováno na první čtvrtletí
Toto je úryvek z Rychle reagovat (Manning, 2016). Celou první kapitolu si můžete zdarma stáhnout na Manning . Vydání knihy je naplánováno na první čtvrtletí roku 2016, ale MEAP je k dispozici právě teď. Použijte kód „mardandz “ a získejte 39% slevu. Každá kapitola má projekt, který je doplněn video
Tento příspěvek napsal Scott Hasbrouck. Najdete ho na Twitteru nebo jeho webu. Bylo úžasné vidět, jak JavaScript v posledních několika letech skutečně vzplanul ve webových technologiích a nakonec se stal nejpoužívanějším jazykem v roce 2016, podle údajů StackOverflow. Moje historie s JavaScriptem z
Jak vytvořit komponentu seznamu s výběrem všech pomocí React v aplikaci Next.js. Začínáme Pro tento tutoriál použijeme CheatCode Next.js Boilerplate, který nám poskytne výchozí bod pro naši práci. Nejprve naklonujte základní desku: Terminál git clone https://github.com/cheatcode/nextjs-boilerplat
Jak vytvořit formulář kreditní karty pomocí Stripe.js a Stripe Elements a také jak získat hodnotu tohoto formuláře kreditní karty a vygenerovat zdrojový token Stripe. Začínáme Pro tento tutoriál, který nám poskytne výchozí bod pro naši práci, použijeme CheatCode Next.js Boilerplate. Pojďme nyní na
O Reactu jsem slýchal od chvíle, kdy jsem se poprvé začal učit JavaScript, ale přiznám se, že jsem se na něj podíval a vyděsil mě. Viděl jsem, co vypadalo jako hromada HTML smíchaných s JavaScriptem, a pomyslel jsem si:Není to to, čemu jsme se snažili vyhnout? Co je na Reactu tak důležitého? Místo
V Reactu byl představen nový koncept – Hooks. Háčky jsou alternativou tříd. Pokud jste již React používali, budete obeznámeni s jednoduchými (funkčními) komponentami a komponenty třídy . Jednoduchá komponenta } Komponenta třídy } } Mnoho funkcí dostupných třídám – například metody životního cyklu
Jakýkoli prvek lze upravit přidáním contenteditable atribut. Tento atribut se používá na celém webu, například v Tabulkách Google. Nebudu vám říkat, abyste používali nebo nepoužívali contenteditable prvky ve vaší aplikaci. Pokud se rozhodnete použít contenteditable , může se vám tento článek hodit.
React není dodáván s vestavěným routerem, ale můžeme snadno dosáhnout směrování pomocí react-router-dom knihovna. Směrování je způsob, jakým webové aplikace řídí provoz. (Pokud víte, co je směrování, klidně tuto část přeskočte.) Příklad:Pokud přejdete na taniarascia.com, skončíte na mé domovské str
React Context API je způsob, jak v podstatě vytvořit globální proměnné, které lze předávat v aplikaci React. Toto je alternativa k „vrtání rekvizit“ nebo předávání rekvizit od prarodičů rodičům k dítěti a tak dále. Kontext je často nabízen jako jednodušší a lehčí řešení pro použití Redux pro správu
Před chvílí jsem psal článek o používání kontextového API v Reactu. Většina mých příkladů na této stránce však používala komponenty třídy static contextType a Consumer , což je starý způsob zacházení s Contextem a v TYOOL 2021 chceme pěkné, čisté a funkční komponenty. Potřeboval jsem pro něco nedávn
Neexistuje žádný konsensus ohledně správného způsobu organizace aplikace React. React vám dává velkou svobodu, ale s touto svobodou přichází i zodpovědnost za rozhodování o vaší vlastní architektuře. Často se stává, že kdokoli na začátku nastaví aplikaci, hodí téměř vše do components složku, nebo mo
Úvod Při vytváření aplikací React, které načítají obsah z externích zdrojů, jejichž načítání trvá nějakou dobu, je vždy dobré poskytnout uživatelům příjemný zážitek tím, že zapojíte uživatele a udržíte jejich pozornost pomocí loaderu, protože to uživatelům pomáhá lépe pochopit, co se děje. než je n
Úvod Při vytváření aplikací React, které načítají obsah z externích zdrojů, jejichž načítání trvá nějakou dobu, je vždy dobré poskytnout uživatelům příjemný zážitek tím, že zapojíte uživatele a udržíte jejich pozornost pomocí loaderu, protože to uživatelům pomáhá lépe pochopit, co se děje. než je n
Úvod Když vývojář vytvoří aplikaci, dalším krokem je sdílet ji s přáteli nebo veřejností, aby k ní měl přístup každý. Tento proces přenosu kódu z vývojového prostředí na hostitelskou platformu, kde je poskytován koncovým uživatelům, se nazývá nasazení . Hosting býval docela neefektivní, než se obj
Úvod Nasazení je proces přesunu našeho kódu ze systému pro kontrolu zdroje na hostitelskou platformu, kde je uložen a může sloužit jako aplikace koncovým uživatelům. Obvykle se to provádí v cloudu nebo na místním serveru. Před příchodem cloudových platforem, jako je Netlify, zajišťovali hosting po
Úvod Události obvykle představují určitý typ interakce mezi uživatelem a aplikací – kdykoli uživatel klikne na objekt, zadá text do vstupního pole, přetáhne nebo pustí nějaký prvek a tak dále. Každá událost proto obvykle vyžaduje určitý typ reakce z aplikace. Pokaždé, když nastane významná událost,
Úvod Komponenta je pravděpodobně nejdůležitější koncept, kterému je třeba v Reactu porozumět. Je to jeden z základních stavebních kamenů of React, který nám umožňuje rozdělit uživatelské rozhraní na nezávislé, opakovaně použitelné části, čímž je vytváření uživatelských rozhraní mnohem jednodušší. V