HTML ትምህርት - ክፍል 10 | React.js መጀመሪያ

⚛️

React ምንድን ነው? // What is React?

React — Facebook (Meta) የሰራው JavaScript Library ነው። UI (User Interface) ን Components ተጠቅሞ ለመስራት ይጠቅማል!
React is a JavaScript library made by Meta (Facebook) for building user interfaces using reusable components.

💡

React = Component-based — page ን ትናንሽ ቁርጥራጮች (Components) ሆነው ትሰራለህ። እያንዳንዱ Component ብቻውን ይሰራና ደጋግሞ ይጠቀማል!
Build pages as small reusable pieces called components — like LEGO blocks!

Vanilla JS vs React — ልዩነቱ ምንድን ነው?

Vanilla JS (ክፍል 1-9)

HTML + JS ተለያይተው
DOM ቀጥታ ይቀያየር
ትልቅ project ሲሆን ያወሳስባል
Code ደጋግሞ ይጻፋል

React ⚛️

Component ሆነው ይደራጃሉ
State ሲቀየር React ይዘምናል
ትልቅ project ቀላሉን
Component ደጋግሞ ይጠቀማል

🧩

Components — ቁርጥራጮች // Building Blocks

Component = ደጋግሞ ጥቅም ላይ የሚውል UI ቁራጭ። Button, Card, Header — ሁሉም Component ሊሆን ይችላል!
A component is a reusable piece of UI — like a function that returns HTML!

🌳 Component Tree — App ዛፍ:

⚛️ <App /> ← ዋና / Root

├

📋 <Header />

├

📄 <Main />

🃏 <Card title="HTML" />

🃏 <Card title="CSS" />

🃏 <Card title="JS" />

└

📎 <Footer />

App.jsx — ቀለል ያለ Component

// React Component — function ነው JSX የሚመልስ
function Welcome() {
  return (
    <div>
      <h1>ሰላም React! 👋</h1>
      <p>EthioCode ትምህርት</p>
    </div>
  );
}

// Component ለመጠቀም tag ሆኖ ይጻፋል
function App() {
  return (
    <div>
      <Welcome />  // Component ጥቅም ላይ ዋለ!
      <Welcome />  // ደጋግሞ ጥቅም ላይ ዋለ!
    </div>
  );
}

📦

Props — ውሂብ ማስተላለፍ // Passing Data

Props = Properties — ወላጅ Component ልጅ Component ን ውሂብ ለማስተላለፍ ይጠቅማል! HTML attribute ይመስላል።
Props pass data from parent to child component — like HTML attributes!

Props.jsx

// Props ተቀብሎ የሚጠቀም Component
function ProfileCard({ name, role, emoji }) {
  return (
    <div className="card">
      <div className="avatar">{emoji}</div>
      <h3>{name}</h3>
      <p>{role}</p>
    </div>
  );
}

// App — ሁሉም cards አንድ Component ይጠቀማሉ!
function App() {
  return (
    <div>
      <ProfileCard
        name="Abel"
        role="Developer"
        emoji="👨‍💻"
      />
      <ProfileCard
        name="Sara"
        role="Designer"
        emoji="🎨"
      />
    </div>
  );
}

🎮 Demo — Props ውጤት: አንድ Component ሶስት ጊዜ ጥቅም ላይ ዋለ!
Same component reused 3 times with different props!

🔄

useState — State ቁጥጥር // React Hook

useState = React Hook — Component ውስጥ ውሂብ ለማስቀመጥ ይጠቅማል። State ሲቀየር React ራሱ UI ን ያዘምናል!
useState is a React Hook that lets components remember values. When state changes, React automatically re-renders!

state value

0

→

UI updates

0

Counter.jsx — useState ምሳሌ

import { useState } from 'react';

function Counter() {
  // count = current value, setCount = ለመቀየር
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>{count}</h2>

      <button onClick={() => setCount(count + 1)}>
        + ጨምር
      </button>

      <button onClick={() => setCount(count - 1)}>
        - ቀንስ
      </button>

      <button onClick={() => setCount(0)}>
        Reset
      </button>
    </div>
  );
}

🎮 Demo — Counter (useState ምሳሌ):
This is exactly what the React Counter component above does!

0

            count = 0
          

📌

ዋና ዋና ነጥቦች // Key Takeaways

1

⚛️ React = Component-based Library

UI ን ትናንሽ Components ሆነው ትሰራለህ — ደጋግሞ ጥቅም ላይ ይውላሉ!
Build UI from small reusable components.

2

🧩 Component = Function + JSX

function ሆኖ ይፃፋል፣ JSX (HTML-like) ይመልሳል። ስም ትልቅ ፊደል ይጀምራል — <MyComponent />
Components are functions that return JSX. Names start with capital letter.

3

📦 Props = ውሂብ ማስተላለፍ

ወላጅ ልጅ Component ን props ይሰጣል — <Card name="Abel" />
Props pass data from parent to child — like function arguments.

4

🔄 useState = State ቁጥጥር

const [value, setValue] = useState(initial) — state ሲቀየር React UI ን ያዘምናል!
useState stores data. When it changes, React re-renders automatically.

🎯

Quiz // ምን ተማርን?

❓ React ውስጥ Component ስም እንዴት ይጀምራል?
How must a React component name start?

A ትንሽ ፊደል — mycomponent()

B _ underscore — _Component()

C ትልቅ ፊደል — MyComponent() ✅

D ቁጥር — 1Component()

React.js ⚛️ቀጣዩ Level!

Vanilla JS (ክፍል 1-9)

React ⚛️

React.js ⚛️
ቀጣዩ Level!