Author name: admin

chapters
00 :00 introduction reactjs component basics
00:19 The Reactjs Ecosystem
00:50 Visualization of React component as a abuilding bloc of reactjs
03::03 What is a reactjs component ?
03:41 creating multiple reactjs components
05:13 reactjs project folder setup
06:40 creating reactjs components
07:58 react components hierarchy /tree structure
08:51 creating multiple reactjs components in visual studio code
14: 39 when to extract react components
15:44 separating and exporting react components
17:38 importing the componets into main App
19:13 real world example

Welcome to **React JS Full Course in Amharic** by Beshilo Coding Academy! 🚀 In this lesson, we explore the core of React development: **react components**. We clarify their purpose, how they form a **react component architecture**, and why they are essential for building scalable applications. This video emphasizes understanding **react basics** and how data centrality drives these components, preparing you to **learn react** effectively.

እንኳን ወደ **React JS ሙሉ ኮርስ በአማርኛ** እንኳን በደህና መጣችሁ! 🚀

In **Lesson 3**, we unlock one of the most powerful parts of React — **JSX Syntax Rules** 🔥

If you’ve ever asked yourself:

* “JSX ምንድን ነው?”
* “HTML ነው ወይስ JavaScript?”
* “class ለምን className ይሆናል?”
* “object እና array እንዴት እንደሚ render ይደረጋል?”
* “Conditional rendering እንዴት እንጠቀማለን?”

👉 **This lesson answers all of that — step by step, clearly, in Amharic.**

We move from theory into **real JSX practice**, and by the end, JSX will feel natural — not confusing.

—

## 🚀 What You Will Learn in Lesson 3

### 🧠 1. What is JSX?

* JSX = JavaScript XML
* How React combines **JavaScript logic + HTML structure**
* Why JSX makes UI development simple and readable

You’ll clearly understand why JSX is **not magic**.

—

### 📂 2. JSX Expressions

* Using `{}` to write JavaScript inside JSX
* Variables
* Math operations
* Dynamic content

You’ll see how React updates UI dynamically.

—

### 🏷️ 3. JSX vs HTML (Important Differences)

* `class` ➜ `className`
* `for` ➜ `htmlFor`
* Self-closing tags
* camelCase attributes

No more common beginner mistakes.

—

### 📊 4. Rendering Data in JSX

* Rendering object data
* Calling functions inside JSX
* Rendering arrays using `map()`

This is where React becomes powerful.

—

### 🔀 5. Conditional Rendering

* `&&` operator
* Ternary operator `? :`

Learn how to show/hide UI based on conditions — like real applications do.

—

### 🧱 6. One Parent Element Rule

Why React requires one root element
How to fix errors
What React Fragment is

—

### ⚙️ 7. What Happens Behind the Scenes

* How JSX becomes `React.createElement()`
* Why Babel is important
* How React understands your code

No mystery — just understanding.

—

## ⏱️ Chapters / Timestamps

00:00 – Introduction to JSX
00:17 – What is JSX?
01:49 – Project Folder Setup
05:26 – JSX Expressions
07:31 – JSX Attributes vs HTML
08:34 – Label and Input Elements
09:46 – Rendering Object Data
11:49 – Calling Functions in JSX
14:34 – Rendering Arrays with map()
18:01 – Conditional Rendering (&& and ? 🙂
18:27 – One Parent Element Rule
19:06 – What Happens Behind the Scenes
19:37 – Why JSX is Powerful

—

## 💡 Who This Lesson Is For

✅ Absolute beginners learning React
✅ HTML, CSS & JavaScript learners
✅ Ethiopian & Amharic-speaking developers
✅ Anyone serious about mastering modern frontend development

—

## 💻 Resources & Community

🔗 **Source Code (Lesson 3):**
[https://github.com/Haile1221/reactJS-Full-Course](https://github.com/Haile1221/reactJS-Full-Course)

📘 **Official React Docs:**
[https://react.dev](https://react.dev)

📢 **Join Beshilo Coding Academy Telegram:**
[https://t.me/beshilocodingacedemy](https://t.me/beshilocodingacedemy)

—

## 📈 Why This Lesson Is Important

Without JSX, you can’t build real React apps.
After this video, you will:

✔️ Write clean JSX confidently
✔️ Avoid beginner syntax errors
✔️ Render dynamic data like a real developer
✔️ Understand what React does behind the scenes

—

### 🔥 Don’t forget to:

👍 Like
💬 Comment your React questions
🔔 Subscribe to **Beshilo Coding Academy**

—

## 🏷️ Tags (SEO Optimized)

#ReactJS
#JSX
#ReactInAmharic
#AmharicProgramming
#BeshiloCodingAcademy
#LearnReact
#FrontendDevelopment
#JavaScript
#CodingInAmharic
#EthiopiaDevelopers
#ReactCourse

—

If you want, I can now optimize this description **specifically to increase virality and CTR** for Beshilo Coding Academy 📈

እንኳን ወደ **React JS ሙሉ ኮርስ በአማርኛ** እንኳን በደህና መጣችሁ!
In **Lesson 2**, we move from *React theory* into **real-world setup** 🔥

This lesson is all about **how React projects are created, organized, and run professionally **. If you’ve ever wondered:

* “React project እንዴት ልጀምር?”
* “create-react-app vs Vite ምን ልዩነት አላቸው?”
* “nodejs, npm ያስፈልጋሉ?”
* “App.jsx, main.jsx, index.css ምን ያደርጋሉ?”

👉 **This lesson answers all of that — step by step, from zero, in Amharic.**

We start with **requirements** (Node.js & npm), then build **two real React setups**:

* Classic **Create React App (CRA)**
* Modern, fast **Vite (recommended in 2026)**

By the end of this video, you will **fully understand React folder structure**, what each file does, and how everything connects — **no confusion, no magic**.

—

## 🚀 What You Will Learn in Lesson 2
### 🧩 1. Why React Needs Node.js & npm

* **The Start:** Browsers only understand HTML, CSS, and JavaScript.
* **The Problem:** React uses modern tools and packages.
* **The Solution:** **Node.js + npm** act as the engine that runs and manages React projects.

### ⚙️ 2. React Project Creation (Two Professional Ways)

* **Create React App (CRA):** Traditional, beginner-friendly setup.
* **Vite:** Lightning-fast, modern React setup used by professionals in 2026.

You’ll clearly see **which one to choose and why**.

### 📂 3. Understanding React Folder Structure (No Guessing)

* `src/` – Where your real React code lives
* `App.jsx` – The heart of your UI
* `main.jsx` – The bridge between React and the browser
* `index.css & App.css` – Global vs component styles

Everything is explained **visually and practically**, not memorized.

### 🧪 4. First Hands-On Coding Practice

We write real code inside:

* `App.jsx`
* `App.css`
* `index.css`

So beginners can **see changes instantly and understand what affects what**.

—

## ⏱️ Chapters / Timestamps

00:00 – Introduction to Setting Up React Project & Folder Structure
00:49 – Requirements (Node.js Installation, npm, Installation Types)
03:31 – Project Folder Setup (What Happens Behind the Scenes)
04:42 – React Setup with Create React App (CRA)
06:44 – React Setup with Vite (Fast & Modern Way)
11:56 – Project Structure with Vite
16:55 – Folder & File Descriptions (src, public, App.jsx, main.jsx)
19:45 – Sample Coding Exercises (App.jsx, App.css, index.css)

—

## 💡 Who This Lesson Is For

✅ Absolute beginners (React from zero)
✅ HTML, CSS & JavaScript learners
✅ Ethiopian & Amharic-speaking developers
✅ Anyone serious about becoming a **real React developer**

—

## 💻 Resources & Community

🔗 **Source Code (Lesson 2):**
https://github.com/Haile1221/reactJS-Full-Course

📘 **Official React Docs:**
[https://react.dev](https://react.dev)

📢 **Join Beshilo Coding Academy Telegram:**
https://t.me/beshilocodingacedemy

—

## 📈 Why This Course Is Different

✔️ Real explanations, not copy-paste
✔️ Beginner-first thinking
✔️ Modern tools (Vite, JSX, Components)
✔️ Amharic explanations with global standards

—

### 🔥 Don’t forget to:

👍 Like
💬 Comment (ask your React questions)
🔔 Subscribe to **Beshilo Coding Academy**

—

## 🏷️ Tags (SEO Optimized)

#ReactJS
#ReactInAmharic
#AmharicProgramming
#BeshiloCodingAcademy
#LearnReact
#WebDevelopment
#EthiopiaDevelopers
#JavaScript
#FrontendDevelopment
#CodingInAmharic
#ReactCourse

እንኳን ወደ React JS ሙሉ ኮርስ በሰላም መጣችሁ! In this first lesson of our comprehensive React JS course in Amharic, we dive deep into the fundamentals of React, why it’s the #1 library for web development , and how to think like a React developer.
This video is for absolute beginners (React from zero). We start by understanding the problems with manual DOM updates in vanilla JavaScript, then move step-by-step through using CDN, `React.createElement`, JSX, and Babel. By the end, you’ll be able to build and render your first React component.

🚀 **What you’ll learn in Lesson 1:**

* The key difference between HTML and React
* How JavaScript connects to the UI
* Why Babel is needed for JSX
* How to build reusable UI components

—

## 🛠️ Why React? The Evolution of Web Development

**1. Fixing Manual Updates**

* HTML is static and needs full refreshes.
* Manual JavaScript DOM updates become slow in large apps.
* React updates only the necessary parts of the page efficiently.

**2. Fixing Messy Code with JSX**

* Creating HTML with JavaScript strings is messy and error-prone.
* JSX lets us write clean, HTML-like code inside JavaScript.

**3. Fixing Browser Limits with Babel**

* Browsers don’t understand JSX.
* Babel converts JSX into regular JavaScript that browsers can run.

**4. Fixing Large Files with Components**

* Big single files are hard to manage and reuse.
* Components break the UI into reusable, independent “Lego blocks.”

## 📌 Chapters
00:00 – Introduction to React JS
01:25 – React from Zero
02:08 – Problem with Manual Updates
02:42 – Project Folder Setup
04:49 – HTML Comes First (React Does NOT Replace HTML)
06:07 – Load React (Beginner Way: CDN – Content Delivery Network)
09:23 – JavaScript Finds the HTML Box
10:48 – Creating the React Root (JavaScript ↔ React Bridge)
12:36 – Rendering Something (First Try)
14:22 – Why Plain Text Is Weak
15:04 – Important Rule for Beginners
15:37 – React.createElement (React’s Language)
18:21 – First Correct Render
18:31 – What Does `null` Mean?
19:25 – What Happens If `null` Is NOT `null`?
22:36 – How to Create Multiple Elements
23:14 – JSX (Easier Way to Write the Same Thing)
25:00 – Why Browsers Can’t Read JSX
25:31 – Babel (The Translator)
28:18 – JSX Rules
34:11 – React Root Container Selection (id vs class vs querySelector)
40:03 – Text vs JSX
41:36 – Problem with JSX Alone
42:35 – What Is a Component? (Solving JSX Problems)
47:50 – Using Components Inside App
48:31 – Why We Use Components

—

**Lesson 0 –React Full Course Outline & What You’ll Learn**
**Lesson 1 – React Introduction**
**Lesson 2 – React Setup with Vite + Folder Structure**
**Lesson 3 – JSX Syntax Rules in React**
**Lesson 4 – Rendering Lists with map() in React**
**Lesson 5 – React Components Basics**
**Lesson 6 – Reusing Components in React**
**Lesson 7 – ReactDOM Explained**
**Lesson 8 – Function Components in React**
**Lesson 9 – React Event Handlers Tutorial**
**Lesson 10 – React Props Explained**
**Lesson 11 – React State + useState Hook**
**Lesson 12 – Callback Functions in React**
**Lesson 13 – Lifting State Up in React**
**Lesson 14 – Controlled Components + Forms**
**Lesson 15 – Advanced Props Patterns**
**Lesson 16 – useEffect Hook Explained**
**Lesson 17 – Custom Hooks in React**
**Lesson 18 – React Fragments Tutorial**
**Lesson 19 – Reusable UI Components**
**Lesson 20 – Component Composition + children**
**Lesson 21 – Declarative vs Imperative React**
**Lesson 22 – Inline Events Best Practices**
**Lesson 23 – Async Fetching + Loading State**
**Lesson 24 – Conditional Rendering in React**
**Lesson 25 – Advanced State Patterns**
**Lesson 26 – Avoid Impossible States in React**
**Lesson 27 – Data Fetching with APIs**
**Lesson 28 – React Data Re-Fetching**
**Lesson 29 – useCallback + Performance Optimization**
**Lesson 30 – Explicit Fetching Patterns**
**Lesson 31 – Third-Party Libraries in React**
**Lesson 32 – Async/Await in React**
**Lesson 33 – React Forms Basics**
**Lesson 34 – Forms Validation Best Practices**
**Practical React Projects**

## 💻 Resources & Links

🔗 **Source Code (Lesson 1):** https://github.com/Haile1221/reactJS-Full-Course
📘 **Official React Documentation:** https://react.dev
📢 **Join Our Telegram Channel:** https://t.me/beshilocodingacedemy

#ReactJS #AmharicTutorial #WebDevelopment #Ethiopia #LearnToCode #ReactInAmharic #CodingForBeginners