diff --git a/daweb/js2/architektura/crud.md b/daweb/js2/architektura/crud.md new file mode 100644 index 00000000..34e03098 --- /dev/null +++ b/daweb/js2/architektura/crud.md @@ -0,0 +1,3 @@ +## CRUD + +Zkratka CRUD je používána pro označení základních operací nad daty v databázi. Jedná se o operace **C**reate, **R**ead, **U**pdate a **D**elete. V případě frontendových aplikací nikdy nepřistupujeme k databázi přímo, nýbrž vždy přes webové API. V tomto případě tyto operace provádíme pomocí HTTP metod POST, GET, PUT a DELETE. Všechny tyto metody jsme si již dříve vyzkoušeli. V této části si ukážeme, že na základě těchto operací si můžeme vytvořit představu a tom, jak vnitřně funguje většina webových aplikací. diff --git a/daweb/js2/vetsi-aplikace/dev/nakupni-seznam/img/background.svg b/daweb/js2/architektura/dev/nakupni-seznam/img/background.svg similarity index 100% rename from daweb/js2/vetsi-aplikace/dev/nakupni-seznam/img/background.svg rename to daweb/js2/architektura/dev/nakupni-seznam/img/background.svg diff --git a/daweb/js2/vetsi-aplikace/dev/nakupni-seznam/index.html b/daweb/js2/architektura/dev/nakupni-seznam/index.html similarity index 100% rename from daweb/js2/vetsi-aplikace/dev/nakupni-seznam/index.html rename to daweb/js2/architektura/dev/nakupni-seznam/index.html diff --git a/daweb/js2/vetsi-aplikace/dev/nakupni-seznam/index.js b/daweb/js2/architektura/dev/nakupni-seznam/index.js similarity index 100% rename from daweb/js2/vetsi-aplikace/dev/nakupni-seznam/index.js rename to daweb/js2/architektura/dev/nakupni-seznam/index.js diff --git a/daweb/js2/vetsi-aplikace/dev/nakupni-seznam/style.css b/daweb/js2/architektura/dev/nakupni-seznam/style.css similarity index 100% rename from daweb/js2/vetsi-aplikace/dev/nakupni-seznam/style.css rename to daweb/js2/architektura/dev/nakupni-seznam/style.css diff --git a/daweb/js2/vetsi-aplikace/dev/webapp-starter/.gitignore b/daweb/js2/architektura/dev/webapp-starter/.gitignore similarity index 100% rename from daweb/js2/vetsi-aplikace/dev/webapp-starter/.gitignore rename to daweb/js2/architektura/dev/webapp-starter/.gitignore diff --git a/daweb/js2/vetsi-aplikace/dev/webapp-starter/package.json b/daweb/js2/architektura/dev/webapp-starter/package.json similarity index 100% rename from daweb/js2/vetsi-aplikace/dev/webapp-starter/package.json rename to daweb/js2/architektura/dev/webapp-starter/package.json diff --git a/daweb/js2/vetsi-aplikace/dev/webapp-starter/src/index.html b/daweb/js2/architektura/dev/webapp-starter/src/index.html similarity index 100% rename from daweb/js2/vetsi-aplikace/dev/webapp-starter/src/index.html rename to daweb/js2/architektura/dev/webapp-starter/src/index.html diff --git a/daweb/js2/vetsi-aplikace/dev/webapp-starter/src/index.js b/daweb/js2/architektura/dev/webapp-starter/src/index.js similarity index 100% rename from daweb/js2/vetsi-aplikace/dev/webapp-starter/src/index.js rename to daweb/js2/architektura/dev/webapp-starter/src/index.js diff --git a/daweb/js2/vetsi-aplikace/dev/webapp-starter/webpack.config.js b/daweb/js2/architektura/dev/webapp-starter/webpack.config.js similarity index 100% rename from daweb/js2/vetsi-aplikace/dev/webapp-starter/webpack.config.js rename to daweb/js2/architektura/dev/webapp-starter/webpack.config.js diff --git a/daweb/js2/architektura/entry.yml b/daweb/js2/architektura/entry.yml new file mode 100644 index 00000000..0b57d932 --- /dev/null +++ b/daweb/js2/architektura/entry.yml @@ -0,0 +1,7 @@ +title: Architektura JSX aplikací +lead: Hluběji rozebereme jak strukturovat frontendové aplikace založené na čistém JSX. +access: 'claim' +sections: + - dotaz-patch + - crud + \ No newline at end of file diff --git a/daweb/js2/vetsi-aplikace/excs/citat/assets/quote.png b/daweb/js2/architektura/excs/citat/assets/quote.png similarity index 100% rename from daweb/js2/vetsi-aplikace/excs/citat/assets/quote.png rename to daweb/js2/architektura/excs/citat/assets/quote.png diff --git a/daweb/js2/vetsi-aplikace/excs/citat/exercise.md b/daweb/js2/architektura/excs/citat/exercise.md similarity index 100% rename from daweb/js2/vetsi-aplikace/excs/citat/exercise.md rename to daweb/js2/architektura/excs/citat/exercise.md diff --git a/daweb/js2/vetsi-aplikace/excs/prestupky-2/dev/zadani/img/bg.svg b/daweb/js2/architektura/excs/prestupky-2/dev/zadani/img/bg.svg similarity index 100% rename from daweb/js2/vetsi-aplikace/excs/prestupky-2/dev/zadani/img/bg.svg rename to daweb/js2/architektura/excs/prestupky-2/dev/zadani/img/bg.svg diff --git a/daweb/js2/vetsi-aplikace/excs/prestupky-2/dev/zadani/index.html b/daweb/js2/architektura/excs/prestupky-2/dev/zadani/index.html similarity index 100% rename from daweb/js2/vetsi-aplikace/excs/prestupky-2/dev/zadani/index.html rename to daweb/js2/architektura/excs/prestupky-2/dev/zadani/index.html diff --git a/daweb/js2/vetsi-aplikace/excs/prestupky-2/dev/zadani/index.js b/daweb/js2/architektura/excs/prestupky-2/dev/zadani/index.js similarity index 100% rename from daweb/js2/vetsi-aplikace/excs/prestupky-2/dev/zadani/index.js rename to daweb/js2/architektura/excs/prestupky-2/dev/zadani/index.js diff --git a/daweb/js2/vetsi-aplikace/excs/prestupky-2/dev/zadani/style.css b/daweb/js2/architektura/excs/prestupky-2/dev/zadani/style.css similarity index 100% rename from daweb/js2/vetsi-aplikace/excs/prestupky-2/dev/zadani/style.css rename to daweb/js2/architektura/excs/prestupky-2/dev/zadani/style.css diff --git a/daweb/js2/vetsi-aplikace/excs/prestupky-2/exercise.md b/daweb/js2/architektura/excs/prestupky-2/exercise.md similarity index 100% rename from daweb/js2/vetsi-aplikace/excs/prestupky-2/exercise.md rename to daweb/js2/architektura/excs/prestupky-2/exercise.md diff --git a/daweb/js2/vetsi-aplikace/excs/svetovy-cas-webpack/exercise.md b/daweb/js2/architektura/excs/svetovy-cas-webpack/exercise.md similarity index 100% rename from daweb/js2/vetsi-aplikace/excs/svetovy-cas-webpack/exercise.md rename to daweb/js2/architektura/excs/svetovy-cas-webpack/exercise.md diff --git a/daweb/js2/architektura/patch-delete.md b/daweb/js2/architektura/patch-delete.md new file mode 100644 index 00000000..1e8ae6ff --- /dev/null +++ b/daweb/js2/architektura/patch-delete.md @@ -0,0 +1,3 @@ +## Dotaz PATCH + +Kromě dotazu GET a POST existují ještě dotazy PATCH a DELETE, který slouží k aktualizaci nějakého záznamu. diff --git a/daweb/js2/entry.yml b/daweb/js2/entry.yml index 7d304bcc..35de79d3 100644 --- a/daweb/js2/entry.yml +++ b/daweb/js2/entry.yml @@ -7,8 +7,8 @@ lessons: - server-komunikace - podminene-zobrazeni - seznamy-parametry - - posluchace - posilani-dat + - architektura - cloud-db - cafe-lora-1 - cafe-lora-2 diff --git a/daweb/js2/podminene-zobrazeni/ternarni-operator.md b/daweb/js2/podminene-zobrazeni/ternarni-operator.md index 5de5c7ab..c705ebe3 100644 --- a/daweb/js2/podminene-zobrazeni/ternarni-operator.md +++ b/daweb/js2/podminene-zobrazeni/ternarni-operator.md @@ -112,6 +112,8 @@ const ShopItem = (props) => { ); }; ``` + ``` Takovýto kód už však může být hůře čitelný, takže je dobré jej používat s mírou a uvážením. +``` diff --git a/daweb/js2/posluchace/entry.yml b/daweb/js2/posluchace/entry.yml deleted file mode 100644 index 1a16bf9b..00000000 --- a/daweb/js2/posluchace/entry.yml +++ /dev/null @@ -1,5 +0,0 @@ -title: Posluchače událostí, formuláře -lead: … -access: claim -sections: - - formulare diff --git a/daweb/js2/posluchace/formulare.md b/daweb/js2/posluchace/formulare.md deleted file mode 100644 index 4a379164..00000000 --- a/daweb/js2/posluchace/formulare.md +++ /dev/null @@ -1 +0,0 @@ -## Formuláře diff --git a/daweb/js2/vetsi-aplikace/lesson.md b/daweb/js2/vetsi-aplikace/lesson.md deleted file mode 100644 index 0a4694d4..00000000 --- a/daweb/js2/vetsi-aplikace/lesson.md +++ /dev/null @@ -1,91 +0,0 @@ -Čím jsou naše webové aplikace rozsáhlejší, tím těžší je orientovat se ve zdrojovém kódu, obzvlášt pokud je celý obsažen v jednom souboru `index.js`. Abychom se ve větších aplikacích vyznali, budeme je rozdělovat na jednotlivé komponenty a jejich kód budeme vkládat do oddělených souborů. Tím usnadnímě život nejen sobě ale i ostaním programátorům, kteří s nám na aplikaci budou spolupracovat. - -## Oddělování komponent - -Pojďme si dělení kódu aplikace do vícero souborů vyzkoušet na našem nákupním seznamu. Stáhněte si [zdrojový kód](assets/nakupni-seznam.zip) již funkční a nastylované aplikace. Struktura souborů pro výslednou aplikaci bude vypadat takto. - -``` -├──img -│ └──background.svg -├──ShoppingItem -│ ├──index.js -│ └──style.css -├──ShoppingList -│ ├──index.js -│ └──style.css -├──index.html -├──index.js -└──style.css -``` - -[[[ excs Cvičení: Oddělování komponent - -- prestupky-2 - ]]] - -## Sestavovací proces - -V předchozí části jsme rozdělili komponenty v projektu Nákupní seznam do jednotlivých souborů, což velmi pomáhá nám programátorům. Do našeho HTML však kvůli tomu musíme vložit celkem šest souborů. - -```html - - - - -... - - - - -``` - -Prohlížeč tak musí kvůli dvěma komponentám stáhnout šest různých souborů. Reálné aplikace však obsahují desítky, stovky a tisíce komponent. - -https://github.com/facebook/react/issues/9463#issuecomment-295643228 - -Webpack je nástroj, který slouží ke spojení zdrojových JavaScriptových souborů do jednoho výsledného souboru, který pak prohlížeč může stáhnout najednou. Tomuto procesu se říká :term{cs="sestavení" en="build"}. K tomu, aby se náš projekt správně sestavil, potřebujeme Webpack správně nakonfigurovat. Vytvořít takovou konfiguraci od základu je už relativně pokročilá dovednost. V našem případě tedy budeme pracovat s již předem připravenou konfigurací, která se hodí na většinu jednoduchých frontendových projektů. - -### Postup založení nového projektu - -Tento postup následujte vždy, když chcete založit nový frontendový projekt založený na Webpacku. - -1. Z [tohoto odkazu](https://github.com/Czechitas-podklady-WEB/project-starters/archive/main.zip) si stáhněte ZIP soubor s připravenou konfigurací. -1. Rozbalte ZIP soubor do nějaké složky a přejmenujte si složku `project-starter` dle názvu svého projektu, například `muj-projekt`. -1. Otevřete složku `muj-projekt` vs VS Code. Spusťte terminál a uvnitř této složky spusťte příkaz - ``` - npm install - ``` -1. Spusťte příkaz - ``` - npm run start - ``` - -``` -├──node_modules -├──src -│ ├──img -│ │ └──background.svg -│ ├──ShoppingItem -│ │ ├──index.js -│ │ └──style.css -│ ├──ShoppingList -│ │ ├──index.js -│ │ └──style.css -│ ├──index.html -│ ├──index.js -│ └──style.css -├──package-lock.json -└──package.json -``` - -## Import a export - -[[[ excs Cvičení: Základy Webpacku - -- citat - ]]] - -[[[ excs Doporučené úložky na doma - -- svetovy-cas-webpack - ]]] diff --git a/daweb/js2/podminene-zobrazeni/cv-podminene-zobrazeni.md b/daweb/react/podminene-zobrazeni/cv-podminene-zobrazeni.md similarity index 100% rename from daweb/js2/podminene-zobrazeni/cv-podminene-zobrazeni.md rename to daweb/react/podminene-zobrazeni/cv-podminene-zobrazeni.md diff --git a/daweb/js2/podminene-zobrazeni/cvlekce/mejlik-hlavicka/exercise.md b/daweb/react/podminene-zobrazeni/cvlekce/mejlik-hlavicka/exercise.md similarity index 100% rename from daweb/js2/podminene-zobrazeni/cvlekce/mejlik-hlavicka/exercise.md rename to daweb/react/podminene-zobrazeni/cvlekce/mejlik-hlavicka/exercise.md diff --git a/daweb/js2/podminene-zobrazeni/cvlekce/mejlik-schranka/assets/inbox-empty.png b/daweb/react/podminene-zobrazeni/cvlekce/mejlik-schranka/assets/inbox-empty.png similarity index 100% rename from daweb/js2/podminene-zobrazeni/cvlekce/mejlik-schranka/assets/inbox-empty.png rename to daweb/react/podminene-zobrazeni/cvlekce/mejlik-schranka/assets/inbox-empty.png diff --git a/daweb/js2/podminene-zobrazeni/cvlekce/mejlik-schranka/assets/inbox.png b/daweb/react/podminene-zobrazeni/cvlekce/mejlik-schranka/assets/inbox.png similarity index 100% rename from daweb/js2/podminene-zobrazeni/cvlekce/mejlik-schranka/assets/inbox.png rename to daweb/react/podminene-zobrazeni/cvlekce/mejlik-schranka/assets/inbox.png diff --git a/daweb/js2/podminene-zobrazeni/cvlekce/mejlik-schranka/dev/graphics/inbox.svg b/daweb/react/podminene-zobrazeni/cvlekce/mejlik-schranka/dev/graphics/inbox.svg similarity index 100% rename from daweb/js2/podminene-zobrazeni/cvlekce/mejlik-schranka/dev/graphics/inbox.svg rename to daweb/react/podminene-zobrazeni/cvlekce/mejlik-schranka/dev/graphics/inbox.svg diff --git a/daweb/js2/podminene-zobrazeni/cvlekce/mejlik-schranka/exercise.md b/daweb/react/podminene-zobrazeni/cvlekce/mejlik-schranka/exercise.md similarity index 100% rename from daweb/js2/podminene-zobrazeni/cvlekce/mejlik-schranka/exercise.md rename to daweb/react/podminene-zobrazeni/cvlekce/mejlik-schranka/exercise.md diff --git a/daweb/js2/podminene-zobrazeni/podminene-zobrazeni.md b/daweb/react/podminene-zobrazeni/podminene-zobrazeni.md similarity index 100% rename from daweb/js2/podminene-zobrazeni/podminene-zobrazeni.md rename to daweb/react/podminene-zobrazeni/podminene-zobrazeni.md diff --git a/daweb/js2/podminene-zobrazeni/rozdelovani-komponent.md b/daweb/react/podminene-zobrazeni/rozdelovani-komponent.md similarity index 100% rename from daweb/js2/podminene-zobrazeni/rozdelovani-komponent.md rename to daweb/react/podminene-zobrazeni/rozdelovani-komponent.md