పరిచయం
మీరు ప్రోగ్రామింగ్‌కు కొత్తవారైనా లేదా అనుభవజ్ఞుడైన డెవలపర్ అయినా, ట్రెండ్‌లను కొనసాగించడానికి ఈ పరిశ్రమలో కొత్త భావనలు మరియు భాషలు/ఫ్రేమ్‌వర్క్‌లను నేర్చుకోవడం తప్పనిసరి.
ఉదాహరణకు, Facebook కేవలం నాలుగు సంవత్సరాల క్రితం ఓపెన్ సోర్స్ చేసి ప్రపంచవ్యాప్తంగా ఉన్న JavaScript డెవలపర్‌లకు ఇప్పటికే నంబర్ వన్ ఎంపికగా మారిన రియాక్ట్ తీసుకోండి.
Vue మరియు కోణీయ, వాస్తవానికి, వారి స్వంత చట్టబద్ధమైన అభిమానుల సంఖ్యను కలిగి ఉంటాయి. ఆపై Svelte మరియు Next.js లేదా Nuxt.js వంటి ఇతర సార్వత్రిక ఫ్రేమ్‌వర్క్‌లు ఉన్నాయి. మరియు గాట్స్‌బై, మరియు గ్రిడ్‌సోమ్, మరియు క్వాసర్... మరియు మరిన్ని.
మీరు అనుభవజ్ఞుడైన JavaScript డెవలపర్‌గా నిరూపించుకోవాలనుకుంటే, మీరు మంచి పాత JSతో పని చేయడంతో పాటు - వివిధ ఫ్రేమ్‌వర్క్‌లు మరియు లైబ్రరీలతో కనీసం కొంత అనుభవం కలిగి ఉండాలి.
మీరు 2020లో ఫ్రంట్-ఎండ్ మాస్టర్‌గా మారడంలో మీకు సహాయపడటానికి, నేను తొమ్మిది విభిన్న ప్రాజెక్ట్‌లను ఒకచోట చేర్చాను, ప్రతి ఒక్కటి విభిన్నమైన JavaScript ఫ్రేమ్‌వర్క్ మరియు లైబ్రరీపై దృష్టి సారిస్తూ టెక్ స్టాక్‌గా మీరు నిర్మించవచ్చు మరియు మీ పోర్ట్‌ఫోలియోకు జోడించవచ్చు. వాస్తవానికి విషయాలను సృష్టించడం కంటే మీకు ఏదీ సహాయపడదని గుర్తుంచుకోండి, కాబట్టి ముందుకు సాగండి, మీ మనస్సును ఉపయోగించుకోండి మరియు దానిని సాధించండి
వ్యాసం EDISON సాఫ్ట్‌వేర్ మద్దతుతో అనువదించబడింది, ఇది మరియు .
రియాక్ట్ (హుక్స్‌తో) ఉపయోగించి మూవీ సెర్చ్ యాప్
రియాక్ట్‌ని ఉపయోగించి మూవీ సెర్చ్ యాప్‌ని క్రియేట్ చేయడం మీరు మొదటగా ప్రారంభించవచ్చు. చివరి అప్లికేషన్ ఎలా ఉంటుందో దాని యొక్క చిత్రం క్రింద ఉంది:
మీరు ఏమి నేర్చుకుంటారు
ఈ యాప్‌ను రూపొందించడం ద్వారా, మీరు సాపేక్షంగా కొత్త Hooks APIని ఉపయోగించడం ద్వారా మీ రియాక్ట్ నైపుణ్యాలను మెరుగుపరుస్తారు. ఉదాహరణ ప్రాజెక్ట్ రియాక్ట్ భాగాలు, చాలా హుక్స్, బాహ్య API మరియు కొన్ని CSS స్టైలింగ్‌ని ఉపయోగిస్తుంది.
టెక్ స్టాక్ మరియు ఫీచర్లు
- హుక్స్‌తో ప్రతిస్పందించండి
- క్రియేట్-రియాక్ట్-అనువర్తనం
- JSX
- CSS
ఎటువంటి తరగతులను ఉపయోగించకుండా, ఈ ప్రాజెక్ట్‌లు మీకు ఫంక్షనల్ రియాక్ట్‌లోకి సరైన ఎంట్రీ పాయింట్‌ను అందిస్తాయి మరియు 2020లో మీకు ఖచ్చితంగా సహాయపడతాయి. మీరు కనుగొనగలరు . సూచనలను అనుసరించండి లేదా మీ స్వంతం చేసుకోండి.
Vueతో చాట్ యాప్
నాకు ఇష్టమైన జావాస్క్రిప్ట్ లైబ్రరీని ఉపయోగించి చాట్ యాప్‌ను సృష్టించడం మీరు చేయవలసిన మరో గొప్ప ప్రాజెక్ట్: VueJS. అప్లికేషన్ ఇలా కనిపిస్తుంది:
మీరు ఏమి నేర్చుకుంటారు
ఈ ట్యుటోరియల్‌లో, మీరు మొదటి నుండి Vue యాప్‌ను ఎలా తయారు చేయాలో నేర్చుకుంటారు - భాగాలను సృష్టించడం, స్థితిని నిర్వహించడం, మార్గాలను సృష్టించడం, మూడవ పక్ష సేవలకు కనెక్ట్ చేయడం మరియు ప్రామాణీకరణను కూడా నిర్వహించడం.
టెక్ స్టాక్ మరియు ఫీచర్లు
- వ్యూ
- vuex
- Vue రూటర్
- Vue CLI
- Pusher
- CSS
Vueతో ప్రారంభించడానికి లేదా 2020లో అభివృద్ధిలోకి రావడానికి మీ ప్రస్తుత నైపుణ్యాలను మెరుగుపరచుకోవడానికి ఇది నిజంగా గొప్ప ప్రాజెక్ట్. మీరు కనుగొనగలరు .
కోణీయ 8తో అందమైన వాతావరణ యాప్
కోణీయ 8ని ఉపయోగించి అందమైన వాతావరణ యాప్‌ను రూపొందించడంలో ఈ ఉదాహరణ మీకు సహాయం చేస్తుంది:
మీరు ఏమి నేర్చుకుంటారు
ఈ ప్రాజెక్ట్ మొదటి నుండి అప్లికేషన్‌లను రూపొందించడంలో మీకు విలువైన నైపుణ్యాలను నేర్పుతుంది - డిజైన్ నుండి డెవలప్‌మెంట్ వరకు, డిప్లాయ్‌మెంట్-సిద్ధంగా ఉన్న అప్లికేషన్ వరకు.
టెక్ స్టాక్ మరియు ఫీచర్లు
- కోణీయ 8
- Firebase
- సర్వర్ వైపు రెండరింగ్
- గ్రిడ్ మరియు ఫ్లెక్స్‌బాక్స్‌తో CSS
- మొబైల్ స్నేహపూర్వక మరియు అనుకూలత
- డార్క్ మోడ్
- అందమైన ఇంటర్ఫేస్
ఈ అన్నింటినీ చుట్టుముట్టే ప్రాజెక్ట్‌లో నేను నిజంగా ఇష్టపడేది ఏమిటంటే, మీరు ఏకాంతంగా విషయాలను అధ్యయనం చేయరు. బదులుగా, మీరు డిజైన్ నుండి తుది విస్తరణ వరకు మొత్తం అభివృద్ధి ప్రక్రియను నేర్చుకుంటారు.
Svelteని ఉపయోగించి చేయవలసిన పని
స్వేల్టే అనేది కాంపోనెంట్-బేస్డ్ అప్రోచ్‌లో కొత్త పిల్లవాడిలా ఉంటుంది - కనీసం రియాక్ట్, వ్యూ మరియు యాంగ్యులర్‌ని పోలి ఉంటుంది. మరియు ఇది 2020కి సంబంధించిన హాటెస్ట్ కొత్త ఉత్పత్తులలో ఒకటి.
చేయవలసిన యాప్‌లు హాటెస్ట్ టాపిక్ కానవసరం లేదు, కానీ ఇది మీ స్వల్టే నైపుణ్యాలను మెరుగుపరుచుకోవడంలో మీకు నిజంగా సహాయపడుతుంది. ఇది ఇలా కనిపిస్తుంది:
మీరు ఏమి నేర్చుకుంటారు
ఈ ట్యుటోరియల్ ప్రారంభం నుండి ముగింపు వరకు Svelte 3ని ఉపయోగించి అప్లికేషన్‌ను ఎలా సృష్టించాలో మీకు చూపుతుంది. మీరు భాగాలు, స్టైలింగ్ మరియు ఈవెంట్ హ్యాండ్లర్‌లను ఉపయోగిస్తారు
టెక్ స్టాక్ మరియు ఫీచర్లు
- స్వల్టే 3
- భాగాలు
- CSSతో స్టైలింగ్
- ES 6 సింటాక్స్
చాలా మంచి Svelte స్టార్టర్ ప్రాజెక్ట్‌లు లేవు, కాబట్టి నేను కనుగొన్నాను .
Next.jsని ఉపయోగించి ఇ-కామర్స్ యాప్
Next.js అనేది బాక్స్ వెలుపల సర్వర్ వైపు రెండరింగ్‌కు మద్దతు ఇచ్చే రియాక్ట్ అప్లికేషన్‌లను రూపొందించడానికి అత్యంత ప్రజాదరణ పొందిన ఫ్రేమ్‌వర్క్.
ఈ ప్రాజెక్ట్ ఇలా కనిపించే ఇ-కామర్స్ అప్లికేషన్‌ను ఎలా సృష్టించాలో మీకు చూపుతుంది:
మీరు ఏమి నేర్చుకుంటారు
ఈ ప్రాజెక్ట్‌లో, మీరు Next.jsతో ఎలా అభివృద్ధి చేయాలో నేర్చుకుంటారు—కొత్త పేజీలు మరియు భాగాలను సృష్టించడం, డేటాను సంగ్రహించడం మరియు శైలి మరియు తదుపరి అప్లికేషన్‌ని అమలు చేయడం.
టెక్ స్టాక్ మరియు ఫీచర్లు
- తదుపరి.జెస్
- భాగాలు మరియు పేజీలు
- డేటా నమూనా
- శైలీకరణ
- ప్రాజెక్ట్ విస్తరణ
- SSR మరియు SPA
క్రొత్తదాన్ని నేర్చుకోవడానికి ఇ-కామర్స్ యాప్ వంటి వాస్తవ ప్రపంచ ఉదాహరణను కలిగి ఉండటం ఎల్లప్పుడూ గొప్ప విషయం. నువ్వు చేయగలవు .
Nuxt.jsతో పూర్తి స్థాయి బహుభాషా బ్లాగ్
Nuxt.js Vue కోసం, రియాక్ట్ కోసం Next.js అంటే ఏమిటి: సర్వర్-సైడ్ రెండరింగ్ మరియు సింగిల్-పేజీ అప్లికేషన్‌ల శక్తిని కలపడానికి గొప్ప ఫ్రేమ్‌వర్క్
మీరు సృష్టించగల చివరి అప్లికేషన్ ఇలా కనిపిస్తుంది:
మీరు ఏమి నేర్చుకుంటారు
ఈ నమూనా ప్రాజెక్ట్‌లో, ప్రారంభ సెటప్ నుండి తుది విస్తరణ వరకు Nuxt.jsని ఉపయోగించి పూర్తి వెబ్‌సైట్‌ను ఎలా సృష్టించాలో మీరు నేర్చుకుంటారు.
ఇది Nuxt అందించే పేజీలు మరియు భాగాలు మరియు SCSSతో స్టైలింగ్ వంటి అనేక అద్భుతమైన ఫీచర్‌ల ప్రయోజనాన్ని పొందుతుంది.
టెక్ స్టాక్ మరియు ఫీచర్లు
- Nuxt.js
- భాగాలు మరియు పేజీలు
- స్టోరీబ్లాక్ మాడ్యూల్
- హాగ్ ఫిష్
- రాష్ట్ర నిర్వహణ కోసం Vuex
- స్టైలింగ్ కోసం SCSS
- నక్స్ట్ మిడిల్‌వేర్
, ఇది అనేక గొప్ప Nuxt.js లక్షణాలను కలిగి ఉంది. నేను వ్యక్తిగతంగా నక్స్ట్‌తో కలిసి పనిచేయడాన్ని ఇష్టపడతాను కాబట్టి మీరు దీన్ని ఒకసారి ప్రయత్నించండి, ఇది మిమ్మల్ని గొప్ప Vue డెవలపర్‌గా కూడా చేస్తుంది.
Gatsbyతో బ్లాగ్ చేయండి
Gatsby అనేది React మరియు GraphQLని ఉపయోగించే ఒక అద్భుతమైన స్టాటిక్ సైట్ జనరేటర్. ఇది ప్రాజెక్ట్ యొక్క ఫలితం:
మీరు ఏమి నేర్చుకుంటారు
ఈ ట్యుటోరియల్‌లో, మీరు React మరియు GraphQLని ఉపయోగించి మీ స్వంత కథనాలను వ్రాయడానికి ఉపయోగించే బ్లాగును సృష్టించడానికి Gatsbyని ఎలా ఉపయోగించాలో నేర్చుకుంటారు.
టెక్ స్టాక్ మరియు ఫీచర్లు
- గాత్స్బీ లను సంప్రదించింది
- స్పందించలేదు
- గ్రాఫ్క్యూల్
- ప్లగిన్‌లు మరియు థీమ్‌లు
- MDX/మార్క్‌డౌన్
- బూట్స్ట్రాప్ CSS
- పద్ధతులు
మీరు ఎప్పుడైనా బ్లాగును ప్రారంభించాలనుకుంటే, రియాక్ట్ మరియు గ్రాఫ్‌క్యూఎల్‌ని ఉపయోగించి దీన్ని ఎలా తయారు చేయాలో.
నేను WordPress ఒక చెడ్డ ఎంపిక అని చెప్పడం లేదు, కానీ Gatsbyతో మీరు Reactని ఉపయోగించి అధిక-పనితీరు గల వెబ్‌సైట్‌లను రూపొందించవచ్చు - ఇది అద్భుతమైన కలయిక.
గ్రిడ్‌సమ్‌తో బ్లాగ్ చేయండి
Vue కోసం గ్రిడ్సమ్... సరే, మేము ఇప్పటికే దీన్ని Next/Nuxtతో కలిగి ఉన్నాము.
కానీ గ్రిడ్సమ్ మరియు గాట్స్‌బైకి కూడా ఇదే వర్తిస్తుంది. రెండూ GraphQLని తమ డేటా లేయర్‌గా ఉపయోగిస్తాయి, అయితే Gridsome VueJSని ఉపయోగిస్తుంది. ఇది అద్భుతమైన స్టాటిక్ సైట్ జనరేటర్, ఇది గొప్ప బ్లాగులను సృష్టించడంలో మీకు సహాయపడుతుంది:
మీరు ఏమి నేర్చుకుంటారు
గ్రిడ్సమ్, గ్రాఫ్‌క్యూఎల్ మరియు మార్క్‌డౌన్‌తో ప్రారంభించడానికి సాధారణ బ్లాగును ఎలా సృష్టించాలో ఈ ప్రాజెక్ట్ మీకు నేర్పుతుంది. నెట్‌లిఫై ద్వారా అప్లికేషన్‌ను ఎలా అమలు చేయాలో కూడా ఇది కవర్ చేస్తుంది.
టెక్ స్టాక్ మరియు ఫీచర్లు
- గ్రిడ్సమ్
- వ్యూ
- గ్రాఫ్క్యూల్
- Markdown
- నెట్‌లిఫై
ఇది ఖచ్చితంగా అత్యంత సమగ్రమైన ట్యుటోరియల్ కాదు, కానీ ఇది గ్రిడ్సమ్ యొక్క ప్రాథమిక భావనలను కవర్ చేస్తుంది మరియు .
Quasar ఉపయోగించి సౌండ్‌క్లౌడ్ లాంటి ఆడియో ప్లేయర్
Quasar అనేది మొబైల్ అప్లికేషన్‌లను రూపొందించడానికి ఉపయోగించే మరొక Vue ఫ్రేమ్‌వర్క్. ఈ ప్రాజెక్ట్‌లో మీరు ఆడియో ప్లేయర్ అప్లికేషన్‌ను సృష్టిస్తారు, ఉదాహరణకు:
మీరు ఏమి నేర్చుకుంటారు
ఇతర ప్రాజెక్ట్‌లు ప్రధానంగా వెబ్ అప్లికేషన్‌లపై దృష్టి సారిస్తుండగా, Vue మరియు Quasar ఫ్రేమ్‌వర్క్‌ని ఉపయోగించి మొబైల్ అప్లికేషన్‌ను ఎలా సృష్టించాలో ఇది మీకు చూపుతుంది.
మీరు ఇప్పటికే ఆండ్రాయిడ్ స్టూడియో/ఎక్స్‌కోడ్ కాన్ఫిగర్‌తో కార్డోవాను రన్ చేసి ఉండాలి. కాకపోతే, మాన్యువల్‌లో క్వాసర్ వెబ్‌సైట్‌కి లింక్ ఉంది, అక్కడ వారు అన్నింటినీ ఎలా సెటప్ చేయాలో చూపుతారు.
టెక్ స్టాక్ మరియు ఫీచర్లు
- క్వాజార్
- వ్యూ
- Cordova
- వేవ్ సర్ఫర్
- UI భాగాలు
, మొబైల్ అప్లికేషన్‌లను రూపొందించడానికి క్వాసర్ సామర్థ్యాలను ప్రదర్శిస్తోంది.
మూలం: www.habr.com