تعلم React/

...

/

تنسيق المكونات في React

تنسيق المكونات في React

تعرف على كيفية تصميم مكونات React باستخدام أوراق أنماط CSS والأنماط المضمنة وأفضل الممارسات.

سنغطي ما يلي...

يُحسّن التصميم واجهة المستخدم وتجربة المستخدم على حد سواء. فهو يُضفي حيوية على مكوناتنا، مما يجعل تطبيقنا جذابًا بصريًا وسهل الاستخدام. يدعم React أساليب تصميم متنوعة، مما يسمح لنا باختيار الأسلوب الأنسب لاحتياجات مشروعنا.

طرق مختلفة لتصميم المكونات

في React، هناك ثلاث طرق لتطبيق الأنماط على مكوناتنا.

استخدام أوراق أنماط CSS

هذه هي الطريقة التقليدية لتصميم صفحات الويب، وهي تعمل بسلاسة مع React. لنُنشئ ملف CSS باسمstyles.css في دليل مشروعنا.

Press + to interact
.header {
  background-color: #282c34;
  padding: 20px;
  color: white;
  text-align: center;
}
.paragraph {
  font-size: 18px;
  color: #333;
}
body {
  font-family: sans-serif;
  -webkit-font-smoothing: auto;
  -moz-font-smoothing: auto;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: auto;
  text-rendering: optimizeLegibility;
  font-smooth: always;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
h1 {
  font-size: 1.5rem;
}

يمكننا تطبيق هذه الأنماط باستخدامclassName السمة. في JSX،className يتم استخدامه بدلا منclass لتجنب الصراعات مع JavaScriptclass الكلمة الرئيسية.

فيindex.js :

  • السطر 3: نقوم باستيرادstyles.css ملف CSS بحيث تُطبّق الأنماط عالميًا. عند استيراد ملف CSS إلى مكوننا، تصبح الأنماط متاحة لهذا المكون ولأي مكونات فرعية.

فيApp.js : ...