ክፍል ፈላጊ አንድ ድረ-ገጽ የትኛውን frontend framework እንደሚጠቀም ራስ-ሰር ይለያል እና ሙሉ ክፍል ዛፉን ያሳያል። የ React፣ Vue፣ Angular እና Svelte ክፍሎች ስሞቻቸውን፣ props/state ዋጋዎቻቸውን እና የውቅር ተዋረድን ይመልከቱ — ሁሉም ከአንድ ምርመራ ፓነል።
አንድ ድረ-ገጽ በየትኛው framework እንደተገነባ ሲያስቡ ኖረዋል? ወይም ውስብስብ UI ወደ ክፍሎች እንዴት እንደተቀነሰ ማየት ፈልገዋል? ክፍል ፈላጊ ሁለቱንም ጥያቄዎች ወዲያውኑ ይመልሳል። ገጹን ለ framework-ተኮር ፊርማዎች ይቃኛል እና framework፣ ስሪቱን እና ሙሉ ክፍል ዛፉን ይለያል። ለ React እና Vue ተጨማሪ ያደርጋል — ክፍል props እና state ዋጋዎችን ያሳያል።
React (Next.js፣ Gatsby፣ Remix ጨምሮ)፣ Vue (Nuxt ጨምሮ)፣ Angular፣ Svelte (SvelteKit ጨምሮ)፣ Preact፣ Solid እና ሌሎች frameworks ራስ-ሰር ይለያል። የ framework ስም፣ ትክክለኛ ስሪት ቁጥር እና rendering ሁነታ ያሳያል።
ሙሉ ክፍል ተዋረድ በተደባለቅ ዛፍ እይታ ያሳያል። ከፍተኛ-ደረጃ App ክፍል Navbar፣ NavLinks፣ የግል Link ክፍሎችን እንዴት እንደያዘ ይመልከቱ።
ለ React እና Vue ክፍሎች ለእያንዳንዱ ክፍል የተላለፉ አሁኑ props እና state ዋጋዎችን ይመልከቱ። Dashboard ክፍል title="Overview"፣ loading=false እና columns=2 እንደተቀበለ ይመልከቱ።
በዛፍ ውስጥ ማንኛውንም ክፍል ጠቅ ያድርጉ ተዛማጅ DOM ኤለመንቱን በገጹ ላይ ለማድመቅ። ወይም በገጹ ላይ ኤለመንት ጠቅ ያድርጉ ክፍሉን በዛፍ ውስጥ ለማግኘት።
በገጹ ላይ የተሰጡ ጠቅላላ ክፍሎች ብዛት፣ ስንት ልዩ ናቸው ከተደገሙ ግልባጮች ጋር፣ እና የትኞቹ ክፍሎች ብዙ ጊዜ እንደሚታዩ ይመልከቱ።
በ minified ምርት builds ላይ frameworks ይለያል። የ React fiber ዛፍ፣ Vue __vue__ ምልክቶች እና Angular ng ባህሪያት በምርት ሁነታ ይቆያሉ።
ማንኛውንም ድረ-ገጽ ይጎብኙ እና React፣ Vue፣ Angular ወይም Svelte የተገነባ መሆኑን ወዲያውኑ ይወቁ — ትክክለኛ ስሪት ጨምሮ።
ምርት አፕሊኬሽኖች UIቸውን ወደ ክፍሎች እንዴት እንደሚቀንሱ ያጥኑ።
ክፍል በትክክል አይሰጥም? ምን ውሂብ እንደተቀበለ ለማየት props እና state ይፈትሹ።
ለ frontend ቃለ-መጠይቅ ይዘጋጃሉ? ስለ ገሃድ ክፍል ቅጦች ለማየት ምርት ጣቢያዎችን ያሰሱ።
በተለያዩ frameworks የተገነቡ ተመሳሳይ ምርቶችን ይጎብኙ እና ክፍል መዋቅሮቻቸውን ያወዳድሩ።
የ DevSuite Pro ተንሳፋፊ ዶክ ይክፈቱ እና ክፍል ፈላጊ አዶን ጠቅ ያድርጉ። መሳሪያው ገጹ DOM ለ framework-ተኮር ምልክቶች ይቃኛል።
ፓነል ራስጌ የተገኘውን framework፣ ስሪቱን እና rendering ሁነታን ያሳያል። ምንም framework ካልተገኘ ገጹን vanilla HTML/CSS/JS ሪፖርት ያደርጋል።
ተዋረድ ለመፈተሽ ክፍሎችን በዛፍ ውስጥ ያስፋፉ እና ይደብቁ። ክፍል ስሞች ከማስገቢያ ጥልቀት ጋር ይታያሉ።
ከታች ባለው ዝርዝር ክፍል ውስጥ አሁኑ props እና state ዋጋዎችን ለማየት ማንኛውንም ክፍል ጠቅ ያድርጉ።
ተዛማጅ DOM ኤለመንቱን ቀለም ያለው ድንበር ለማድመቅ ማንኛውንም ክፍል ጠቅ ያድርጉ።
DevSuite Pro ን በነፃ ይጫኑ እና 39+ የገንቢ መሳሪያዎችን ለአሳሽዎ ይክፈቱ።
