9 deui proyék pikeun ngasah kaahlian Front-End anjeun

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

9 deui proyék pikeun ngasah kaahlian Front-End anjeun

Artikel ieu ditarjamahkeun kalayan dukungan EDISON Software, anu ngajadikeun kamar pas virtual pikeun toko multi-brandjeung software tés.

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:

9 deui proyék pikeun ngasah kaahlian Front-End anjeun

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:

9 deui proyék pikeun ngasah kaahlian Front-End anjeun

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:

9 deui proyék pikeun ngasah kaahlian Front-End anjeun

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:

9 deui proyék pikeun ngasah kaahlian Front-End anjeun

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

tumpukan Tech sarta fitur

  • Leutik 3
  • komponén
  • Styling kalawan CSS
  • ES 6 sintaksis

Aya teu loba proyék starter Svelte alus, jadi kuring kapanggih ieu pilihan alus pikeun ngamimitian kalawan.

Aplikasi e-commerce nganggo Next.js

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:

9 deui proyék pikeun ngasah kaahlian Front-End anjeun

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:

9 deui proyék pikeun ngasah kaahlian Front-End anjeun

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:

9 deui proyék pikeun ngasah kaahlian Front-End anjeun

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é:

9 deui proyék pikeun ngasah kaahlian Front-End anjeun

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.

tumpukan Tech sarta fitur

  • Geulis
  • Vue
  • GraphQL
  • Markdown
  • Netlify

Ieu pasti sanes tutorial panghadena, tapi nyertakeun konsép dasar tina Gridsome na Markdown tiasa janten titik awal anu saé.

Pamuter audio sapertos SoundCloud nganggo Quasar

Quasar mangrupikeun kerangka Vue sanés anu tiasa dianggo pikeun nyiptakeun aplikasi mobile. Dina proyék ieu anjeun bakal nyiptakeun aplikasi pamuter audio, contona:

9 deui proyék pikeun ngasah kaahlian Front-End anjeun

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.

sumber: www.habr.com

Tambahkeun komentar