Module 8 – App එක Style කිරීම

අපගේ app එක දැන් ක්‍රියාකාරීයි, නමුත් එහි පෙනුම එතරම් හොඳ නැත. මෙම කොටසේදී, අපි CSS භාවිතයෙන් අපගේ counter app එකට වෘත්තීය පෙනුමක් ලබා දෙමු.

80% සම්පූර්ණයි
1. Styling ක්‍රම: Inline vs External CSS

React වලදී styling කිරීමට ප්‍රධාන ක්‍රම දෙකක් ඇත:

  • Inline Styles: අපි මේ දක්වා භාවිතා කළේ මෙම ක්‍රමයයි (style={{...}}). කුඩා, dynamic styles සඳහා මෙය හොඳ වුවත්, විශාල යෙදුම් සඳහා සුදුසු නැත. Hover effects වැනි දේවල් inline styles වලින් කළ නොහැක.
  • External CSS Files: මෙය නිර්දේශිත ක්‍රමයයි. අපි වෙනම .css file එකක් සාදා, එය අපගේ component එකට import කර, HTML වලදී මෙන් class names භාවිතා කරමු.
2. `class` වෙනුවට `className`
ඉතා වැදගත්

React JSX වලදී, HTML වල class attribute එක වෙනුවට, අපි className යන attribute එක භාවිතා කළ යුතුය. මක්නිසාද යත්, class යනු JavaScript හි reserved keyword එකක් (class components සඳහා) වන බැවිනි.

උදාහරණයක් ලෙස:

HTML: <div class="container">

JSX: <div className="container">

3. External Stylesheet එකක් නිර්මාණය කිරීම

අපි දැන් අපගේ Counter App එක සඳහා වෙනම stylesheet එකක් නිර්මාණය කරමු.

Folder ව්‍යුහය

පළමුව, src/ folder එක තුළ Counter.css නමින් නව file එකක් සාදන්න. (අපි අපගේ Counter එකට අදාළ සියල්ල එකම තැනක තබමු).

/src
├── Counter.css   <-- ඔබ අලුතින් සාදන file එක
├── components
│   └── Header.jsx
├── App.css
├── App.jsx
├── index.css
└── main.jsx
CSS කේතය එකතු කිරීම

අලුතින් සෑදූ Counter.css file එකට පහත CSS කේතය ඇතුළත් කරන්න.

.counter-container {
  max-width: 400px;
  margin: 50px auto;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.count-display {
  font-size: 5rem;
  font-weight: bold;
  color: #007bff;
  margin-bottom: 30px;
}

.button-group button {
  padding: 12px 25px;
  font-size: 1.2rem;
  margin: 0 10px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  color: white;
  transition: background-color 0.3s ease;
}

.btn-add {
  background-color: #28a745; /* Green */
}
.btn-add:hover {
  background-color: #218838;
}

.btn-subtract {
  background-color: #ffc107; /* Yellow */
}
.btn-subtract:hover {
  background-color: #e0a800;
}

.btn-reset {
  background-color: #dc3545; /* Red */
}
.btn-reset:hover {
  background-color: #c82333;
}

Module 8: කුඩා කාර්යය (Mini Task)

දැන් අපි අපගේ App.jsx file එක, මෙම නව stylesheet එක භාවිතා කරන ලෙස update කරමු.

  1. App.jsx file එකේ ඉහළින්ම, අප සෑදූ Counter.css file එක import කරන්න.
  2. සියලුම inline styles (style={{...}}) ඉවත් කරන්න.
  3. අදාළ elements වලට, Counter.css file එකේ ඇති class names, className prop එක භාවිතයෙන් ලබා දෙන්න.

අවසන් App.jsx කේතය මෙසේ දිස්විය යුතුය:

import { useState } from 'react';
import Header from './components/Header.jsx';
import './Counter.css'; // Step 1: Import the new CSS file

function App() {
  const [count, setCount] = useState(0);

  function handleSubtract() {
    if (count > 0) {
      setCount(count - 1);
    }
  }

  return (
    <>
      <Header />
      {/* Step 2 & 3: Remove inline styles and add classNames */}
      <div className="counter-container">
        <h2>React Counter App</h2>
        <p className="count-display">{count}</p>
        <div className="button-group">
          <button className="btn-add" onClick={() => setCount(count + 1)}>+ Add</button>
          <button className="btn-subtract" onClick={handleSubtract}>- Subtract</button>
          <button className="btn-reset" onClick={() => setCount(0)}>Reset</button>
        </div>
      </div>
    </>
  );
}

export default App;

File එක save කර browser එක බලන්න. ඔබගේ Counter App එක දැන් නව, වර්ණවත් පෙනුමකින් දිස්විය යුතුය. Buttons මතට mouse එක ගෙන ගොස් hover effect එකද පරීක්ෂා කරන්න!

පෙර කොටස ඊළඟ කොටස: Components