9 ntau txoj haujlwm los ua kom koj cov txuj ci Front-End

9 ntau txoj haujlwm los ua kom koj cov txuj ci Front-End

Taw qhia

Txawm hais tias koj yog tus tshiab rau programming lossis tus tsim tawm raws caij nyoog, kev kawm cov ntsiab lus tshiab thiab cov lus / lub ntsiab lus yog qhov yuav tsum tau ua hauv kev lag luam no kom ua raws li cov kev xav tau.

Coj React, piv txwv li, uas Facebook qhib-qhov chaw tsuas yog plaub xyoos dhau los thiab twb dhau los ua tus lej ib qho kev xaiv rau JavaScript tsim thoob ntiaj teb.

Vue thiab Angular, tau kawg, kuj muaj lawv tus kheej kiv cua raws cai. Thiab tom qab ntawd muaj Svelte thiab lwm yam kev ua haujlwm thoob ntiaj teb xws li Next.js lossis Nuxt.js. Thiab Gatsby, thiab Gridsome, thiab Quasar ... thiab ntau ntxiv.

Yog tias koj xav ua pov thawj koj tus kheej li tus tsim JavaScript paub, koj yuav tsum muaj tsawg kawg yog qee qhov kev paub nrog ntau lub hauv paus thiab cov tsev qiv ntawv - ntxiv rau kev ua haujlwm nrog JS qub.

Txhawm rau pab koj dhau los ua tus thawj coj hauv ntej hauv 2020, Kuv tau muab tso ua ke cuaj qhov haujlwm sib txawv, txhua qhov tsom mus rau qhov sib txawv JavaScript lub moj khaum thiab lub tsev qiv ntawv raws li pawg tech uas koj tuaj yeem tsim thiab ntxiv rau koj cov ntaub ntawv. Nco ntsoov tias tsis muaj dab tsi pab koj ntau tshaj qhov tsim tau tiag tiag, yog li txav mus tom ntej, siv koj lub siab thiab ua kom nws tshwm sim

9 ntau txoj haujlwm los ua kom koj cov txuj ci Front-End

Tsab ntawv tau muab txhais nrog kev txhawb nqa ntawm EDISON Software, uas ua kom haum chav virtual rau ntau lub khw muag khoomThiab kuaj software.

Movie nrhiav app siv React (nrog hooks)

Thawj qhov koj tuaj yeem pib nrog yog tsim cov yeeb yaj kiab tshawb nrhiav app siv React. Hauv qab no yog ib daim duab ntawm daim ntawv thov zaum kawg yuav zoo li cas:

9 ntau txoj haujlwm los ua kom koj cov txuj ci Front-End

Koj yuav kawm dab tsi
Los ntawm kev tsim cov app no, koj yuav txhim kho koj cov kev txawj React los ntawm kev siv Hooks API tshiab. Qhov kev ua piv txwv siv React Cheebtsam, ntau hooks, ib qho API sab nraud, thiab tau kawg qee qhov CSS styling.

Tech pawg thiab nta

  • Teb nrog hooks
  • tsim-nti-app
  • Jsx
  • CSS

Tsis siv cov chav kawm, cov haujlwm no muab koj lub ntsiab lus nkag mus rau hauv React ua haujlwm tau zoo thiab yuav pab tau koj hauv 2020. koj nrhiav tau piv txwv qhov project ntawm no. Ua raws li cov lus qhia lossis ua rau koj tus kheej.

Tham App nrog Vue

Lwm qhov haujlwm zoo rau koj ua yog tsim kom muaj kev sib tham app siv kuv lub tsev qiv ntawv JavaScript nyiam: VueJS. Daim ntawv thov yuav zoo li no:

9 ntau txoj haujlwm los ua kom koj cov txuj ci Front-End

Koj yuav kawm dab tsi
Hauv qhov kev qhia no, koj yuav kawm paub yuav ua li cas thiaj li ua tau Vue app los ntawm kos - tsim cov khoom, tuav lub xeev, tsim txoj hauv kev, txuas rau cov kev pabcuam thib peb, thiab txawm tias tuav kev lees paub.

Tech pawg thiab nta

  • Vue
  • vuex ua
  • Vue Router
  • Vue CLI
  • Poom
  • CSS

Nov yog ib txoj haujlwm zoo heev los pib nrog Vue lossis txhim kho koj cov txuj ci uas twb muaj lawm kom nkag mus rau hauv kev txhim kho xyoo 2020. koj nrhiav tau kev qhia ntawm no.

Huab cua zoo nkauj nrog Angular 8

Qhov piv txwv no yuav pab koj tsim cov huab cua zoo nkauj siv Angular 8:

9 ntau txoj haujlwm los ua kom koj cov txuj ci Front-End

Koj yuav kawm dab tsi
Qhov project no yuav qhia koj cov txuj ci tseem ceeb hauv kev tsim cov ntawv thov los ntawm kos - los ntawm kev tsim los ntawm kev txhim kho, txhua txoj hauv kev mus rau kev xa tawm-npaj daim ntawv thov.

Tech pawg thiab nta

  • Lub kaum ntse ntse 8
  • Firebase
  • Server sab rendering
  • CSS nrog Grid thiab Flexbox
  • Mobile tus phooj ywg thiab adaptability
  • Tsaus hom
  • Zoo nkauj interface

Qhov kuv nyiam tshaj plaws txog qhov project tag nrho yog qhov uas koj tsis kawm txog kev nyob ib leeg. Hloov chaw, koj kawm tag nrho cov txheej txheem kev txhim kho, los ntawm kev tsim qauv mus rau kev xa mus zaum kawg.

To-Do daim ntawv thov siv Svelte

Svelte zoo li tus menyuam yaus tshiab ntawm kev tiv thaiv raws li txoj hauv kev - tsawg kawg zoo ib yam li React, Vue thiab Angular. Thiab qhov no yog ib qho ntawm cov khoom kub kub tshaj plaws rau xyoo 2020.

To-Do apps tsis tas yuav yog lub ntsiab lus kub tshaj plaws, tab sis nws yuav pab koj ua kom koj cov txuj ci Svelte tiag tiag. Nws yuav zoo li no:

9 ntau txoj haujlwm los ua kom koj cov txuj ci Front-End

Koj yuav kawm dab tsi
Qhov kev qhia no yuav qhia koj yuav ua li cas los tsim ib daim ntawv thov siv Svelte 3, txij thaum pib mus rau tag. Koj yuav siv cov khoom sib txuas, styling, thiab cov neeg tuav kev tshwm sim

Tech pawg thiab nta

  • Svelte 3
  • Cheebtsam
  • Styling nrog CSS
  • ES 6 syntax

Tsis muaj ntau qhov haujlwm zoo Svelte pib, yog li kuv pom qhov no yog ib qho kev xaiv zoo pib nrog.

E-commerce app siv Next.js

Next.js yog lub moj khaum nrov tshaj plaws rau kev tsim cov ntawv thov React uas txhawb nqa server-sab rendering tawm ntawm lub thawv.

Qhov project no yuav qhia koj yuav ua li cas los tsim ib daim ntawv thov kev lag luam e-lag luam uas zoo li no:

9 ntau txoj haujlwm los ua kom koj cov txuj ci Front-End

Koj yuav kawm dab tsi
Hauv qhov project no, koj yuav kawm paub yuav ua li cas los txhim kho nrog Next.jsβ€”tsim cov nplooj ntawv tshiab thiab cov khoom xyaw, rho tawm cov ntaub ntawv, thiab cov qauv thiab siv daim ntawv thov Tom ntej.

Tech pawg thiab nta

  • Tom ntej no.js
  • Cheebtsam thiab nplooj ntawv
  • Cov ntaub ntawv sampling
  • Stylization
  • Kev xa tawm qhov project
  • SSR thiab SPA

Nws yog ib txwm zoo kom muaj qhov piv txwv tiag tiag xws li e-lag luam app kom kawm tau yam tshiab. Koj ua tau nrhiav qhov kev qhia ntawm no.

Tag nrho-fledged multilingual blog nrog Nuxt.js

Nuxt.js yog rau Vue, dab tsi Next.js yog rau React: lub ntsiab lus zoo rau kev sib txuas lub zog ntawm server-sab rendering thiab ib nplooj ntawv thov
Daim ntawv thov zaum kawg koj tuaj yeem tsim yuav zoo li no:

9 ntau txoj haujlwm los ua kom koj cov txuj ci Front-End

Koj yuav kawm dab tsi

Hauv qhov qauv piv txwv no, koj yuav kawm paub yuav ua li cas los tsim lub vev xaib ua tiav siv Nuxt.js, los ntawm kev teeb tsa thawj zaug mus rau qhov kawg xa tawm.

Nws siv sijhawm ntau ntawm cov yam ntxwv txias uas Nuxt yuav tsum muaj, xws li nplooj ntawv thiab cov khoom siv, thiab styling nrog SCSS.

Tech pawg thiab nta

  • Nuxt.js
  • Cheebtsam thiab nplooj ntawv
  • Storyblock module
  • Hagfish
  • Vuex rau lub xeev tswj
  • SCSS rau styling
  • Nuxt middlewares

Qhov no yog ib qhov project txias heev, uas suav nrog ntau yam zoo Nuxt.js nta. Kuv tus kheej nyiam ua haujlwm nrog Nuxt yog li koj yuav tsum muab nws sim ua nws tseem yuav ua rau koj ua tus tsim Vue zoo.

Blog nrog Gatsby

Gatsby yog lub tshuab hluav taws xob zoo li qub uas siv React thiab GraphQL. Nov yog qhov tshwm sim ntawm qhov project:

9 ntau txoj haujlwm los ua kom koj cov txuj ci Front-End

Koj yuav kawm dab tsi

Hauv qhov kev qhia no, koj yuav kawm paub siv Gatsby los tsim blog uas koj yuav siv los sau koj tus kheej cov ntawv siv React thiab GraphQL.

Tech pawg thiab nta

  • gatsby
  • React
  • GraphQL
  • Plugins thiab cov ntsiab lus
  • MDX/Markdown
  • Bootstrap CSS
  • Qauv

Yog tias koj tau xav pib blog, qhov no yog ib qho piv txwv zoo ntawm yuav ua li cas kom nws siv React thiab GraphQL.

Kuv tsis tau hais tias WordPress yog qhov kev xaiv tsis zoo, tab sis nrog Gatsby koj tuaj yeem tsim cov vev xaib ua haujlwm siab siv React - uas yog kev sib xyaw ua ke zoo heev.

Blog nrog Gridsome

Gridsome rau Vue... Okay, peb twb muaj qhov no nrog Next/Nuxt.
Tab sis tib yam muaj tseeb rau Gridsome thiab Gatsby. Ob leeg siv GraphQL ua lawv cov ntaub ntawv txheej, tab sis Gridsome siv VueJS. Qhov no kuj yog ib qho amazing site generator uas yuav pab tau koj tsim cov blogs zoo:

9 ntau txoj haujlwm los ua kom koj cov txuj ci Front-End

Koj yuav kawm dab tsi

Qhov project no yuav qhia koj yuav ua li cas los tsim ib qho blog yooj yim los pib nrog Gridsome, GraphQL thiab Markdown. Nws tseem hais txog yuav ua li cas xa daim ntawv thov los ntawm Netlify.

Tech pawg thiab nta

  • Gridsome
  • Vue
  • GraphQL
  • Markdown
  • Netlify

Qhov no yeej tsis yog qhov kev qhia dav dav tshaj plaws, tab sis nws npog cov ntsiab lus tseem ceeb ntawm Gridsome thiab Markdown tej zaum yuav yog qhov pib zoo.

SoundCloud zoo li lub suab player siv Quasar

Quasar yog lwm Vue lub moj khaum uas tuaj yeem siv los tsim cov ntawv thov mobile. Hauv qhov project no koj yuav tsim ib daim ntawv thov audio player, piv txwv li:

9 ntau txoj haujlwm los ua kom koj cov txuj ci Front-End

Koj yuav kawm dab tsi

Thaum lwm cov haujlwm tsom mus rau cov ntawv thov hauv web, qhov no yuav qhia koj yuav ua li cas los tsim ib daim ntawv thov mobile siv Vue thiab Quasar moj khaum.
Koj yuav tsum tau muaj Cordova khiav nrog Android Studio / Xcode teeb tsa. Yog tias tsis yog, phau ntawv qhia muaj qhov txuas mus rau Quasar lub vev xaib uas lawv qhia koj yuav teeb tsa txhua yam.

Tech pawg thiab nta

  • quasar
  • Vue
  • Cordova
  • WaveSurfer
  • UI Cheebtsam

Qhov project me, ua qauv qhia Quasar lub peev xwm los tsim cov ntawv thov mobile.

Tau qhov twg los: www.hab.com

Ntxiv ib saib