መካከለኛ አጋዥ ሥልጠናን ምላሽ ይስጡ - 3 ደረጃዎች

2024 ደራሲ ደራሲ: John Day | [email protected]. ለመጨረሻ ጊዜ የተሻሻለው: 2024-01-30 07:30

መካከለኛ አጋዥ ሥልጠናን ምላሽ ይስጡ

የተጠናቀቀውን ምርት እዚህ ይመልከቱ።

ምን ትማራለህ?

ከ React.js ጋር ቀላል የሚደረጉ ዝርዝርን ይፈጥራሉ ፣ እና ስለተወሳሰቡ የምላሽ ክፍሎች ይማሩ። ቅድመ -ሁኔታዎች (በከፍተኛ ሁኔታ የታዘዘ) ግብረመልሱን ያጠናቅቁ። js መመሪያን ይጀምራል። የኤችቲኤምኤል እውቀት ስለ CSS መሠረታዊ የ shellል ትዕዛዞች እውቀት በጃቫስክሪፕት ውስጥ ተገቢ እውቀት

አቅርቦቶች

ሁሉም ሶፍትዌሮች በትምህርቱ ውስጥ ይሸፈናሉ።

የሚከተለው ሶፍትዌር የተጫነ ኮምፒተር ያስፈልግዎታል።

• npm/yarn
• Js ን የሚደግፍ አይዲኢ
• የድር አሳሽ

ደረጃ 1 የመካከለኛ አጋዥ ስልጠናን ምላሽ ይስጡ

እንደ መጀመር

ለምን React.js?

በ React.js ፣ ነጥቡ ኮድን እንደገና መጠቀም ነው። ለምሳሌ ፣ በ 100 ገጾች ውስጥ ያለዎት የአሰሳ አሞሌ አለዎት ይበሉ። አዲስ ገጽ ማከል ከፈለጉ ፣ ከዚያ በእያንዳንዱ ገጽ ላይ የአሰሳ አሞሌውን መለወጥ ያስፈልግዎታል ፣ ማለትም ለ 100 ገጾች ተመሳሳይ ነገር ማድረግ አለብዎት ማለት ነው። በማክሮዎች እንኳን ይህ በጣም አድካሚ ይሆናል።

አስፈላጊ ሶፍትዌር/ጥቅሎችን መጫን

ያስፈልግዎታል:

npm/yarn

እንዴት እንደሚጫን:

1. ይሂዱ እና የቅርብ ጊዜውን LTS Node.js ይጫኑ
2. አማራጭ -ክር እንደ የጥቅል ሥራ አስኪያጅዎ የሚመርጡ ከሆነ ፣ በኃይል ቁልቁል npm ጫን -g ክር ውስጥ በመተየብ ክር ይጫኑ
3. ሀይሎች/cmd.exe ይክፈቱ
4. ፕሮጀክትዎን ለመፍጠር ወደሚፈልጉት ማውጫ ይሂዱ
5. Npx ፍጠር-ምላሽ-መተግበሪያን ይተይቡ።

የማዋቀሪያ ደረጃን ጨርሰዋል። እሱን ለመፈተሽ ፣ የኃይል ቁልፉን ይክፈቱ ፣ ወደ ፕሮጀክት ማውጫዎ ይሂዱ እና የ npm ጅምርን ይተይቡ። በነባሪ አሳሽዎ ላይ የተጫነ ድረ -ገጽ ማግኘት አለብዎት።

ደረጃ 2: ደረጃ 1: መጀመር

ለመጀመር የሚከተሉትን ፋይሎች ከእርስዎ /src ማውጫ ይሰርዙ

• App.test.js
• index.css
• logo.svg
• serviceWorker.js
• setupTests.js

እነዚህ ፋይሎች አያስፈልጉንም።

እንዲሁም የእኛን የፋይል ስርዓት እናደራጅ። በ /src /ውስጥ እነዚህን ማውጫዎች ይፍጠሩ

• js
• css

App.js ን ወደ js dir እና App.css ወደ css dir ያስገቡ።

በመቀጠል ጥገኖቹን እንደገና እናደራጅ።

በኢንዴክስ. ServiceWorker.register () ን ይሰርዙ። የመተግበሪያ መንገዶቹን ያስተካክሉ።

በ App.js ውስጥ ፣ ከአሁን በኋላ ስለማያስፈልገን ለ logo.svg ማስመጣት ያስወግዱ። App.css ን ይራመዱ። የመተግበሪያውን () ተግባር እና ወደ መተግበሪያ መላክን ይሰርዙ።

በሪአክ ውስጥ ፣ አባላትን ለመለየት 2 መንገዶች አሉን። እኛ ተግባራት እና ክፍሎች አሉን። ተግባራት ለአነስተኛ ውስብስብ ዕቃዎች ናቸው ፣ እና ክፍሎች በአጠቃላይ ለተወሳሰቡ አካላት ናቸው። የአንድ ዝርዝር ዝርዝር ከኤችቲኤምኤል ስብስብ የበለጠ የተወሳሰበ ስለሆነ የመደብ አገባቡን እንጠቀማለን።

ይህንን ወደ ኮድዎ ያክሉት ፦

pastebin.com/nGXeCpaH

html በ 2 ዲስኮች ውስጥ ይሄዳል።

ኤለመንቱን እንገልፃለን።

pastebin.com/amjd0jnb

በስቴቱ ውስጥ እሴትን እንዴት እንደገለፅን ያስተውሉ። ይህን በኋላ እንፈልጋለን።

በአስተርጓሚ ተግባር ውስጥ ፣ ሰላም በ {this.state.value} ይተኩ

እኛ ከገለፅነው ግዛት የተላለፈውን እሴት እያቀረብን ነው።

ስለዚህ እንፈትነው!

በመተግበሪያ ማቅረቢያ ተግባር ውስጥ በዚህ ይተኩ

pastebin.com/aGLX4jVE

እሴት ማሳየት አለበት - “ሙከራ”።

ብዙ ተግባራትን ማከናወን እንደምንችል እንይ!

አንድ ንጥረ ነገር ብቻ እንዲሰጥ React ን ከማግኘት ይልቅ ድርድርን መፍጠር እና በምትኩ ድርድርን ለመስጠት ምላሽ መስጠት እንችላለን።

የአቅርቦት ተግባርን ወደዚህ ይለውጡ

pastebin.com/05nqsw71

ይህ 10 የተለያዩ ስራዎችን መስጠት አለበት። ቁልፎችን እንዴት እንደጨመርን ልብ ይበሉ። እነዚህ ቁልፎች ለምላሽ እና ለእኛ እንደ መለያዎች ያገለግላሉ ፣ እኛ ከፈለግን።

አሁን የእኛ የተግባር ዝርዝር እየሰራ ስለሆነ ተግባሮቹን የምንጭንበት መንገድ እናገኛለን። የእኛ ግዛት የሚገባው እዚህ ነው።

በእኛ ላይ ገንቢ እንጨምር።

pastebin.com/9jHAz2AS

በዚህ ገንቢ ውስጥ ፣ ተግባሩን አርሬ ከአቀባበል ተግባሩ ወደ ግዛቱ አዛውረነዋል። ተግባሩን ይሰርዙ እና በአቅርቦት ተግባር ውስጥ ለሉፕ። በዲቪዲው ውስጥ ያለውን ተግባርArray ወደዚህ.state.taskArray ይለውጡ።

በአሁኑ ጊዜ የእርስዎ App.js ኮድ እንደዚህ መሆን አለበት

pastebin.com/1iNtUnE6

ደረጃ 3 - ነገሮችን ለማከል እና ለማስወገድ መንገድን ማከል

ነገሮችን ለማከል እና ለማስወገድ መንገድ እንጨምር። እስቲ እናቅደው።

ምን ያስፈልገናል?

• ለተጠቃሚው ዕቃዎችን የሚያክልበት መንገድ
• ዕቃዎችን ለማከማቸት ቦታ
• ዕቃዎችን መልሶ ለማግኘት መንገድ

ምን እንጠቀማለን?

• አንድ አካል
• የአከባቢ ማከማቻ ኤፒአይ w/ JSON

በግብዓት አካል እንጀምር።

ከ {this.state.taskArray} በታች ፣ ወደ ኮድዎ ግቤት እና አዝራር ያክሉ

አክል

የጽሑፍ ግብዓት እና አክል አዝራር አሁን መሆን አለበት።

አሁን ምንም አያደርግም ፣ ስለዚህ በእኛ የመተግበሪያ ዘዴ 6 ዘዴዎችን እንጨምር።

አዝራሩ ጠቅ ሲደረግ እና እንዲሁም አንድ ሰው በግቤት ውስጥ ሲተይብ ዘዴ እንፈልጋለን። እንዲሁም የተግባር ድርድርን ለማመንጨት ፣ እንዲሁም ተግባሮችን ለማዳን ፣ ለመጫን እና ለማስወገድ መንገድ እንፈልጋለን።

እነዚህን 6 ዘዴዎች እንጨምር።

አዝራር ጠቅ ያድርጉ ()

ግቤት ተይብ (evt)

TaskArray ()

SaveTasks (ተግባራት)

getTasks ()

አስወግድ (መታወቂያ)

እንዲሁም ይህንን ተለዋዋጭ ወደ እኛ ሁኔታ እንጨምር-

ግብዓት

እኛ ደግሞ ተግባሮቻችንን ከዚህ ጋር ማያያዝ አለብን።

pastebin.com/syx465hD

ተግባራዊነትን ማከል እንጀምር።

እንደዚህ ያሉትን 2 ባህሪዎች ያክሉ

ይህ ያደርገዋል ተጠቃሚው በመግቢያው ውስጥ ማንኛውንም ነገር ሲተይብ ተግባሩን ይፈጽማል።

አክል ላይ ጠቅ ያድርጉ አይነታ ወደ እንደዚህ አክል

አክል

ተጠቃሚው አዝራሩን ጠቅ ሲያደርግ ተግባሩ ይፈፀማል።

አሁን የኤችቲኤምኤል ክፍሉ ተከናውኗል ፣ በተግባራዊነቱ እንቀጥል።

የአካባቢያዊ ማከማቻ ኤፒአይ በይነገጽን አስቀድሜ ጽፌያለሁ ፣ ስለዚህ የ SaveTasks ን ፣ getTasks ን ይተኩ እና የ ‹Task› ተግባሮችን በዚህ ያስወግዱ

pastebin.com/G02cMPbi

በግብዓት ዓይነት ተግባር እንጀምር።

ተጠቃሚው በሚተይብበት ጊዜ የግብዓቱን ውስጣዊ እሴት መለወጥ አለብን።

ከምላሽ ጋር የቀረበውን የ setState ተግባር በመጠቀም ያንን እናድርግ።

this.setState ({ግቤት evt.target.value});

በዚህ መንገድ የመግቢያውን ዋጋ ማግኘት እንችላለን።

አንዴ ከተጠናቀቀ ፣ በአዝራሩ ጠቅታ ተግባር ላይ መሥራት እንችላለን።

በተግባሩ ዝርዝር ውስጥ አንድ ተግባር ማከል አለብን። መጀመሪያ የተግባር ዝርዝሩን ከአካባቢያዊ ማከማቻ እንጎተት ፣ አርትዕ እና ከዚያ እናስቀምጠዋለን። ከዚያ እሱን ለማዘመን የተግባር ዝርዝርን እንደገና እንዲሰጥ እንጠራዋለን።

var taskList = this.getTasks ();

taskList.tasks.push (this.state.input);

this.saveTasks (taskList);

this.generateTaskArray ();

ተግባሮቹን እናገኛለን ፣ የግብዓት እሴቱን ወደ ተግባሮቹ እንገፋፋለን እና ከዚያ እናስቀምጠዋለን። ከዚያ የተግባር ድርድርን እንፈጥራለን።

አሁን ፣ በ geneTaskArray () ተግባር ላይ እንሥራ።

አለብን:

• ተግባሮችን ያግኙ
• የተግባር ክፍሎች ድርድር ይፍጠሩ
• ለማቅረብ የተግባር ክፍሎችን ያስተላልፉ

ተግባሮቹን ማግኘት እና በ getTasks () በተለዋዋጭ ውስጥ ማከማቸት እንችላለን

var ተግባራት = getTasks ()። ተግባራት

ከዚያ ድርድር መፍጠር እና እሱን መሙላት አለብን።

pastebin.com/9gNXvNWe

አሁን መሥራት አለበት።

ምንጭ ኮድ:

github.com/bluninja1234/todo_list_instructables

ተጨማሪ ሀሳቦች ፦

የማስወገጃ ተግባር (በጣም ቀላል ፣ አንድ ጠቅታ ያክሉ እና አስወግድ ከቁልፍ ማውጫ በመጠቀም ሰርዝ)

CSS (እንዲሁም ቀላል ፣ የራስዎን ይፃፉ ወይም የጫማ ማሰሪያ ይጠቀሙ)