9 deui proyék pikeun ngasah kaahlian Front-End anjeun
perkenalan
Naha anjeun anyar pikeun program atanapi pamekar anu berpengalaman, diajar konsép sareng basa/kerangka anyar mangrupikeun kabutuhan dina industri ieu pikeun nuturkeun tren.
Candak React, contona, anu Facebook open-source ngan opat taun ka pengker sareng parantos janten pilihan nomer hiji pikeun pamekar JavaScript di sakumna dunya.
Vue sareng Angular, tangtosna, ogé gaduh basis kipas anu sah sorangan. Teras aya Svelte sareng kerangka universal anu sanés sapertos Next.js atanapi Nuxt.js. Sareng Gatsby, sareng Gridsome, sareng Quasar ... sareng seueur deui.
Lamun hayang ngabuktikeun diri salaku pamekar JavaScript ngalaman, Anjeun kudu boga sahanteuna sababaraha pangalaman jeung sagala rupa frameworks jeung perpustakaan - salian ngalakonan gawé kalawan JS heubeul alus.
Pikeun ngabantosan anjeun janten master hareup dina 2020, kuring parantos ngahijikeun salapan proyék anu béda, masing-masing fokus kana kerangka JavaScript sareng perpustakaan anu béda salaku tumpukan téknologi anu anjeun tiasa ngawangun sareng nambihan kana portopolio anjeun. Inget yen euweuh mantuan Anjeun leuwih ti sabenerna nyieun hal, jadi pindah ka hareup, make pikiran anjeun sarta nyieun eta lumangsung
Aplikasi milarian pilem nganggo React (kalayan kait)
Hal kahiji anu anjeun tiasa ngamimitian nyaéta nyiptakeun aplikasi milarian pilem nganggo React. Di handap ieu hiji gambar kumaha aplikasi ahir bakal kasampak kawas:
Naon anu anjeun bakal pelajari
Ku ngawangun aplikasi ieu, anjeun bakal ningkatkeun kaahlian React anjeun ku ngagunakeun API Hooks anu kawilang anyar. Proyék conto ngagunakeun komponén React, seueur kait, API éksternal, sareng tangtosna sababaraha gaya CSS.
tumpukan Tech sarta fitur
Ngaréaksikeun jeung hook
Nyiptakeun-meta-aplikasi
JSX
CSS
Tanpa nganggo kelas naon waé, proyék ieu masihan anjeun titik éntri anu sampurna kana Réaksi fungsional sareng pasti bakal ngabantosan anjeun dina 2020. anjeun tiasa mendakan conto proyék di dieu. Turutan parentah atawa nyieun sorangan.
Ngobrol App kalawan Vue
Proyék hébat anu sanés pikeun anjeun lakukeun nyaéta nyiptakeun aplikasi obrolan nganggo perpustakaan JavaScript karesep kuring: VueJS. Aplikasi bakal katingali sapertos kieu:
Naon anu anjeun bakal pelajari
Dina tutorial ieu, anjeun bakal diajar kumaha nyieun aplikasi Vue ti mimiti - nyieun komponén, nanganan kaayaan, nyieun ruteu, nyambungkeun ka layanan pihak katilu, komo nanganan auténtikasi.
tumpukan Tech sarta fitur
Vue
vuex
Router Vue
Vue CLI
Pusher
CSS
Ieu mangrupikeun proyék anu saé pikeun ngamimitian sareng Vue atanapi ningkatkeun kaahlian anjeun anu tos aya pikeun ngembangkeun dina 2020. anjeun tiasa mendakan tutorial di dieu.
Aplikasi cuaca anu saé sareng Angular 8
Conto ieu bakal ngabantosan anjeun nyiptakeun aplikasi cuaca anu saé nganggo Angular 8:
Naon anu anjeun bakal pelajari
Proyék ieu bakal ngajarkeun anjeun kaahlian anu berharga dina ngawangun aplikasi ti mimiti - tina desain dugi ka pamekaran, dugi ka aplikasi anu siap-deployment.
tumpukan Tech sarta fitur
Sudut 8
Firebase
Rendering sisi server
CSS jeung Grid na Flexbox
Mobile friendly jeung adaptability
Modeu poék
panganteur geulis
Anu kuring resep pisan ngeunaan proyék anu nyertakeun ieu nyaéta yén anjeun henteu diajar hal-hal anu diasingkeun. Gantina, anjeun diajar sakabéh prosés ngembangkeun, ti desain nepi ka deployment final.
Aplikasi To-Do ngagunakeun Svelte
Svelte sapertos budak énggal dina pendekatan dumasar-komponén - sahenteuna sami sareng React, Vue sareng Angular. Sareng ieu mangrupikeun salah sahiji produk énggal anu paling panas pikeun 2020.
Aplikasi To-Do henteu kedah janten topik anu paling panas, tapi éta bakal ngabantosan anjeun ngasah kaahlian Svelte anjeun. Ieu bakal kasampak kawas kieu:
Naon anu anjeun bakal pelajari
Tutorial ieu bakal nunjukkeun anjeun kumaha cara ngadamel aplikasi nganggo Svelte 3, ti mimiti dugi ka rengse. Anjeun bakal nganggo komponén, gaya, sareng pawang acara
Next.js mangrupikeun kerangka anu paling populér pikeun ngawangun aplikasi React anu ngadukung rendering sisi server tina kotak.
Proyék ieu bakal nunjukkeun anjeun kumaha cara nyiptakeun aplikasi e-commerce anu siga kieu:
Naon anu anjeun bakal pelajari
Dina proyék ieu, anjeun bakal diajar kumaha carana ngamekarkeun jeung Next.js-nyieun kaca anyar jeung komponén, nimba data, jeung gaya sarta nyebarkeun hiji aplikasi Next.
tumpukan Tech sarta fitur
Teras.js
Komponén jeung Kaca
Sampling data
Stilisasi
Panyebaran Proyék
SSR jeung SPA
Éta saé pisan gaduh conto dunya nyata sapertos aplikasi e-commerce pikeun diajar anu énggal. Anjeun tiasa manggihan tutorial di dieu.
Blog multibasa pinuh ku Nuxt.js
Nuxt.js kanggo Vue, naon Next.js kanggo React: kerangka anu saé pikeun ngagabungkeun kakuatan rendering sisi server sareng aplikasi halaman tunggal
Aplikasi ahir anu anjeun tiasa jieun bakal katingali sapertos kieu:
Naon anu anjeun bakal pelajari
Dina conto proyék ieu, anjeun bakal diajar kumaha cara nyieun situs wéb anu lengkep nganggo Nuxt.js, tina setélan awal dugi ka panyebaran ahir.
Butuh kauntungan tina seueur fitur anu saé anu ditawarkeun Nuxt, sapertos halaman sareng komponén, sareng gaya sareng SCSS.
tumpukan Tech sarta fitur
Nuxt.js
Komponén jeung Kaca
modul Storyblock
Hagfish
Vuex pikeun manajemén kaayaan
SCSS pikeun styling
Nuxt middlewares
Ieu mangrupikeun proyék anu saé pisan, nu ngawengku loba fitur Nuxt.js hébat. Abdi pribadi resep damel sareng Nuxt janten anjeun kedah nyobian sabab éta ogé bakal ngajantenkeun anjeun pamekar Vue anu saé.
Blog kalawan Gatsby
Gatsby mangrupikeun generator situs statik anu saé ngagunakeun React sareng GraphQL. Ieu hasil tina proyék:
Naon anu anjeun bakal pelajari
Dina tutorial ieu, anjeun bakal diajar kumaha ngagunakeun Gatsby pikeun nyieun blog anu bakal anjeun pake pikeun nyerat artikel anjeun sorangan nganggo React sareng GraphQL.
tumpukan Tech sarta fitur
gatsby
mere tanggapan
GraphQL
Plugins jeung téma
MDX / Markdown
Bootstrap CSS
Nyai
Upami anjeun kantos hoyong ngamimitian blog, ieu conto hébat kumaha carana make React jeung GraphQL.
Abdi henteu nyarios WordPress mangrupikeun pilihan anu goréng, tapi kalayan Gatsby anjeun tiasa ngawangun situs wéb anu berprestasi tinggi nganggo React - anu mangrupikeun kombinasi anu luar biasa.
Blog kalawan Gridsome
Gridsome pikeun Vue ... Oke, urang geus kungsi ieu kalawan salajengna / Nuxt.
Tapi sami bener keur Gridsome na Gatsby. Duanana nganggo GraphQL salaku lapisan datana, tapi Gridsome nganggo VueJS. Ieu ogé generator situs statik anu luar biasa anu bakal ngabantosan anjeun nyiptakeun blog anu saé:
Naon anu anjeun bakal pelajari
Proyék ieu bakal ngajarkeun anjeun kumaha ngadamel blog saderhana pikeun ngamimitian nganggo Gridsome, GraphQL sareng Markdown. Éta ogé nyertakeun kumaha cara nyebarkeun aplikasi ngalangkungan Netlify.
Quasar mangrupikeun kerangka Vue sanés anu tiasa dianggo pikeun nyiptakeun aplikasi mobile. Dina proyék ieu anjeun bakal nyiptakeun aplikasi pamuter audio, contona:
Naon anu anjeun bakal pelajari
Samentara proyék-proyék sanés museurkeun utamina kana aplikasi wéb, ieu bakal nunjukkeun anjeun kumaha cara ngadamel aplikasi sélulér nganggo Vue sareng kerangka Quasar.
Anjeun kedah parantos ngajalankeun Cordova sareng Android Studio / Xcode ngonpigurasi. Upami henteu, manual gaduh tautan kana halaman wéb Quasar dimana aranjeunna nunjukkeun anjeun kumaha nyetél sadayana.
tumpukan Tech sarta fitur
kuasar
Vue
Cordova
WaveSurfer
Komponén UI
proyék leutik, demonstrating kamampuhan Quasar pikeun nyieun aplikasi mobile.