The Basics

What is React?

A JavaScript library for building user interfaces.

Imperative (vanilla JS): you tell the browser step by step what to do. Find this element. Create that element. Set the text. Attach it to the page.

Declarative (React): you describe what the page should look like. React handles the rest.

1. JSX

HTML inside JavaScript. No more document.createElement. You see what the page looks like just by reading the code.

🧑‍💻 Example

function App() {
  return <h1>Hello World</h1>;
}

Curly braces for JavaScript expressions inside JSX:

const name = "Ahmed";

return <h1>Hello, {name}</h1>;

return <p>{2 + 2}</p>;

Rules:

1. One parent element (wrap in <div> or <>...</>)
2. Use className instead of class
3. Self-closing tags: <img />, <input />, <br />

// Wrong
return (
  <h1>Title</h1>
  <p>Text</p>
);

// Right
return (
  <div>
    <h1>Title</h1>
    <p>Text</p>
  </div>
);

📌 Summary

2. Components

Functions that return JSX. Instead of one giant file, you break the page into pieces.

🧑‍💻 Example

Create a component:

function Hero() {
  return <h1>Welcome to Bashi Academy</h1>;
}

Use it like an HTML tag:

function App() {
  return (
    <div>
      <Hero />
    </div>
  );
}

Rules:

1. PascalCase names: Hero, NavBar, UserCard
2. Must return JSX
3. Use like an HTML tag: <Hero />

📌 Summary

3. Import & Export

One component per file. Export it out, import it in.

🧑‍💻 Example

Default export (one per file):

Hero.jsx:

function Hero() {
  return <h1>Welcome to Bashi Academy</h1>;
}

export default Hero;

App.jsx:

import Hero from "./Hero";

function App() {
  return (
    <div>
      <Hero />
    </div>
  );
}

Named export (many per file):

utils.jsx:

export function Hero() {
  return <h1>Welcome</h1>;
}

export function Footer() {
  return <footer>© 2025</footer>;
}

import { Hero, Footer } from "./utils";

The difference:

Default: one per file, no braces. Named: many per file, braces required.

📌 Summary

4. Props

Data passed from parent to child. One component, different data.

🧑‍💻 Example

Pass like HTML attributes:

<Card title="React" description="A UI library" />

Receive as a function parameter:

function Card(props) {
  return (
    <div>
      <h2>{props.title}</h2>
      <p>{props.description}</p>
    </div>
  );
}

Destructuring (cleaner):

function Card({ title, description }) {
  return (
    <div>
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

Default values:

function Card({ title = "Untitled", description = "" }) {
  return (
    <div>
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

If a prop is missing, the default kicks in.

📌 Summary

5. Conditional Rendering

Show the right thing at the right time. Logged in or logged out. Loading or loaded.

🧑‍💻 Example

Ternary (show A or B):

<button>{isOn ? "ON" : "OFF"}</button>

&& operator (show or hide):

{isLoggedIn && <p>Welcome back!</p>}

If isLoggedIn is true, the message shows. If false, nothing renders.

📌 Summary

6. Lists

Real apps show lists: products, users, messages. Turn an array into elements on screen.

🧑‍💻 Example

.map() over an array, return JSX for each item:

const names = ["Ahmed", "Faadumo", "Yusuf"];

return (
  <ul>
    {names.map((name) => (
      <li key={name}>{name}</li>
    ))}
  </ul>
);

The key prop: React needs a unique key on each item to track what changed. Use an id, not the array index.

Array of objects:

const students = [
  { id: 1, name: "Ahmed", course: "React" },
  { id: 2, name: "Faadumo", course: "Python" },
];

return (
  <ul>
    {students.map((student) => (
      <StudentCard key={student.id} name={student.name} course={student.course} />
    ))}
  </ul>
);

📌 Summary