UI reacts to state.
State reacts to async data.
Effects synchronize React with external systems.

find HTML element
change DOM manually
inject content manually

event
→ state update
→ effect runs
→ async request
→ state changes
→ React re-renders UI

mkdir bloco04
cd bloco04
npm create vite@latest app64-github-user-explorer -- --template react-ts
cd app64-github-user-explorer

npm install

npm install @fluentui/react-components @fluentui/react-icons

New-Item src\components -ItemType Directory
New-Item src\models -ItemType Directory
New-Item src\services -ItemType Directory
New-Item src\styles -ItemType Directory

New-Item src\models\GitHubUser.ts -ItemType File
New-Item src\services\githubService.ts -ItemType File
New-Item src\components\SearchBar.tsx -ItemType File
New-Item src\components\GitHubProfileCard.tsx -ItemType File
New-Item artigo.md -ItemType File

app64-github-user-explorer/
  src/
    components/
      GitHubProfileCard.tsx
      SearchBar.tsx
    models/
      GitHubUser.ts
    services/
      githubService.ts
    styles/
    App.tsx
    main.tsx
    index.css

export interface GitHubUser {
  login: string;
  avatar_url: string;
  name: string;
  bio: string;
  public_repos: number;
  followers: number;
  following: number;
  html_url: string;
}

GitHub API
→ returns JSON
TypeScript Interface
→ defines expected structure
React Components
→ safely render data

import type { GitHubUser } from "../models/GitHubUser";
export async function fetchGitHubUser(
  username: string
): Promise<GitHubUser> {
  const response = await fetch(
    `https://api.github.com/users/${username}`
  );
  if (!response.ok) {
    throw new Error("GitHub user not found.");
  }
  return response.json();
}

Component
  contains:
    - UI
    - API requests
    - parsing
    - business logic

Service layer
  handles APIs
Components
  focus on rendering

await fetch(...)

React app
→ sends HTTP request
→ GitHub API responds
→ JSON data arrives
→ React updates state
→ UI re-renders

The browser would freeze waiting for data.

Request runs asynchronously.
React keeps rendering.
When data arrives:
  state updates
  UI updates

import {
  Button,
  Input,
} from "@fluentui/react-components";
interface SearchBarProps {
  username: string;
  onUsernameChange: (value: string) => void;
  onSearch: () => void;
}
export function SearchBar({
  username,
  onUsernameChange,
  onSearch,
}: SearchBarProps) {
  return (
    <div
      style={{
        display: "flex",
        gap: "12px",
      }}
    >
      <Input
        placeholder="Enter GitHub username"
        value={username}
        onChange={(_, data) =>
          onUsernameChange(data.value)
        }
      />
      <Button
        appearance="primary"
        onClick={onSearch}
      >
        Search
      </Button>
    </div>
  );
}

value={username}

onChange={...}

React state controls the UI.

Browser DOM controls the UI.

import {
  Avatar,
  Card,
  Link,
  Text,
  Title2,
} from "@fluentui/react-components";
import type { GitHubUser } from "../models/GitHubUser";
interface GitHubProfileCardProps {
  user: GitHubUser;
}
export function GitHubProfileCard({
  user,
}: GitHubProfileCardProps) {
  return (
    <Card
      style={{
        padding: "24px",
        marginTop: "24px",
        display: "flex",
        flexDirection: "column",
        gap: "16px",
      }}
    >
      <Avatar
        image={{
          src: user.avatar_url,
        }}
        size={96}
      />
      <Title2>
        {user.name || user.login}
      </Title2>
      <Text>{user.bio}</Text>
      <Text>
        Public Repositories: {user.public_repos}
      </Text>
      <Text>
        Followers: {user.followers}
      </Text>
      <Text>
        Following: {user.following}
      </Text>
      <Link
        href={user.html_url}
        target="_blank"
      >
        Open GitHub Profile
      </Link>
    </Card>
  );
}

import { useEffect, useState } from "react";
import {
  Spinner,
  Text,
  Title1,
} from "@fluentui/react-components";
import { SearchBar } from "./components/SearchBar";
import { GitHubProfileCard } from "./components/GitHubProfileCard";
import type { GitHubUser } from "./models/GitHubUser";
import { fetchGitHubUser } from "./services/githubService";
function App() {
  const [username, setUsername] =
    useState("microsoft");
  const [searchUsername, setSearchUsername] =
    useState("microsoft");
  const [user, setUser] =
    useState<GitHubUser | null>(null);
  const [loading, setLoading] =
    useState(false);
  const [error, setError] =
    useState("");
  useEffect(() => {
    async function loadUser() {
      try {
        setLoading(true);
        setError("");
        const data =
          await fetchGitHubUser(searchUsername);
        setUser(data);
      } catch (err) {
        setError(
          "Unable to load GitHub profile."
        );
        setUser(null);
      } finally {
        setLoading(false);
      }
    }
    loadUser();
  }, [searchUsername]);
  return (
    <main
      style={{
        minHeight: "100vh",
        backgroundColor: "#f5f5f5",
        padding: "48px",
        boxSizing: "border-box",
      }}
    >
      <section
        style={{
          maxWidth: "700px",
          margin: "0 auto",
        }}
      >
        <Title1>
          GitHub User Explorer
        </Title1>
        <Text>
          Search GitHub users using React,
          TypeScript, Fluent UI, and Effects.
        </Text>
        <div
          style={{
            marginTop: "24px",
          }}
        >
          <SearchBar
            username={username}
            onUsernameChange={setUsername}
            onSearch={() =>
              setSearchUsername(username)
            }
          />
        </div>
        {loading && (
          <div
            style={{
              marginTop: "24px",
            }}
          >
            <Spinner label="Loading profile..." />
          </div>
        )}
        {error && (
          <Text
            style={{
              color: "red",
              marginTop: "24px",
              display: "block",
            }}
          >
            {error}
          </Text>
        )}
        {user && !loading && (
          <GitHubProfileCard user={user} />
        )}
      </section>
    </main>
  );
}
export default App;

useEffect(() => {
  ...
}, [searchUsername]);

[searchUsername]

Run the effect whenever searchUsername changes.

username
searchUsername

const [loading, setLoading] =
  useState(false);

const [error, setError] =
  useState("");

{loading && <Spinner />}

{error && <Text>{error}</Text>}

{user && !loading && (
  <GitHubProfileCard user={user} />
)}

React State
→ Effects
→ API Integration
→ Async Rendering
→ Enterprise UI

import React from "react";
import ReactDOM from "react-dom/client";
import {
  FluentProvider,
  webLightTheme,
} from "@fluentui/react-components";
import App from "./App";
import "./index.css";
ReactDOM.createRoot(
  document.getElementById("root")!
).render(
  <React.StrictMode>
    <FluentProvider theme={webLightTheme}>
      <App />
    </FluentProvider>
  </React.StrictMode>
);

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
}
* {
  box-sizing: border-box;
}

npm run dev

npm run build

npm run preview

User types username
→ React updates input state
User clicks Search
→ searchUsername updates
Dependency array changes
→ useEffect executes
GitHub API request runs
→ loading state becomes true
Data arrives
→ user state updates
React re-renders
→ GitHubProfileCard appears