006. React.js da Component stillari qanday yozishni o'rganamiz.

React komponentlariga va uning elementlariga stil yozishning bir necha usuli mavjud: CSS, SCSS, internal (inline) uslublar va styled component’da. Har bir usulni misollar bilan tanishamiz.

khodieff.uz

1. CSS (Cascading Style Sheets)

CSS fayllarini alohida .css fayllarda saqlash va ularni komponentlarga import qilish orqali stil berish.

1.1 Misol

src/App.css: CSS fayli.

/* src/App.css */
.container {
  background-color: lightblue;
  padding: 20px;
}
.title {
  color: darkblue;
}

src/App.jsx: CSS faylini import qilish va stil berish.

import React from 'react';
import './App.css'; // CSS faylini import qilish

function App() {
  return (
    <div className="container">
      <h1 className="title">Hello, CSS!</h1>
    </div>
  );
}

export default App;

import './App.css';: CSS faylini import qiladi.
className="container" va className="title": CSS klasslarini qo‘llaydi.

2. SCSS (Sassy CSS)

SCSS — bu CSS preprocessor bo‘lib, CSS’ga qo‘shimcha xususiyatlar (masalan, o‘zgaruvchilar, nestling) qo‘shadi. SCSS fayllarini CSS fayllariga kompilyatsiya qilish kerak.

2.1 Misol

src/App.scss: SCSS fayli.

/* src/App.scss */
$bg-color: lightblue;
$text-color: darkblue;

.container {
  background-color: $bg-color;
  padding: 20px;

  .title {
    color: $text-color;
  }
}

src/App.jsx: SCSS faylini import qilish va stil berish.

import React from 'react';
import './App.scss'; // SCSS faylini import qilish

function App() {
  return (
    <div className="container">
      <h1 className="title">Hello, SCSS!</h1>
    </div>
  );
}

export default App;

import './App.scss';: SCSS faylini import qiladi.
className="container" va className="title": SCSS klasslarini qo‘llaydi.

3. Internal (Inline) CSS

Inline CSS — bu CSS uslublarini to‘g‘ridan-to‘g‘ri React komponentida, JavaScript obyekti sifatida yozish.

3.1 Misol

import React from 'react';

function App() {
  const containerStyle = {
    backgroundColor: 'lightblue',
    padding: '20px',
  };

  const titleStyle = {
    color: 'darkblue',
  };

  return (
    <div style={containerStyle}>
      <h1 style={titleStyle}>Hello, Inline CSS!</h1>
    </div>
  );
}

export default App;

const containerStyle = { ... }: CSS uslublari JavaScript obyekti sifatida yoziladi.
style={containerStyle} va style={titleStyle}: Inline uslub sifatida qo‘llanadi.

4. CSS-in-JS

CSS-in-JS — bu CSS uslublarini JavaScript fayllarida yozish va boshqarish imkonini beruvchi usuldir. styled-components kabi kutubxonalar yordamida amalga oshiriladi.

4.1 Misol (Styled-components)

src/App.jsx: styled-components kutubxonasidan foydalanish.

import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
  background-color: lightblue;
  padding: 20px;
`;

const Title = styled.h1`
  color: darkblue;
`;

function App() {
  return (
    <Container>
      <Title>Hello, Styled Components!</Title>
    </Container>
  );
}

export default App;

styled.div va styled.h1: styled-components kutubxonasi yordamida CSS-in-JS uslubi.
Container va Title: Stilingizni JavaScript fayllarida yozish va boshqarish imkonini beradi.
CSS: Alohida .css fayllarda uslublarni saqlash va import qilish orqali qo‘llaniladi.
SCSS: CSS preprocessor, qo‘shimcha funksiyalar bilan uslublarni yozishga imkon beradi. SCSS fayllari CSS’ga kompilyatsiya qilinadi.
Inline CSS: JavaScript obyekti sifatida uslublarni to‘g‘ridan-to‘g‘ri komponentda qo‘llash.
CSS-in-JS: CSS uslublarini JavaScript fayllarida yozish va boshqarish imkonini beruvchi kutubxonalar yordamida amalga oshiriladi.

Har bir usulning o‘ziga xos afzalliklari va kamchiliklari mavjud, shuning uchun loyihaning talablariga qarab usulni tanlash kerak bo’ladi , yokida UI kit ishlatish bilan qutilish mumkin : )

Bizni tarmoqlarda kuzatishingiz mumkin va maqola foydali bo’lsa do’stlaringizga ham ulashing. 🫡

🔗 https://t.me/mukhriddinweb

🔗 https://medium.com/@mukhriddinweb

🔗 https://dev.to/mukhriddinweb

🔗 https://khodieff.uz

🔗 https://github.com/mukhriddin-dev

🔗 https://linkedin.com/in/mukhriddin-khodiev

🔗 https://youtube.com/@mukhriddinweb

Ulashish: