1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
// Sample.tsx
// A practical TSX + React + TypeScript example 🧩
import React, { useEffect, useState } from "react";
// --------------------
// Types & Interfaces
// --------------------
type Role = "USER" | "ADMIN";
interface User {
id: number;
name: string;
role: Role;
}
// Props for a component
interface UserCardProps {
user: User;
onSelect: (id: number) => void;
}
// --------------------
// Reusable Component
// --------------------
const UserCard: React.FC<UserCardProps> = ({ user, onSelect }) => {
return (
<div style={{ border: "1px solid #ccc", padding: 12, marginBottom: 8 }}>
<h3>{user.name}</h3>
<p>Role: {user.role}</p>
<button onClick={() => onSelect(user.id)}>Select</button>
</div>
);
};
// --------------------
// Main Component
// --------------------
const Sample: React.FC = () => {
// Typed state
const [users, setUsers] = useState<User[]>([]);
const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
const [loading, setLoading] = useState<boolean>(true);
// --------------------
// Side Effects
// --------------------
useEffect(() => {
// Fake async fetch
const loadUsers = async () => {
setLoading(true);
await new Promise(resolve => setTimeout(resolve, 500));
setUsers([
{ id: 1, name: "Alice", role: "USER" },
{ id: 2, name: "Bob", role: "ADMIN" },
]);
setLoading(false);
};
loadUsers();
}, []);
// --------------------
// Event Handlers
// --------------------
const handleSelectUser = (id: number) => {
setSelectedUserId(id);
};
// --------------------
// Derived Values
// --------------------
const selectedUser = users.find(u => u.id === selectedUserId);
// --------------------
// Conditional Rendering
// --------------------
if (loading) {
return <div>Loading users...</div>;
}
return (
<div style={{ maxWidth: 400, margin: "0 auto" }}>
<h2>User List</h2>
{users.map(user => (
<UserCard
key={user.id}
user={user}
onSelect={handleSelectUser}
/>
))}
{selectedUser && (
<div style={{ marginTop: 16 }}>
<strong>Selected User:</strong>
<div>{selectedUser.name}</div>
</div>
)}
</div>
);
};
export default Sample;
|
