React.js or Selenium First — What Beginners Should Learn

// React — a simple component with props.
// The first pattern every React beginner writes.

function UserList({ users }) {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>
          {user.name} — {user.email}
        </li>
      ))}
    </ul>
  );
}

// Used inside a parent component:
// <UserList users={[{ id: 1, name: "Alice", email: "a@x.com" }]} />

// What this proves:
// - You understand components (the unit of a React UI)
// - You pass data via props
// - You render a list with .map and a stable key
// - You write JSX, not string concatenation

// React is the visible part of the app — what users
// actually click, see, and interact with.

// React — fetch data, handle loading and error states.
// This is what real React apps actually do.

import { useEffect, useState } from "react";

export default function TaskList() {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let cancelled = false;

    async function load() {
      try {
        const res = await fetch("/api/tasks");
        if (!res.ok) throw new Error("Failed to load tasks");
        const data = await res.json();
        if (!cancelled) setTasks(data);
      } catch (err) {
        if (!cancelled) setError(err.message);
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    load();
    return () => { cancelled = true; };
  }, []);

  if (loading) return <p>Loading…</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <ul>
      {tasks.map((t) => (
        <li key={t.id}>{t.title}</li>
      ))}
    </ul>
  );
}

// What this proves:
// - You handle all three states: loading, error, success
// - You clean up in useEffect to avoid leaks
// - You use async/await inside a real hook
// - You write components that don't crash on bad data

// This is the minimum bar for a junior React role.

# Selenium — the first test every beginner writes.
# Open a browser, log in, verify the result.

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

driver = webdriver.Chrome()

try:
    driver.get("https://demo-app.example.com/login")

    driver.find_element(By.ID, "email").send_keys("user@example.com")
    driver.find_element(By.ID, "password").send_keys("correct-password")
    driver.find_element(By.CSS_SELECTOR, "button[type='submit']").click()

    WebDriverWait(driver, 10).until(
        EC.visibility_of_element_located(
            (By.CSS_SELECTOR, "[data-testid='dashboard']")
        )
    )

    assert "Dashboard" in driver.title
    print("Login test passed")

finally:
    driver.quit()

# What this proves in an interview:
# - You can drive a real browser programmatically
# - You use explicit waits, not time.sleep()
# - You find elements by stable selectors
# - You handle teardown (driver.quit)

# Selenium is about verifying behaviour — not about
# building the app. Different job from React.

# Selenium — Page Object pattern
# The shape every Selenium interview expects you to write.

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

class LoginPage:
    def __init__(self, driver):
        self.driver = driver
        self.email = (By.ID, "email")
        self.password = (By.ID, "password")
        self.submit = (By.CSS_SELECTOR, "button[type='submit']")

    def load(self):
        self.driver.get("https://demo-app.example.com/login")
        return self

    def login(self, email, password):
        self.driver.find_element(*self.email).send_keys(email)
        self.driver.find_element(*self.password).send_keys(password)
        self.driver.find_element(*self.submit).click()
        return self

    def wait_for_dashboard(self):
        WebDriverWait(self.driver, 10).until(
            EC.visibility_of_element_located(
                (By.CSS_SELECTOR, "[data-testid='dashboard']")
            )
        )
        return self

# Test code becomes readable and reusable
# — the whole point of the Page Object pattern.

# What this proves in an interview:
# - You separate page structure from test logic
# - You encapsulate locators in one place
# - You return self for readable chaining
# - You know why brittle XPath is a maintenance trap

# Selenium careers reward clean structure as much as
# clever selectors. This separates juniors from senior
# SDETs.