9 dalších projektů pro zdokonalení vašich předních dovedností

úvod

Ať už jste v programování noví nebo již zkušení vývojáři, v tomto odvětví je učení se novým konceptům a jazykům/rámcům nutností, abyste drželi krok s trendy.

Vezměme si například React, který byl Facebook open source teprve před čtyřmi lety a již se stal volbou číslo jedna pro vývojáře JavaScriptu po celém světě.

Vue a Angular mají samozřejmě také svou legitimní fanouškovskou základnu. A pak jsou tu Svelte a další obecné rámce jako Next.js nebo Nuxt.js. A Gatsby, Gridsome a Quasar ... a mnoho dalšího.

Pokud se chcete ukázat jako zkušený vývojář JavaScriptu, měli byste mít alespoň nějaké zkušenosti s různými frameworky a knihovnami – kromě staré dobré JS práce.

Abych vám pomohl stát se mistrem front-endu v roce 2020, dal jsem dohromady devět různých projektů, z nichž každý se zaměřuje na různé rámce JavaScriptu a knihovny jako technologický stack, který můžete sestavit a přidat do svého portfolia. Pamatujte, že nic vám nepomůže víc, než uvést věci do praxe, takže do toho, zapněte mysl a umožněte to.

Článek byl přeložen s podporou EDISON Software, která vytváří virtuální prostory pro prodejny více značeka testuje software.

Aplikace pro vyhledávání filmů s Reactem (s háčky)

První věcí, kterou byste mohli začít, je vytvoření aplikace pro vyhledávání filmů pomocí React. Níže je obrázek, jak bude finální aplikace vypadat:

Co se naučíš
Vytvořením této aplikace zlepšíte své dovednosti React pomocí relativně nového API Hooks. Ukázkový projekt využívá komponenty React, spoustu háčků, externí API a samozřejmě nějaký styl CSS.

Tech stack a funkce

• Reagujte s háčky
• create-reagovat-app
• JSX
• CSS

Bez použití jakýchkoli tříd vám tyto projekty poskytnou perfektní vstupní bod do funkčního Reactu a určitě vám pomohou v roce 2020. můžeš najít ukázkový projekt zde. Postupujte podle pokynů nebo si ji vytvořte vlastní.

Chatovací aplikace s Vue

Dalším skvělým projektem pro vás je vytvoření chatovací aplikace pomocí mé oblíbené JavaScriptové knihovny: VueJS. Aplikace bude vypadat nějak takto:

Co se naučíš
V tomto tutoriálu se naučíte, jak vytvořit aplikaci Vue od začátku – vytvářet komponenty, zpracovávat stavy, vytvářet trasy, připojovat se ke službám třetích stran a dokonce zpracovávat ověřování.

Tech stack a funkce

• Vue
• vuex
• Směrovač Vue
• Pohled CLI
• Pusher
• CSS

Toto je opravdu skvělý projekt, jak začít s Vue nebo zlepšit své stávající dovednosti, abyste se dostali do vývoje v roce 2020. můžeš najít tutoriál zde.

Krásná aplikace pro počasí s Angular 8

Tento příklad vám pomůže vytvořit krásnou aplikaci pro počasí pomocí Angular 8:

Co se naučíš
Tento projekt vás naučí cenné dovednosti při vytváření aplikací od nuly – od návrhu po vývoj, až po aplikaci připravenou k nasazení.

Tech stack a funkce

• Úhel 8
• Firebase
• Vykreslování na straně serveru
• CSS s mřížkou a Flexboxem
• Mobilní přátelské a přizpůsobivé
• Tmavý režim
• Krásné rozhraní

Na tomto komplexním projektu se mi opravdu líbí, že nestudujete věci izolovaně. Místo toho se naučíte celý proces vývoje od návrhu až po finální nasazení.

Aplikace To-Do se Svelte

Svelte je jako nové dítě v přístupu ke komponentám – přinejmenším podobný React, Vue a Angular. A toto je jedna z nejžhavějších novinek pro rok 2020.

To-Do aplikace nejsou nutně nejžhavějším tématem, ale opravdu vám pomohou zdokonalit vaše dovednosti Svelte. Bude to vypadat takto:

Co se naučíš
Tento tutoriál vám ukáže, jak vytvořit aplikaci pomocí Svelte 3, od začátku do konce. Budete používat komponenty, styling a handlery událostí

Tech stack a funkce

• Štíhlý 3
• Komponenty
• Stylování pomocí CSS
• Syntaxe ES6

Není mnoho dobrých startovacích projektů Svelte, tak jsem našel to je dobré místo, kde začít.

Aplikace pro elektronický obchod s Next.js

Next.js je nejoblíbenější framework pro vytváření aplikací React, které podporují vykreslování na straně serveru hned po vybalení.

Tento projekt vám ukáže, jak vytvořit aplikaci elektronického obchodu, která vypadá takto:

Co se naučíš
V tomto projektu se naučíte vyvíjet s Next.js – vytvářet nové stránky a komponenty, načítat data a stylovat a nasazovat Next aplikaci.

Tech stack a funkce

• Další.js
• Komponenty a stránky
• Vzorkování dat
• Styling
• Nasazení projektu
• SSR a SPA

Vždy je skvělé mít příklad ze skutečného života, jako je aplikace pro elektronický obchod, abyste se naučili něco nového. Můžeš návod najdete zde.

Plný vícejazyčný blog s Nuxt.js

Nuxt.js je pro Vue, stejně jako Next.js pro React: skvělý rámec pro kombinaci vykreslování na straně serveru a jednostránkových aplikací
Poslední aplikace, kterou můžete vytvořit, bude vypadat takto:

Co se naučíš

V tomto ukázkovém projektu se naučíte, jak vytvořit kompletní web pomocí Nuxt.js, od počátečního nastavení až po konečné nasazení.

Využívá mnoho skvělých funkcí, které Nuxt nabízí, jako jsou stránky a komponenty a stylování pomocí SCSS.

Tech stack a funkce

• Nuxt.js
• Komponenty a stránky
• modul storyblock
• Mixins
• Vuex pro řízení státu
• SCSS pro styling
• Middleware Nuxt

Tohle je opravdu skvělý projekt., který obsahuje mnoho skvělých funkcí Nuxt.js. Osobně rád pracuji s Nuxtem, takže byste to měli vyzkoušet, protože z vás také bude skvělý vývojář Vue.

Blogujte s Gatsbym

Gatsby je skvělý generátor statických stránek využívající React a GraphQL. Toto je výsledek projektu:

Co se naučíš

V tomto tutoriálu se naučíte, jak pomocí Gatsbyho vytvořit blog, který budete používat k psaní vlastních článků pomocí React a GraphQL.

Tech stack a funkce

• gatsby
• REACT
• GraphQL
• Pluginy a motivy
• MDX/Markdown
• Bootstrap CSS
• šablony

Pokud jste si někdy chtěli založit blog, to je skvělý příklad jak to udělat pomocí React a GraphQL.

Neříkám, že WordPress je špatná volba, ale s Gatsbym můžete vytvářet vysoce výkonné weby pomocí Reactu – což je úžasná kombinace.

Blogujte s Gridsome

Gridsome for Vue... Dobře, to už jsme měli s Next/Nuxt.
Totéž ale platí pro Gridsome a Gatsby. Oba používají GraphQL jako svou datovou vrstvu, ale Gridsome používá VueJS. Je to také úžasný generátor statických stránek, který vám pomůže vytvořit skvělé blogy:

Co se naučíš

Tento projekt vás naučí, jak vytvořit jednoduchý blog, abyste mohli začít s Gridsome, GraphQL a Markdown. Vysvětluje také, jak nasadit aplikaci prostřednictvím Netlify.

Tech stack a funkce

• Příšerný
• Vue
• GraphQL
• Snížení ceny
• netlify

Toto rozhodně není nejúplnější návod, ale pokrývá základní koncepty Gridsome a Markdown a může být dobrým výchozím bodem.

Audio přehrávač podobný SoundCloud pomocí Quasar

Quasar je další rámec Vue, který lze použít k vytváření mobilních aplikací. V tomto projektu vytvoříte aplikaci audio přehrávače, například:

Co se naučíš

Zatímco jiné projekty se zaměřují převážně na webové aplikace, tento vám ukáže, jak vytvořit mobilní aplikaci pomocí Vue a frameworku Quasar.
Měli byste již mít funkční Cordova s ​​nastaveným Android Studio/Xcode. Pokud ne, manuál má odkaz na web Quasar, kde vám ukážou, jak vše nastavit.

Tech stack a funkce

• Quasar
• Vue
• Cordova
• surfař na vlně
• Komponenty uživatelského rozhraní

malý projekt, demonstrující schopnosti Quasaru pro vytváření mobilních aplikací.

Zdroj: www.habr.com