እንኳን ወደ **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
