Mohadbran

⚛️ Small functions → reusable components → larger applications. ━━━━━━━━━━━━━━━━━━━━ 📚 MODULE 3 — COMPONENTS 🚀 Next Lesson: Reusable Components 📅 New lesson every 3rd day #ReactJS #Components #JavaScript #WebDevelopment #LearnReact #Programming

« Prev Lesson: What is a React Component? 🚀 BASICS OF REACT.JS — LESSON 8 ⚛️ Functional Components ━━━━━━━━━━━━━━━━━━━━ 📌 1. Background Context In the previous lesson, we learned that components are the building blocks of React applications. But there are different ways to create components. Today, we'll focus on the most common approach in modern React: 👉 Functional Components Functional components are simply JavaScript functions that return JSX. ━━━━━━━━━━━━━━━━━━━━ 💡 2. Overview & Explanation A basic functional component looks like this: function Welcome() { return <h1>Welcome to React!</h1>; } Here: function Welcome() ↓ JavaScript function ↓ returns JSX ↓ React Component We can use it inside another component: function App() { return ( <div> <Welcome /> </div> ); } React calls the Welcome component and renders the JSX it returns. Why "Functional"? Because the component is defined using a JavaScript function. function Welcome() { return <h1>Hello!</h1>; } That's all a basic functional component needs. ━━━━━━━━━━━━━━━━━━━━ 💻 3. Usage Examples Example 1: A Simple Component function Header() { return <header>My Website</header>; } Use it with: <Header /> Example 2: Multiple Components function Header() { return <header>My Website</header>; } function Main() { return <main>Welcome!</main>; } function Footer() { return <footer>© 2026</footer>; } function App() { return ( <> <Header /> <Main /> <Footer /> </> ); } export default App; Each function is responsible for one part of the interface. This makes the application easier to understand and maintain. Example 3: Arrow Function Components Functional components can also be written using arrow functions: const Welcome = () => { return <h1>Welcome to React!</h1>; }; Or, when the component contains only one expression: const Welcome = () => <h1>Welcome to React!</h1>; Both approaches create functional React components. For beginners, the traditional function syntax is often easier to read, while arrow functions are also very common in modern React code. ━━━━━━━━━━━━━━━━━━━━ 🧠 A Useful Rule Think of a component as a function: Input ↓ Component ↓ JSX ↓ UI Later, the "input" will commonly be provided through props. For example: <User name="Sara" /> The User component can receive "Sara" and use it to create its UI. We'll learn exactly how this works when we study props. ━━━━━━━━━━━━━━━━━━━━ 🧪 4. Tiny Practice Exercise Create three functional components: Navbar Welcome Contact For example: function Navbar() { return <nav>My Website</nav>; } function Welcome() { return <h1>Welcome to my React app!</h1>; } function Contact() { return <button>Contact Me</button>; } Then combine them: function App() { return ( <> <Navbar /> <Welcome /> <Contact /> </> ); } export default App; 🎯 Challenge: Create a component called About. Make it display: About Me I am learning React.js. Then add it to your App component. ━━━━━━━━━━━━━━━━━━━━ 🔗 5. Relation to Other React Concepts Functional components are closely connected to several concepts we'll learn soon: • JSX → Functional components usually return JSX. • Props → Components can receive data through function parameters. • State → Functional components can manage state using Hooks. • Hooks → Functions such as useState() and useEffect() work inside functional components. • Component Composition → Multiple functional components can be combined to create complex interfaces. Modern React development primarily uses functional components together with Hooks. ━━━━━━━━━━━━━━━━━━━━ 🎯 Key Takeaway A functional component is a JavaScript function that returns JSX and represents a reusable part of a React user interface. The basic pattern is: function ComponentName() { return <div>UI</div>; } Or: const ComponentName = () => <div>UI</div>;

Once you understand components, you're moving from simply writing React code to actually thinking in React. ⚛️🔥 ━━━━━━━━━━━━━━━━━━━━ 📚 MODULE 3 — COMPONENTS 🚀 » Next Lesson: Functional Components 📅 New lesson every 3rd day #ReactJS #Components #JavaScript #WebDevelopment #LearnReact #Programming

« Prev Lesson: JSX Rules and Best Practices 🚀 BASICS OF REACT.JS — LESSON 7 🧩 What is a React Component? ━━━━━━━━━━━━━━━━━━━━ 📌 1. Background Context As applications become larger, putting all the UI inside one file becomes difficult to manage. Imagine building an ERP system with: • A sidebar • A navigation bar • User profiles • Tables • Forms • Buttons • Dashboards Writing all of this as one large piece of code would quickly become difficult to maintain. React solves this problem by allowing us to divide the UI into smaller, reusable pieces called components. ━━━━━━━━━━━━━━━━━━━━ 💡 2. Overview & Explanation A React component is a reusable piece of UI. A component can represent almost anything: Button Navbar Sidebar Product Card Login Form User Profile Dashboard A simple component looks like this: function Welcome() { return <h1>Welcome to React!</h1>; } We can then use the component: <Welcome /> React renders: Welcome to React! Think of components as building blocks. React Application │ ┌────────────┼────────────┐ ↓ ↓ ↓ Navbar Sidebar Content │ ┌─────────┼─────────┐ ↓ ↓ ↓ Card Table Form Each component can have its own UI and logic. ━━━━━━━━━━━━━━━━━━━━ 💻 3. Usage Examples Example 1: Simple Component function Greeting() { return <h1>Hello, React!</h1>; } function App() { return ( <div> <Greeting /> </div> ); } export default App; Here: Greeting ↓ React Component ↓ < Greeting /> ↓ Rendered UI Example 2: Multiple Components We can create several components: function Header() { return <header>My Website</header>; } function Content() { return <main>Welcome to my website!</main>; } function Footer() { return <footer>© 2026</footer>; } Then combine them: function App() { return ( <> <Header /> <Content /> <Footer /> </> ); } This is called component composition — building a larger UI by combining smaller components. ━━━━━━━━━━━━━━━━━━━━ 📌 Component Naming Rule React components should normally start with an uppercase letter. ✅ Correct: function UserProfile() { return <h1>User Profile</h1>; } ❌ Avoid: function userProfile() { return <h1>User Profile</h1>; } And when using a component: <UserProfile /> React uses the uppercase name to distinguish your component from normal HTML elements. For example: <div /> is an HTML element, while: <UserProfile /> is a React component. ━━━━━━━━━━━━━━━━━━━━ 🧪 4. Tiny Practice Exercise Create three components: Header Main Footer Each component should return a simple element. For example: function Header() { return <header>My React Course</header>; } function Main() { return <main>Learning React Components</main>; } function Footer() { return <footer>Keep Learning! 🚀</footer>; } Then combine them inside App: function App() { return ( <> <Header /> <Main /> <Footer /> </> ); } export default App; 🎯 Challenge: Create one additional component called: CourseInfo Make it display: Course: Basics of React.js Lesson: React Components Then place it between Main and Footer. ━━━━━━━━━━━━━━━━━━━━ 🔗 5. Relation to Other React Concepts Components are the foundation of React. They connect directly to: • JSX → Components usually return JSX. • Props → Components receive data from other components. • State → Components can manage changing data. • Events → Components can respond to user interactions. • Hooks → Components can use features such as state and effects. • Composition → Components can be combined to build larger interfaces. Soon, we will make our components reusable by giving them different data through props. ━━━━━━━━━━━━━━━━━━━━ 🎯 Key Takeaway A React component is a reusable building block of a user interface. Instead of building one huge application: Huge UI ↓ Difficult to maintain We break it into components: Application ↓ Components ↓ Reusable UI

🎉 MILESTONE ACHIEVED! 🎉 Congratulations, React learners! 🚀 You have successfully completed the first 2 Modules of our Basics of React.js course! ⚛️ So far, you've learned: ✅ What React.js is ✅ How to set up a React project ✅ React project structure ✅ JSX fundamentals ✅ Embedding JavaScript in JSX ✅ JSX rules and best practices 👏 Great job! You now have a solid foundation to start building React applications. Keep practicing, keep coding, and keep moving forward! 💪🔥 If you have any comments or questions so far on the delivery of the course, pls share it here in the comments section. 🚀 Next up: React Components #ReactJS #LearnReact #Milestone #JavaScript #WebDevelopment @mohadbran

function App() { const name = "Your Name"; const role = "React.js Developer"; return ( <div> <h1>{name}</h1> <h2>{role}</h2> <p> I am learning how to build modern applications with React.js. </p> <button onClick={() => alert("Thanks for clicking!")}> Contact Me </button> </div> ); } export default App; 🎯 Challenge: Improve your profile card by: Adding an image using <img />. Adding a CSS class using className. Adding a JavaScript variable for your description. Using the variable inside JSX. For example: const description = "I love building web applications."; Then: <p>{description}</p> ━━━━━━━━━━━━━━━━━━━━ 🔗 5. Relation to Other React Concepts JSX rules will be used throughout your React development. They are especially important when working with: • Components → Components return JSX. • Props → Props are embedded into JSX using {}. • Events → Events use attributes such as onClick. • Conditional Rendering → Conditions determine which JSX is displayed. • Lists → .map() generates multiple JSX elements. • Styling → className and style are commonly used in JSX. Once you understand these rules, you can confidently start creating reusable React components. ━━━━━━━━━━━━━━━━━━━━ 🎯 Key Takeaway JSX looks like HTML, but it follows JavaScript-based rules. Remember these important rules: 1. Return one parent element 2. Close every element 3. Use className instead of class 4. Use camelCase attributes 5. Use {} for JavaScript expressions 6. Use objects for inline styles 7. Keep JSX clean and readable Mastering these basics will prevent many common beginner errors. 🚀 ━━━━━━━━━━━━━━━━━━━━ 📚 MODULE 3 — COMPONENTS 🚀 » Next Lesson: What is a React Component? 📅 New lesson every 3rd day #ReactJS #JSX #JavaScript #WebDevelopment #LearnReact #Programming

« Prev Lesson: Embedding JavaScript in JSX 🚀 BASICS OF REACT.JS — LESSON 6 📏 JSX Rules and Best Practices ━━━━━━━━━━━━━━━━━━━━ 📌 1. Background Context JSX looks very similar to HTML, but it is not HTML. JSX is a syntax extension for JavaScript, and it follows some rules that are different from traditional HTML. Understanding these rules early will help you avoid common errors and write cleaner React applications. ━━━━━━━━━━━━━━━━━━━━ 💡 2. Overview & Explanation Let's look at the most important JSX rules. 1️⃣ Return a Single Parent Element A React component cannot directly return multiple elements at the same level. ❌ Incorrect: function App() { return ( <h1>Hello</h1> <p>Welcome to React</p> ); } Instead, wrap the elements inside a parent: ✅ Correct: function App() { return ( <div> <h1>Hello</h1> <p>Welcome to React</p> </div> ); } You can also use a Fragment: function App() { return ( <> <h1>Hello</h1> <p>Welcome to React</p> </> ); } Fragments allow you to group elements without adding an extra HTML element to the DOM. ━━━━━━━━━━━━━━━━━━━━ 2️⃣ Close Every Element In HTML, some elements can sometimes be written without a closing tag. In JSX, elements must be properly closed. For example: <img src="logo.png" /> <input type="text" /> <br /> Notice the / before >. ━━━━━━━━━━━━━━━━━━━━ 3️⃣ Use className Instead of class HTML: <div class="container"> JSX: <div className="container"> This is because class is a reserved keyword in JavaScript. You will commonly use className when working with CSS in React. ━━━━━━━━━━━━━━━━━━━━ 4️⃣ Use camelCase for Most Attributes Many HTML attributes use hyphens or lowercase names. In JSX, many of these are written using camelCase. HTML: <button onclick="handleClick()"> JSX: <button onClick={handleClick}> Other examples: tabIndex readOnly maxLength autoFocus ━━━━━━━━━━━━━━━━━━━━ 5️⃣ Use Curly Braces for JavaScript To insert JavaScript expressions into JSX, use {}. function App() { const name = "Mohammedbrhan"; return <h1>Hello, {name}!</h1>; } You can also use expressions: <p>{10 + 20}</p> Output: 30 ━━━━━━━━━━━━━━━━━━━━ 6️⃣ Use style Correctly In HTML, inline styles are written as strings: <div style="color: red;"> In JSX, style accepts a JavaScript object: <div style={{ color: "red" }}> Hello </div> Notice the two pairs of curly braces: {{ color: "red" }} ↑ ↑ JavaScript object You can also define the style separately: const styles = { color: "red", fontSize: "20px" }; function App() { return <h1 style={styles}>Hello React!</h1>; } ━━━━━━━━━━━━━━━━━━━━ 7️⃣ Use Meaningful Component Structure Although JSX allows you to write deeply nested elements, avoid unnecessary nesting. Instead of: <div> <div> <div> <h1>Hello</h1> </div> </div> </div> Prefer a simpler structure when possible: <section> <h1>Hello</h1> </section> Clean JSX is easier to read, maintain, and modify. ━━━━━━━━━━━━━━━━━━━━ 💻 3. Usage Example Let's combine several JSX rules: function App() { const name = "Mohammedbrhan"; return ( <> <h1>Hello, {name}!</h1> <p>Welcome to React.js.</p> <img src="/logo.png" alt="React Logo" /> <button onClick={() => alert("Hello!")}> Click Me </button> </> ); } export default App; Notice: ✅ A Fragment <>...</> is used as the parent. ✅ JavaScript is embedded using {}. ✅ The <img /> element is self-closing. ✅ className would be used instead of class. ✅ onClick uses camelCase. ━━━━━━━━━━━━━━━━━━━━ 🧪 4. Tiny Practice Exercise Create a React component that displays a simple profile card. It should contain: Your Name React.js Developer A short description A button: "Contact Me" Start with:

🚀 REACT.JS ለምን መማር አስፈለገ? ሰላም ለሁላችሁ! 👋😊 React.js መማር ጊዜያችሁን የሚመጥን መሆኑ ገና አጠራጣሪ ከሆነባችሁ፣ አንድ ነገር ልንገራችሁ፦ 👉 ጠቃሚ የቴክኖሎጂ ክህሎትን መማር የሙያ ህይወታችሁን—እንዲሁም ሊገኝ የሚችለውን ገቢያችሁን በከፍተኛ ሁኔታ ሊለውጠው ይችላል። React.js ዘመናዊ የዌብ መተግበሪያዎችን (applications) ለመስራት ከሚያገለግሉ በጣም ታዋቂ ቴክኖሎጂዎች አንዱ ነው። በዓለም ዙሪያ ያሉ ኩባንያዎች ፈጣን፣ ተሳታፊ የሚያደርጉ (interactive) እና ሰፊ አገልግሎት መስጠት የሚችሉ መተግበሪያዎችን መገንባት የሚችሉ ባለሙያዎችን ይፈልጋሉ። 💼 የበለጠ ክህሎት = የበለጠ እድል React.js መማር ወደሚከተሉት የስራ እድሎች ለመሸጋገር ይረዳችኋል፦ 🌐 የፊት-ለፊት ዌብ ዴቨሎፐር (Frontend Developer) 💻 ሙሉ ዌብ ዴቨሎፐር (Full-Stack Developer) 🚀 የሶፍትዌር ኢንጂነር (Software Engineer) 🏠 ከቤት ሆኖ የሚሰራ ባለሙያ (Remote Developer) 🌍 በግል ስራ የሚሰራ ባለሙያ (Freelance Developer) እነዚህ እድሎች ደግሞ ወደ የተሻለ ክፍያ፣ የዓለም አቀፍ ስራ እድሎች፣ ከቤት ሆኖ መስራት እና ተጨማሪ ገቢ ለማግኘት መንገድ ይከፍታሉ። 💰 እስቲ አስቡበት... ክህሎታችሁ የበለጠ ዋጋ ያለው በሆነ መጠን፣ ለብዙ የተሻሉ እድሎች ብቁ ይሆናሉ። እርግጥ ነው፣ React.js ብቻውን መማር ከፍተኛ ክፍያ የሚያስገኝ ስራ ለማግኘት ዋስትና አይሆንም። ነገር ግን Reactን ከጠንካራ የJavaScript መሰረት፣ ከጀርባ (backend) ዴቨሎፕመንት፣ ከዳታቤዝ፣ ከGit፣ ከAPIs እና ከተግባራዊ ፕሮጀክቶች ጋር ሲያዋህዱት፣ የበለጠ ብቃት ያለው እና ተፈላጊ ዴቨሎፐር ትሆናላችሁ። ━━━━━━━━━━━━━━━━━━━━ 🔥 ገና ካልጀመራችሁ እንዲህ እያላችሁ አታዘግዩ፦ ❌ «በኋላ እጀምራለሁ።» ❌ «በጣም ስራ በዝቶብኛል።» ❌ «ምናልባት በሚቀጥለው ወር።» ባላችሁ ነገር ጀምሩ፤ ደረጃ በደረጃም ተማሩ። በአንድ ጀምበር ባለሙያ መሆን አይጠበቅባችሁም። 📚 አንድ ጽንሰ-ሀሳብ ተማሩ። 💻 ጥቂት ኮድ ፃፉ። 🧪 ተለማመዱት። 🚀 ትንሽ ነገር ገንቡ። 📈 መላልሳችሁ ደጋግሙት። እውነተኛ ክህሎት የሚገነባው በዚህ መንገድ ነው። ━━━━━━━━━━━━━━━━━━━━ 💪 ትምህርቱን መከታተል ከጀመራችሁ እባካችሁ ጽሁፎቹን አንብባችሁ ብቻ አትለፉ። 😄 እውነተኛ ትምህርት የሚገኘው በተግባር ልምምድ ነው! 👉 ምሳሌዎቹን በራሳችሁ ኪቦርድ ፃፉ። 👉 እያንዳንዱን መልመጃ አጠናቅቁ። 👉 በኮዱ ላይ ሙከራዎችን አድርጉ። 👉 ኮዱን አበላሹ፣ መልሳችሁም አስካክሉት። 👉 የራሳችሁን ትናንሽ ፕሮጀክቶች ገንቡ። ዓላማችሁ ትምህርቱን መጨረስ ብቻ አይደለም። 🎯 ዓላማችሁ በእርግጥም ነገሮችን መገንባት የሚችል አልሚ (developer) መሆን ነው። እናም ይህንን አስታውሱ፦ «📖 እውቀት ግንዛቤን ይሰጣችኋል። 💻 ልምምድ ክህሎትን ይሰጣችኋል። 🚀 ፕሮጀክቶች ልምድን ይሰጡአችኋል። 💰 ክህሎት + ልምድ ደግሞ ወደ የተሻሉ እድሎች በሩን ይከፍታሉ።» ━━━━━━━━━━━━━━━━━━━━ 📢 ከእናንተ አንድ ተጨማሪ ትልቅ ትብብር! ❤️ ፕሮግራሚንግ፣ የዌብ ዴቨሎፕመንት መማር ወይም የሙያ እድሉን ማሻሻል የሚፈልግ የሚያውቁት ሰው ካለ፦ 👉 ይህንን ቻናል አጋሩዋቸው። 👉 ጓደኞቻችሁን ጋብዙ። 👉 ለስራ ባልደረቦቻችሁ ንገሩ። 👉 ለዘመዶቻችሁ አጋሩ። አታውቁም—የእናንተ አንዲት ቀላል ግብዣ አንድ ሰው አዲስ ክህሎት እንዲያገኝ፣ አዲስ ሙያ እንዲጀምር፣ የተሻለ ስራ እንዲያገኝ ወይም የራሱን የገቢ ምንጭ እንዲፈጥር ልትረዳው ትችላለች። 🙌 አብረን እንማር፣ አብረን እንለማመድ፣ አብረንም እንደግ! 🤝🚀 🔥 እድሎች እስኪመጡ አትጠብቁ። እድሎችን የሚፈጥሩ ክህሎቶችን ገንቡ። React.js መማርን ዛሬውኑ ጀምሩ። የነገው ማንነታችሁ ያመሰግናችኋል! ❤️ #ReactJS #LearnReact #WebDevelopment #Programming #CareerGrowth #HighPayingJobs #RemoteJobs #Freelancing #SoftwareDevelopment @mohadbran

<Product name={productName} price={price} inStock={inStock} /> The component receives data through props and uses JSX to display that data. ━━━━━━━━━━━━━━━━━━━━ 🎯 Key Takeaway Use {} inside JSX whenever you need to embed a JavaScript expression into your UI. Remember: JavaScript Data ↓ {} ↓ JSX ↓ Dynamic UI The more comfortable you become with combining JavaScript and JSX, the easier React development becomes. 🚀 » Next Lesson: JSX Rules and Best Practices 📅 New lesson every 3rd day #ReactJS #JSX #JavaScript #WebDevelopment #LearnReact #Programming

« Prev Lesson: What is JSX? 🚀 BASICS OF REACT.JS — LESSON 5 🔗 Embedding JavaScript in JSX ━━━━━━━━━━━━━━━━━━━━ 📌 1. Background Context React applications are not just static pages. A real application needs to display dynamic data. For example: • A user's name • A product's price • The number of items in a shopping cart • A user's profile information • The result of a calculation Because JSX is written inside JavaScript, we can combine JavaScript logic with our UI. This is one of the most powerful features of JSX. ━━━━━━━━━━━━━━━━━━━━ 💡 2. Overview & Explanation To use JavaScript inside JSX, we use curly braces {}. For example: function App() { const name = "Mohammedbrhan"; return <h1>Hello, {name}!</h1>; } The {name} tells React: "Evaluate this JavaScript expression and display its result here." The result is: Hello, Mohammedbrhan! You can put many types of JavaScript expressions inside {}. For example: const name = "Mohammedbrhan"; const age = 25; return ( <div> <h1>{name}</h1> <p>Age: {age}</p> </div> ); ━━━━━━━━━━━━━━━━━━━━ 💻 3. Usage Examples Example 1: JavaScript Expressions You can perform calculations directly inside JSX. function App() { const price = 100; const quantity = 3; return ( <p>Total: {price * quantity}</p> ); } Output: Total: 300 Example 2: Using String Methods You can also use JavaScript methods. function App() { const name = "react"; return ( <h1>{name.toUpperCase()}</h1> ); } Output: REACT Example 3: Conditional Expression You can use the ternary operator inside JSX. function App() { const isLoggedIn = true; return ( <h1> {isLoggedIn ? "Welcome Back!" : "Please Log In"} </h1> ); } If isLoggedIn is true: Welcome Back! If it is false: Please Log In Example 4: Rendering an Array JavaScript arrays can be displayed using .map(). function App() { const fruits = ["Apple", "Banana", "Orange"]; return ( <ul> {fruits.map((fruit) => ( <li key={fruit}>{fruit}</li> ))} </ul> ); } The result will be: • Apple • Banana • Orange We will study lists and .map() in more detail later. ━━━━━━━━━━━━━━━━━━━━ ⚠️ Important: What Can You Put Inside {}? You can use JavaScript expressions: {name} {price * quantity} {user.name} {isLoggedIn ? "Welcome" : "Login"} {items.length} However, you cannot directly write JavaScript statements such as: if (isLoggedIn) { // ... } or: for (...) { // ... } inside JSX curly braces. Instead, we use JavaScript expressions or move more complex logic outside the JSX. For example: function App() { const isLoggedIn = true; const message = isLoggedIn ? "Welcome Back!" : "Please Log In"; return <h1>{message}</h1>; } ━━━━━━━━━━━━━━━━━━━━ 🧪 4. Tiny Practice Exercise Create a React component that displays information about a product. Start with these variables: const productName = "Laptop"; const price = 800; const quantity = 2; Then use JSX to display: Product: Laptop Price: $800 Quantity: 2 Total: $1600 Your solution should use JavaScript expressions inside JSX. For example: function App() { const productName = "Laptop"; const price = 800; const quantity = 2; return ( <div> <h1>Product: {productName}</h1> <p>Price: ${price}</p> <p>Quantity: {quantity}</p> <p>Total: ${price * quantity}</p> </div> ); } export default App; 🎯 Challenge: Add a variable: const inStock = true; Then display either: Status: In Stock or: Status: Out of Stock Use the ternary operator to solve it. 🚀 ━━━━━━━━━━━━━━━━━━━━ 🔗 5. Relation to Other React Concepts Embedding JavaScript in JSX is fundamental to creating dynamic React applications. It connects directly to: • Props → Display data received from parent components. • State → Display and update changing application data. • Conditional Rendering → Show different UI based on conditions. • Lists → Use .map() to render multiple elements. • Events → Use JavaScript functions to respond to user actions. For example, a product component might eventually combine all of these:

👋 Hi family, እንዴት ናችሁ? ሰሞኑን በዚህ የቴሌግራም ቻናል የተጀመረው የReactJS አጭር ኮርስ እየተከታተላችሁ ነው? ይህንን ድምፅ መስጫ በመሙላት አስውቁኝ እስኪ አንዱን ምረጡ ፈልጌው ነው 😁😁

BTW guys, you can start the ReactJS tutorial from the beginning by tapping on the Pinned Message section on top of the page

« Prev Lesson: Understanding the React Project Structure 🚀 BASICS OF REACT.JS — LESSON 4 ⚛️ What is JSX? ━━━━━━━━━━━━━━━━━━━━ 📌 1. Background Context When building user interfaces with JavaScript, we need a way to describe what should appear on the screen. React uses a special syntax called JSX to make this easier. JSX allows us to write something that looks like HTML directly inside JavaScript code. For example: const element = <h1>Hello React!</h1>; This makes React code easier to read and understand. ━━━━━━━━━━━━━━━━━━━━ 💡 2. Overview & Explanation JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows us to write UI elements using an HTML-like syntax. For example: function App() { return <h1>Hello React!</h1>; } The <h1> element looks like HTML, but it is actually JSX. React processes this JSX and uses it to create the corresponding UI. You can also write multiple elements: function App() { return ( <div> <h1>Welcome!</h1> <p>Learning React is fun.</p> </div> ); } JSX makes the relationship between JavaScript logic and UI structure easier to understand. ━━━━━━━━━━━━━━━━━━━━ 💻 3. Usage Examples Example 1: JSX with Variables You can use JavaScript variables inside JSX using curly braces {}. function App() { const name = "Mohammedbrhan"; return <h1>Hello, {name}!</h1>; } Output: Hello, Mohammedbrhan! Example 2: JSX with Expressions You can also use JavaScript expressions: function App() { const a = 10; const b = 20; return <p>Total: {a + b}</p>; } Output: Total: 30 Example 3: JSX Attributes JSX also supports attributes similar to HTML. However, some attribute names are different. For example, instead of HTML: <div class="container"> In JSX, we use: <div className="container"> Notice that class becomes className. ━━━━━━━━━━━━━━━━━━━━ ⚠️ Important JSX Rules There are a few important rules to remember. 1️⃣ Return one parent element This is valid: return ( <div> <h1>Hello</h1> <p>Welcome!</p> </div> ); You can also use a React Fragment: return ( <> <h1>Hello</h1> <p>Welcome!</p> </> ); 2️⃣ Close all elements In JSX, elements must be properly closed. For example: <img src="logo.png" /> Notice the / at the end. 3️⃣ Use className instead of class <div className="container"> Hello </div> 4️⃣ Use {} for JavaScript expressions <h1>{name}</h1> This tells React that name is a JavaScript expression. ━━━━━━━━━━━━━━━━━━━━ 🧪 4. Tiny Practice Exercise Open your App.jsx and create a simple personal introduction. Your component should display: Hello, React! My name is [Your Name]. I am learning React.js. For example: function App() { const name = "Mohammedbrhan"; return ( <div> <h1>Hello, React!</h1> <p>My name is {name}.</p> <p>I am learning React.js.</p> </div> ); } export default App; 🎯 Challenge: Add a variable called course and display: I am learning the Basics of React.js. Try changing the value of the variable and observe the result in your browser. ━━━━━━━━━━━━━━━━━━━━ 🔗 5. Relation to Other React Concepts JSX is closely connected to almost everything we will learn in React. • Components → Components commonly return JSX. • Props → Props can be displayed inside JSX. • State → State values can be rendered using JSX. • Conditional Rendering → JSX can display different UI based on conditions. • Lists → JavaScript methods such as .map() can generate JSX elements. • Events → JSX allows us to attach event handlers such as onClick. For example: <button onClick={handleClick}> Click Me </button> Here, JSX describes the button while onClick connects it to JavaScript logic. ━━━━━━━━━━━━━━━━━━━━ 🎯 Key Takeaway JSX is a JavaScript syntax extension that allows us to describe React user interfaces using an HTML-like syntax. Remember: JavaScript + JSX ↓ React Component ↓ User Interface Once you understand JSX, you are ready to start building React components. 🚀 » Next Lesson: Embedding JavaScript in JSX 📅 New lesson every 3rd day #ReactJS #JSX #JavaScript #WebDevelopment #LearnReact #Programming

Coming in a moment Lesson - 4 : About JSX (JavaScript Syntax Extension)

« Prev Lesson: Setting Up Your React Development Environment 🚀 BASICS OF REACT.JS — LESSON 3 📁 Understanding the React Project Structure ━━━━━━━━━━━━━━━━━━━━ 📌 1. Background Context When we create a React application, Vite generates several files and folders for us. At first, the project structure may look confusing. Understanding what each file does is important because, as our application grows, we need to know: • Where to write our React components • Where the application starts • Where to define styles • Where to add images and other assets Let's take a quick look at the most important parts. ━━━━━━━━━━━━━━━━━━━━ 💡 2. Overview & Explanation A newly created React project may look similar to this: my-react-app/ │ ├── node_modules/ ├── public/ │ ├── src/ │ ├── assets/ │ ├── App.jsx │ ├── App.css │ ├── index.css │ └── main.jsx │ ├── index.html ├── package.json └── vite.config.js Let's understand the important files. 📂 node_modules/ Contains the packages installed by npm. You normally don't edit this folder manually. 📂 public/ Contains static files that can be accessed directly by the browser. For example: public/ └── logo.png 📂 src/ This is where most of our React application code will live. You will spend most of your development time inside this folder. 📄 App.jsx This is usually the main React component of the application. For example: function App() { return <h1>Hello React!</h1>; } export default App; 📄 main.jsx This is the entry point of the React application. It connects our React application to the HTML page. A simplified version looks like: import { createRoot } from 'react-dom/client'; import App from './App.jsx'; createRoot(document.getElementById('root')).render( <App /> ); The flow is approximately: index.html ↓ main.jsx ↓ App.jsx ↓ Your React Components 📄 package.json Contains information about the project and its dependencies. For example: { "scripts": { "dev": "vite", "build": "vite build" } } It also contains the packages your application depends on. ━━━━━━━━━━━━━━━━━━━━ 💻 3. Usage Example Let's modify App.jsx: function App() { return ( <div> <h1>My React App</h1> <p>I am learning React.js!</p> </div> ); } export default App; When you run: npm run dev React renders the App component in the browser. The basic flow is: Browser ↓ index.html ↓ main.jsx ↓ <App /> ↓ App.jsx ↓ UI displayed in browser This flow is fundamental to understanding how a React application starts. ━━━━━━━━━━━━━━━━━━━━ 🧪 4. Tiny Practice Exercise Open your App.jsx file and change it to display: Welcome to My React Course I am building my first React application. Your component should look something like: function App() { return ( <div> <h1>Welcome to My React Course</h1> <p>I am building my first React application.</p> </div> ); } export default App; 🎯 Challenge: Add a third element that displays your name. For example: My name is Mohammedbrhan. Try changing the text and observe how the browser updates automatically. 🔥 ━━━━━━━━━━━━━━━━━━━━ 🔗 5. Relation to Other React Concepts The project structure connects directly to concepts we will learn next: • JSX → Used inside .jsx files to describe the UI. • Components → Usually organized inside the src directory. • Props → Used to pass data between components. • State → Used to manage changing data inside components. • CSS → Used to style React components. As the application grows, we will organize components into dedicated folders to keep the project clean and maintainable. ━━━━━━━━━━━━━━━━━━━━ 🎯 Key Takeaway The src folder contains the core React application. main.jsx starts the application, while App.jsx provides the main application component. Understanding this flow will make the rest of React much easier to learn. 🚀 » Next Lesson: What is JSX? 📅 New lesson every 3rd day #ReactJS #JavaScript #WebDevelopment #LearnReact #Programming

Good morning family, ReactJS Lesson 3 (Understanding the React Project Structure) ከጥቂት ግዜ በኋላ ይለቀቃል

Mohadbran pinned «« Course Outline: BASICS OF REACT.JS Lesson 1 — What is React.js? 📘 Background Modern websites are expected to update parts of the page instantly without refreshing the whole page. Managing these updates with plain JavaScript quickly becomes difficult as…»

ይህንን የReact.js installation step ተከትላችሁ እየሰራችሁ፣ 1. መሀል ላይ ችግር ከገጠማችሁ ወይም መቀጠል ካልቻላችሁ 2. የሚጠበቀው ውጤት ካልመጣላችሁ ያጋጠማችሁ ችግር እስክሪን ሾት እዚህ ኮሜንት ላይ ላኩልን Help is on the way

« Prev Lesson: What is React.js? LESSON 2 - 🛠 Setting Up Your React Development Environment ━━━━━━━━━━━━━━━━━━━━ 📌 1. Background Context Before building React applications, we need a development environment where we can write, run, and test our code. React applications are typically developed using: • Node.js — Provides the JavaScript runtime and development tools. • npm — Manages JavaScript packages and dependencies. • Vite — A fast modern tool for creating and running React projects. Today, Vite is one of the easiest ways to start a new React project. ━━━━━━━━━━━━━━━━━━━━ 💡 2. Overview & Explanation To create a React application, we first need to make sure that Node.js is installed on our computer. You can verify the installation using (cli commands): node -v npm -v If Node.js is not installed; Download from nodejs.org (direct download link for windows) and install it. Then, create a new React project with Vite: npm create vite@latest my-react-app Here ^^: my-react-app is the project name (you can put your chosen project name) Select: Framework: React Variant: JavaScript Then move into the project: cd my-react-app Install the project dependencies: npm install Finally, start the development server: npm run dev Vite will provide a local URL, usually similar to: http://localhost:5173 Open that URL in your browser, and your React application should be running! 🎉 ━━━━━━━━━━━━━━━━━━━━ 💻 3. Usage Example A typical workflow looks like this: # Create the project npm create vite@latest my-react-app # Enter the project cd my-react-app # Install dependencies npm install # Start development server npm run dev Now you have a React application ready for development. You can open the project in VS Code: code . Then start modifying the application and see your changes immediately in the browser. ━━━━━━━━━━━━━━━━━━━━ 🔗 4. Relation to Other React Concepts The development environment we created today will be used throughout the entire course. You will use: • Vite → To develop and build the React application. • npm → To install React and other packages. • JavaScript → The programming language used to write our application. • JSX → The syntax we will use to describe our UI. • Components → The reusable building blocks we will create. In the next lesson, we will explore the structure of the React project we just created. ━━━━━━━━━━━━━━━━━━━━ 🎯 Key Takeaway A React development environment typically uses Node.js, npm, and a tool such as Vite to create, run, and build React applications. 🚀 » Next Lesson: Understanding the React Project Structure 📅 New lesson every 3rd day #ReactJS #JavaScript #WebDevelopment #LearnReact t.me/mohadbran

🌅 Good morning, beautiful people. Guess what .. በዛሬው ትምህርት የReact.js installation እና ፕሮጀክት አጀማመር (Lesson-2) ይለቀቃል ዝግጁ?