AfricanProgrammer

Why React?

React is the most requested frontend skill on African job boards. It powers Paystack dashboards, Andela client apps, and thousands of Next.js sites.

Your first component

type GreetingProps = {
  name: string;
};
 
export function Greeting({ name }: GreetingProps) {
  return <h1>Hello, {name}!</h1>;
}

State with useState

"use client";
 
import { useState } from "react";
 
export function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <button onClick={() => setCount((c) => c + 1)}>
      Clicks: {count}
    </button>
  );
}

Side effects with useEffect

import { useEffect, useState } from "react";
 
export function JobCount() {
  const [total, setTotal] = useState(0);
 
  useEffect(() => {
    fetch("/api/jobs")
      .then((r) => r.json())
      .then((data) => setTotal(data.jobs?.length ?? 0));
  }, []);
 
  return <p>{total} open roles</p>;
}

Composition pattern

function Card({ children }: { children: React.ReactNode }) {
  return (
    <article className="rounded-xl border p-6">{children}</article>
  );
}
 
function TutorialList() {
  return (
    <Card>
      <h2>Featured tutorials</h2>
      <p>Start learning today.</p>
    </Card>
  );
}

Practice project

Build a tutorial bookmark list using useState and localStorage — the same pattern used on this platform.

Written by

Efua Mensah

React Developer, Accra

Published April 1, 2025

Efua ships customer-facing dashboards for healthtech and logistics companies in Ghana.

React Fundamentals