تعلم 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 لتجنب التعارض مع كلمة class في JavaScript .

في index.js :

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

في App.js :

    ...