Created
September 4, 2025 14:09
-
-
Save carlosrjg7/7962bafdfba518ebdf73586e394874a0 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| npm create vite@latest prueba-tecnica -- --template react-ts | |
| cd prueba-tecnica | |
| npm install | |
| npm install axios | |
| npm run dev | |
| src/ | |
| App.tsx → componente principal | |
| components/UserList.tsx → lista de usuarios | |
| types/User.ts → definición de tipos | |
| export interface User { | |
| id: number; | |
| name: string; | |
| email: string; | |
| } | |
| import { useState, useEffect } from "react"; | |
| import axios from "axios"; | |
| import UserList from "./components/UserList"; | |
| import { User } from "./types/User"; | |
| function App() { | |
| const [users, setUsers] = useState<User[]>([]); | |
| const [loading, setLoading] = useState<boolean>(true); | |
| const [error, setError] = useState<string | null>(null); | |
| const [search, setSearch] = useState<string>(""); // estado de búsqueda | |
| useEffect(() => { | |
| axios | |
| .get<User[]>("https://jsonplaceholder.typicode.com/users") | |
| .then((response) => { | |
| setUsers(response.data); | |
| setLoading(false); | |
| }) | |
| .catch(() => { | |
| setError("Error al obtener usuarios"); | |
| setLoading(false); | |
| }); | |
| }, []); | |
| // Filtrar usuarios por nombre | |
| const filteredUsers = users.filter((user) => | |
| user.name.toLowerCase().includes(search.toLowerCase()) | |
| ); | |
| if (loading) return <p>Cargando...</p>; | |
| if (error) return <p>{error}</p>; | |
| return ( | |
| <div style={{ padding: "20px" }}> | |
| <h1>Lista de Usuarios</h1> | |
| <input | |
| type="text" | |
| placeholder="Buscar por nombre..." | |
| value={search} | |
| onChange={(e) => setSearch(e.target.value)} | |
| style={{ marginBottom: "20px", padding: "8px", width: "100%" }} | |
| /> | |
| <UserList users={filteredUsers} /> | |
| </div> | |
| ); | |
| } | |
| export default App; | |
| import { User } from "../types/User"; | |
| interface UserListProps { | |
| users: User[]; | |
| } | |
| function UserList({ users }: UserListProps) { | |
| if (users.length === 0) { | |
| return <p>No se encontraron usuarios</p>; | |
| } | |
| return ( | |
| <ul> | |
| {users.map((user) => ( | |
| <li key={user.id}> | |
| <strong>{user.name}</strong> - {user.email} | |
| </li> | |
| ))} | |
| </ul> | |
| ); | |
| } | |
| export default UserList; |
Author
Author
npm install -D vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event
Author
npm install react-hook-form axios zod @hookform/resolvers react-router-dom react-toastify @tanstack/react-query @tanstack/react-query-devtools lucide-react
Author
npm install tailwindcss @tailwindcss/vite
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
npm install tailwindcss @tailwindcss/vite