متاح الآن! بحث تيليغرام 2025 — أهم رؤى العام 
Full Stack Camp
الذهاب إلى القناة على Telegram
Fullstack Camp | Learn. Build. Launch. Join us for a hands-on journey through HTML, CSS, JavaScript, React, Node.js, Express & MongoDB — all in one place. Use this bot to search for lessons. @FullstackCamp_assistant_bot DM: @Tarikey6
إظهار المزيدلم يتم تحديد البلدالفئة غير محددة
222
المشتركون
-124 ساعات
-37 أيام
-430 أيام
جاري تحميل البيانات...
القنوات المماثلة
لا توجد بيانات
هل تواجه مشاكل؟ يرجى تحديث الصفحة أو الاتصال بمدير الدعم الخاص بنا.
سحابة العلامات
لا توجد بيانات
هل تواجه مشاكل؟ يرجى تحديث الصفحة أو الاتصال بمدير الدعم الخاص بنا.
الإشارات الواردة والصادرة
---
---
---
---
---
---
جذب المشتركين
يونيو '26
يونيو '26
+3
في 0 قنوات
مايو '26
+59
في 0 قنوات
Get PRO
أبريل '26
+30
في 1 قنوات
Get PRO
مارس '260
في 2 قنوات
Get PRO
فبراير '26
+136
في 0 قنوات
| التاريخ | نمو المشتركين | الإشارات | القنوات | |
| 23 يونيو | +1 | |||
| 22 يونيو | 0 | |||
| 21 يونيو | 0 | |||
| 20 يونيو | 0 | |||
| 19 يونيو | 0 | |||
| 18 يونيو | 0 | |||
| 17 يونيو | 0 | |||
| 16 يونيو | 0 | |||
| 15 يونيو | 0 | |||
| 14 يونيو | 0 | |||
| 13 يونيو | 0 | |||
| 12 يونيو | 0 | |||
| 11 يونيو | 0 | |||
| 10 يونيو | 0 | |||
| 09 يونيو | 0 | |||
| 08 يونيو | 0 | |||
| 07 يونيو | 0 | |||
| 06 يونيو | +1 | |||
| 05 يونيو | 0 | |||
| 04 يونيو | +1 | |||
| 03 يونيو | 0 | |||
| 02 يونيو | 0 | |||
| 01 يونيو | 0 |
منشورات القناة
🧩 Week 9 Day 3 Challenges
Challenge 1: Movie Explorer App
Build a small multi-page movie app.
Requirements:
➜Create pages:
Home
Movies
MovieDetails
➜Use React Router DOM
➜Add navigation using Link or NavLink
➜Store movie data in an array or fetch from an API
➜Render movie cards using .map()
Clicking a movie should navigate to:
/movies/:id
➜Use useParams to display selected movie details
➜Create a reusable Card component using props.children
Challenge 2: Travel Destination Planner
Build a travel destinations app.
Requirements:
➜Create components:
Navbar
DestinationList
DestinationDetails
➜Use routing for pages
➜Add at least 5 destinations
➜Clicking a destination opens:
/destinations/:id
➜Use useNavigate for a “Go Back” button
➜Lift state up to parent component for selected region filtering
➜Use props.children for reusable layout wrappers
Challenge 3: Music Artist Dashboard
Build a music artist dashboard.
Requirements:
➜Create pages:
Home
Artists
ArtistProfile
➜Use dynamic routes:
/artists/:id
➜Display:
artist name
genre
albums
➜Use .map() to render artist list
➜Use useParams for profile page
➜Add active navigation styling using NavLink
➜Create reusable Section wrapper component using props.children
Lift search state up so multiple components can access filtered artists
When you are done,
💥 Share your solutions,
💥 invite a friend,
and as always —
💥 stay well, stay curious, and stay coding ✌️
| 2 | ➡ Dynamic Routes
Routes that capture variable parts of the URL, like /users/1, /users/42.
Define with a colon:
<Route path="/users/:id" element={<User />} />
Inside the User component, use useParams to grab the id:
import { useParams } from "react-router-dom";
function User() {
const { id } = useParams();
return <h1>User ID: {id}</h1>;
}
This lets you show different user profiles using the same component.
➡ useNavigate
A hook to change routes programmatically from JavaScript.
const navigate = useNavigate();
// After login:
navigate("/dashboard");
// Or go back:
navigate(-1);
Useful after form submissions, logins, or any action where you need to redirect without a link click.
➜Mental Model of Routing
React Router watches the URL. When it changes, it renders the matching component — no full page refresh. It feels instant.
Real App Structure
src/
├── components/ # reusable: Button, Card, Navbar
├── pages/ # full screens: Home, About, Profile
├── App.jsx
└── main.jsx
Pages are entire views that match a route; components are smaller pieces reused across pages. This keeps your project clean and easy to navigate. | 47 |
| 3 | Week 9 Day 3 — Component Composition & Routing
Hello campers ❤
Today we’ll learn how React applications are organized like real systems.
React applications are built from small reusable pieces connected together.
Part 1 — Component Composition
Component Composition
Composition means combining smaller components to build larger UI structures. You split your UI into pieces like <Navbar />, <Card />, <Button /> and then nest them inside each other. For example:
function Dashboard() {
return (
<div>
<Sidebar />
<MainContent />
</div>
);
}
This keeps code clean, reusable, and easy to scale — just like building with LEGO blocks.
❌ Beginner Mistake
Putting everything inside one huge component (e.g., 500 lines in App) makes it messy, hard to debug, and impossible to reuse.
✅ Better Approach
Break UI into pieces, each with one responsibility:
App
├── Navbar
├── Sidebar
├── Feed
└── Footer
Thinking in Components
Before coding, ask “What parts repeat?” Those become reusable components. Example: instead of writing <h2>John</h2><h2>Sarah</h2> twice, create:
function UserCard({ name }) {
return <h2>{name}</h2>;
}
// Then reuse:
<UserCard name="John" />
<UserCard name="Sarah" />
This prevents duplication and makes your app modular and predictable.
➜Why Composition Matters
Because real apps grow. Composition gives you readability, maintainability, scalability, and reusability.
➜ Shared State Problem
Two sibling components (like SearchBar and ProductList) often need the same data but can’t talk directly. Without a solution, updating SearchBar won’t filter ProductList.
Example:
<SearchBar /> {/* wants to update search term */}
<ProductList /> {/* wants to read search term */}
➜ Lifting State Up
Move shared state to the closest common parent (here, App). Parent holds useState, passes data and setter functions down via props.
function App() {
const [search, setSearch] = useState("");
return (
<>
<SearchBar search={search} setSearch={setSearch} />
<ProductList search={search} />
</>
);
}
Now SearchBar calls setSearch and ProductList reads search — single source of truth, both stay synced. Analogy: one shared fridge instead of each person having fake copies.
➜ props.children
A special prop that lets you pass JSX content inside a component’s tags. Inside the wrapper, you render {props.children}. Example:
function Card(props) {
return <div className="card">{props.children}</div>;
}
// Usage – different content, same wrapper:
<Card><h1>Hello</h1></Card>
<Card><button>Buy</button></Card>
This makes wrapper components reusable for any inner content.
➢ Part 2 — Routing
➡Routing
Routing determines which component to show for a specific URL. You define routes like /home → Home component, /about → About. Without routing, your React app is just one page; routing turns it into a multi‑page experience without full reloads.
➡ React Router DOM
The standard library for routing in React. Install with:
npm install react-router-dom
Then wrap your app with <BrowserRouter> in main.jsx so React can track URLs. React itself has no built‑in routing — this library fills that gap.
React Router DOM v6 – main tools
🔹 BrowserRouter – Wraps your entire app to enable routing.
import { BrowserRouter } from "react-router-dom";
<BrowserRouter><App /></BrowserRouter>
🔹 Routes & Route – Define which component renders for which path.
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
🔹 Link – Navigation without page reload (replaces <a>).
<Link to="/about">About</Link>
Regular <a> refreshes the whole page and loses state — Link keeps your app fast.
🔹 NavLink – Same as Link but adds active styling automatically.
<NavLink to="/about" className={({ isActive }) => isActive ? "active" : ""}>
About
</NavLink>
Perfect for navigation bars where the current page should look different. | 36 |
| 4 | Eid Mubarak fam 🤗 | 46 |
| 5 | CommonJS Vs ES Modules
JavaScript has two main module systems: CommonJS and ES Modules.
CommonJS is the older system, built for Node.js. It uses require() to load a module and module.exports to share code. When you write const fs = require('fs'), Node reads the file right away, line by line. This is synchronous, meaning it waits for each module to load before moving to the next line. CommonJS works well on the server because files are on your local disk and load quickly. Many old Node projects still use it, and you don't need any special settings.
ES Modules are the newer, official standard for JavaScript. They work in both modern browsers and Node.js (with "type": "module" in package.json or using .mjs files). Instead of require(), you write import { something } from './file.js' and export your code. ES Modules load asynchronously, so they can fetch multiple files at once without blocking. This makes them better for web pages and large applications. They also allow tools to remove unused code, a feature called tree shaking, which keeps your final bundle small.
The big difference between them is where and how they run. CommonJS is synchronous and works out of the box in Node, while ES Modules are asynchronous and work in both browsers and Node with a little setup. CommonJS uses require() and module.exports; ES Modules use import and export. For new projects, ES Modules are the better choice because they follow the standard and will work everywhere. But you still see CommonJS everywhere, especially in older Node code and many npm packages.
stay well, stay curious, and stay coding ✌️ | 61 |
| 6 |  لا يوجد نص... | 54 |
| 7 | Today I had a meeting with a senior Google developer who has worked there for more than 20 years, both as a permanent employee and freelancer. It was such an amazing experience, and I got a lot of valuable insights from him.
Here are some life principles and lessons I learned:
1. Stay fit and take care of your health. At the end of the day, health matters the most.
2. Focus on building real skills first. Don’t just follow whatever trend the world is chasing. Work on something you truly enjoy, something you can spend hours on like it’s a game. Read books, especially research papers. If you are a junior developer, learn the fundamentals deeply. Use AI wisely to understand things from the ground level.
3. Communication skills are just as important as technical skills. Learn how to explain and present your knowledge. These days, your online presence matters a lot more than just a resume. Build visibility through platforms like GitHub and by sharing your work online.
Also, attend workshops and meetups. But don’t just attend. make sure you connect with at least one person and keep in touch with them.
4. Have a spiritual life. Whether you are religious or not, always try to be good to others. You never know when your kindness will come back to help you.
Another important point was this:
Build projects that solve your own problems or local problems around you. It’s easier to understand problems you personally face. Then think about how those solutions can scale internationally.
And about AI:
Use AI as a mentor, not as something to completely depend on. Learn the basics well and use AI to simplify your learning and productivity.
Finally, being a good developer means being a lifelong learner. Technology changes fast, and you must keep updating yourself. He started learning during the COBOL and FORTRAN era, and he still adapts to modern technologies today. So keep learning, keep building, and prepare yourself for the international market.
Visibility matters. Real projects matter. Continuous learning matters.
@byte_philosopher | 82 |
| 8 | 🧩 Week 9 Day 2 Challenges
Challenge 1: Student Registration App
➢Build a small app where users can register students.
Requirements:
➛Create a form with:
name
age
course
➛Use useState for all inputs
On submit:
➢prevent page refresh
➢add student to a displayed list
➢Use .map() to render all students
➢Show total students registered
➢Add conditional message:
➢if no students → show "No students yet"
Challenge 2: Product Search Dashboard
Build a product list dashboard.
Requirements:
➛Create an array of at least 8 products
➛Render them using .map()
➛Add search input
➛Use onChange to filter products by name
➛Use conditional rendering:
➛if no product matches → show "No products found"
➛Use useMemo to optimize filtered results
➛Add a button that focuses search input using useRef
Challenge 3: User Fetch + Profile Viewer
Build a user viewer app.
Requirements:
➛Fetch users from: https://jsonplaceholder.typicode.com/users
➛Use useEffect
➛Display:
name
email
company
➛Add loading state
Add button:
➤show/hide users
➤Add input field to search users by name
➤Use conditional rendering
➤Add cleanup function inside useEffect
➤Use keys properly when rendering list
When you are done,
💥 Share your solutions,
💥 invite a friend,
and as always —
💥 stay well, stay curious, and stay coding ✌️ | 117 |
| 9 | ➤ useEffect
useEffect handles side effects – operations that interact with the outside world or that React cannot manage during rendering. Examples: fetching data, reading localStorage, setting timers, or manually changing the DOM.
useEffect takes two arguments: a function (the effect) and a dependency array. The effect runs after the component renders (or commits to the screen). The dependency array tells React when to re‑run the effect:
Basic Syntax
useEffect(() => { console.log("Mounted"); }, []);
Dependency Array
➛Empty
[]
Runs once.
➛With dependency
[count]
Runs when count changes.
➛No dependency
Runs every render.
Analogy
Dependency array = trigger list.
Like security sensors.
Only activates when chosen values change.
➛Cleanup Function
Used when component leaves.
useEffect(() => {
const timer = setInterval(() => {
console.log("Running"); }, 1000);
return () => { clearInterval(timer); }; }, []);
Why?
Prevent memory leaks.
➤ Fetching API Data
Fetching data is a classic side effect, so it belongs inside useEffect (usually with an empty dependency array to run once on mount). While fetching, you typically manage three states: data, loading, and error. This pattern gives users feedback and handles failures gracefully.
useEffect(() => { fetch("https://jsonplaceholder.typicode.com/users")
.then(res => res.json())
.then(data => console.log(data)); }, []);
Axios Version
Install:
npm install axios
Usage
import axios from "axios";
useEffect(() => {
axios.get("https://jsonplaceholder.typicode.com/users")
.then(res => console.log(res.data)); }, []);
➤ useRef
useRef creates a mutable object with a .current property. Unlike state, changing .current does not trigger a re‑render. This makes useRef ideal for:
· Accessing DOM nodes directly (e.g., focusing an input, measuring size).
· Storing values that persist across renders but shouldn’t cause re‑renders (e.g., interval IDs, previous values).
const inputRef = useRef();
Access DOM
<input ref={inputRef} />
<button onClick={() => inputRef.current.focus()}> Focus </button>
Analogy
useRef = sticky note.
Stores info quietly.
No UI update.
➤ useMemo
useMemo caches the result of a computation. It only recomputes when one of its dependencies changes. Use it for expensive calculations (e.g., filtering large arrays, complex math) to avoid doing unnecessary work on every render.
const result = useMemo(() => {
return heavyCalculation(data); }, [data
]);
Why?
Avoid unnecessary recalculation.
Analogy
Like saving previous math answer.
No need to solve again. | 84 |
| 10 | 🌟 Week 9 Day 2 — State, Events, Forms & Side Effects
Hello campers 💙
I hope you’re doing well and building cool things 😄
Today we'll learn:
useState
useRef
useMemo
Events
Conditional rendering
Rendering lists
Forms
useEffect
Fetching API data...
The Core Idea: React Changes When Data Changes
Remember:
If data changes → React updates the screen.
That changing data is usually called state.
➙ What is State?
State is information a component remembers.
Think of state like memory.
➤ useState Hook
React provides a hook called useState.
It gives a component memory.
Basic Syntax
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return <h1>{count}</h1>; }
Understanding It
const [count, setCount] = useState(0);
Think of it like:
➛count → current value
➛setCount → function to update it
➛0 → starting value
➤ Updating State
<button onClick={() => setCount(count + 1)}> Increase </button>
Each click updates state.
React re-renders automatically.
🤔 Why Not Just Variables?
let count = 0; count++;
This changes data but React won’t update UI.
Because React only tracks state, not ordinary variables.
📌 Immutability Principle
React strongly prefers immutable updates: instead of modifying an existing object or array, you create a new copy with the changes. This allows React to compare old and new state efficiently (shallow equality). Mutating state directly often leads to silent bugs because React may skip re‑rendering.
Bad
user.name = "John";
Good
setUser({ ...user, name: "John" });
➤ Event Handling
Events = user actions.
Events are user actions like clicks, typing, or hovering. React uses Synthetic Events – a cross‑browser wrapper around native browser events. Synthetic Events ensure consistent behavior across all browsers and provide the same API everywhere.
Examples:
➛click
➛typing
➛hover
➛submit
➢ onClick
<button onClick={handleClick}>Click</button>
Function
function handleClick() { console.log("Clicked"); }
➢ onChange
Used mainly in forms.
<input onChange={handleChange} />
➤ Synthetic Events
React wraps browser events in its own system.
Called Synthetic Events.
Why?
➛consistent behavior
➛cross-browser compatibility
➛Think of it as a translator between React and browser.
➤ Conditional Rendering
Conditional rendering means showing different UI depending on state or props. You have several tools:
· if / else – best for large blocks or early returns.
· Ternary operator (? :) – great inside JSX for simple conditions.
· Logical AND (&&) – perfect for “show this or nothing”.
if Statement
if (loggedIn) { return <h1>Welcome</h1>; }
Ternary
<h1>{loggedIn ? "Welcome" : "Login"}</h1>
&& Operator
{isAdmin && <button>Delete</button>}
Only shows if true.
Analogy
Conditional rendering = door access.
If you have permission → enter.
No permission → hidden.
➤ Rendering Lists
Rendering lists is about transforming an array of data into an array of JSX elements using Array.prototype.map(). React then renders each element.
Use .map().
const users = ["Anna", "John", "Sara"];
return ( <div> {users.map((user) => ( <p>{user}</p> ))} </div> );
key Prop
Required when rendering lists.
{users.map((user, index) => ( <p key={index}>{user}</p> ))}
Why?
React tracks elements efficiently.
Key = ID card.
📝 Controlled Forms
In a controlled form, React state becomes the “single source of truth” for the input’s value. The input’s value attribute is bound to state, and the onChange handler updates that state. This creates a two‑way feedback loop: typing updates state, and state updates the input’s displayed value.
Example
const [name, setName] = useState("");
<input value={name} onChange={(e) => setName(e.target.value)} />
How It Works
➛Typing updates state.
➛State updates input.
➛Circular connection.
Analogy
Like steering wheel + wheels.
Move one → other responds.
Form Submission
function handleSubmit(e) { e.preventDefault();
console.log(name); }
Why preventDefault?
Normally forms reload page.
React apps usually avoid that. | 68 |
| 11 | MongoDB vs. PostgreSQL
• Data Model: MongoDB Utilizes flexible, schema-less documents organized in collections, whereas PostgreSQL employs fixed schemas with predefined tables, rows, and columns.
• Schema: MongoDB operates on a schema-on-read basis, allowing various structures within a single collection (ideal for quick prototyping), in contrast to PostgreSQL's schema-on-write that necessitates prior definition of structure.
• Relationships: MongoDB is managed through manual referencing (population) or embedded documents without foreign key constraints, compared to PostgreSQL's use of formal joins, primary/foreign keys, and REFERENCES to ensure data integrity.
• Query Language: MongoDB Employs MongoDB Query Language (MQL) with a JSON-like syntax, while PostgreSQL uses standard SQL suitable for complex analytics.
• ACID Compliance: MongoDB provides single-document ACID guarantees with multi-document transactions available (though less efficient), whereas PostgreSQL offers full ACID compliance out of the box, making it suitable for financial applications.
• Extensibility: MongoDB features basic aggregation pipelines with indexing options, but is more limited than PostgreSQL, which is highly extensible and supports various modules like PostGIS (for geospatial data) and TimescaleDB (for time-series data).
stay well, stay curious, and stay coding ✌️ | 84 |
| 12 | cookies vs local storage
In web development, both cookies and local storage are used for storing data on the client side, but they serve different purposes and have distinct characteristics.
Cookies are small pieces of data that are sent from the server and stored in the user's browser, typically used for session management, user tracking, and storing user preferences. They have a size limit of about 4KB and can be set to expire after a certain time, making them suitable for temporary data.
On the other hand, local storage provides a larger storage capacity, allowing developers to store up to 5-10MB of data per origin without expiration, which makes it ideal for persisting user data across sessions. Unlike cookies, local storage is not automatically sent to the server with each HTTP request, which can improve performance by reducing network traffic. Additionally, local storage has a simpler API, using methods like setItem, getItem, and removeItem to manage data easily.
While cookies can be accessed by both client-side and server-side scripts, local storage is primarily accessible through client-side JavaScript.
Security considerations also differ; cookies can be flagged as HttpOnly to prevent access via JavaScript, while local storage is vulnerable to cross-site scripting (XSS) attacks if not properly secured. Ultimately, the choice between cookies and local storage depends on the specific requirements of the application, such as data size, persistence needs, and security considerations.
stay well, stay curious, and stay coding ✌️ | 96 |
| 13 | Insa summercamp registration is open!
https://insa.gov.et/registration | 158 |
| 14 | Summer is near and i see a lot of people looking for internships and honestly speaking interning at 80% of most Ethiopian companies is a waste of time. Unless you’re interning at school or some good companies like Mereb, Chapa, Addis Software etc… you’re wasting that precious 3 months you could’ve spent grinding building and gaining some actual work experience. Pick a really hard project, do the entire Software development life cycle on that shit, Post the living hell about it. Dont be building some portfolio for 3 months or an E-commerce site that doesnt even work. Build something that could be a product, something that actually solves something for you.
Build Post Repeat, and i assure u after that 3 months u can get an actual job paying good money | 166 |
| 15 | Thank you so muchhhh every one for voting , I am so grateful to be part of this community 😍😍🥹 | 133 |
| 16 | We did it again boyss!
@MessiBre from our community won the #1 spot in the Zero to Agent hackathon. Second place is also Mahlet from Addis Ababa.
Congrats, this's so dope! I'm like literally so proud of you guys! Great job!! 👏🎉
#ZeroToAgent
@Dagmawi_Babi | 123 |
| 17 | They have added search feature now - search "PersonaAI"
you can also vote for more than one project! | 114 |
| 18 |  Hey there 😉
So we are competing for the zero to agent hackathon and I need your help here 🤗🤗
If you don't have vercel account - sign up here first:
https://vercel.com/signup/
Then go here and look for a project name called PersonaAI that looks like this image with this
"Persona AI turns your GitHub, Notion, LinkedIn, and CV into a great portfolio that shows your skills and...."
description and vote me there. The voting closes tomorrow at 5:00 AM LT. Thank youuuuu 🥰
https://community.vercel.com/hackathons/zero-to-agent/showcase
You can try it out here for your self:
https://messibre-portfolio.vercel.app/ | 113 |
| 19 | Week 9 Day 1 — Challenges
Challenge 1: Dynamic Profile Cards
Create a reusable ProfileCard component that accepts these props:
* name
* role
* location
* skills (an array)
Render at least 3 profile cards in App.
Requirements:
* Display all information clearly
* Show the skills as a comma-separated list or as separate list items
* Add custom styling using both className and inline styles
Challenge 2: Product Showcase
Create a ProductCard component that accepts:
* productName
* price
* inStock (boolean)
Render at least 4 products.
Requirements:
* If inStock is true, display: "Available"
* If false, display: "Out of Stock"
* Style the availability message differently based on stock status
* Use JavaScript expressions inside JSX
Challenge 3: Developer Dashboard
Build a small developer dashboard containing:
* A page title
* A welcome message
* A list of at least 5 developers
Create a reusable DeveloperCard component with:
* name
* specialization
* yearsOfExperience
Requirements:
* Render all cards dynamically
* Use props for all displayed data
* Add inline styling for card appearance
* Highlight developers with more than 3 years of experience with a special message like: "Senior Developer"
When you are done,
💥 Share your solutions,
💥 invite a friend,
and as always —
💥 stay well, stay curious, and stay coding ✌️ | 173 |
| 20 | ➝Props are external data passed into a component.
➝State is internal data managed by the component itself.
* Props = ingredients given to a chef
* State = what the chef is currently cooking
We’ll dive much deeper into state soon.
For now, just remember:
> Props come from outside.
> State lives inside.
# React Tooling
Modern React development relies on tools.
We don't create react from scratch most of the time , we use Vite.
# Why Use Vite Instead of Create React App?
Vite is the modern way to create React projects.
It is:
* Faster
* Simpler
* More lightweight
* Better developer experience
CRA is like an old bus.
Vite is like a high-speed train.
# Create Your First React App
in bash/terminal:
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev
What happens here?
1. Creates a new React project
2. Moves into the project folder
3. Installs dependencies
4. Starts the development server
# 📁 Understanding the Project Structure
my-app/
├── src/
│ ├── App.jsx
│ ├── main.jsx
│ └── assets/
## main.jsx
This is the entry point.
It tells React:
> “Render the App component inside the HTML page.”
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
## App.jsx
This is your main application component.
Think of it as the root of your UI tree.
# 🧹 Cleaning Up Boilerplate
Delete unnecessary files and replace App.jsx with your own code.
# Your First Component: Greeting
function Greeting({ name }) {
return <h2>Hello, {name}! Welcome to React </h2>;
}
export default Greeting;
# Using the Component in App.jsx
import Greeting from "./Greeting";
function App() {
return (
<div>
<h1>React Components</h1>
<Greeting name="Megersa" />
<Greeting name="Abel" />
<Greeting name="Sara" />
</div>
);
}
export default App;
# What Happens Here?
➝React creates three separate Greeting components.
➝Same blueprint, different data.
➝Like printing three ID cards from the same template.
# Embedding JavaScript Expressions in JSX
Use curly braces {}.
function App() {
const name = "Megersa";
const age = 24;
return (
<div>
<h1>Hello, {name}</h1>
<p>You are {age} years old.</p>
<p>Next year you'll be {age + 1}.</p>
</div>
);
}
# 🎨 Styling in JSX
## Using className
<h1 className="title">Hello React</h1>
## Using Inline Styles
<h1 style={{ color: "purple", textAlign: "center" }}>
Styled with React
</h1>
# Mental Model of React
React is all about this simple idea:
> UI = Function(Data)
When data changes, the UI updates automatically. | 117 |
