~/pcn $ iniciando_
enunciados + leetcode
Enunciados como los de una entrevista real para resolver por tu cuenta, con el tiempo que te darían, y problemas de LeetCode recomendados para cada tecnología y seniority. Nada se corrige acá: resolvelo en tu editor, en voz alta, y marcá lo que ya practicaste.
Tenés un array contacts con objetos { id: string, name: string, phone: string, avatarUrl: string }. Armá una pantalla en React Native que los muestre en una FlatList con avatar, nombre y teléfono, y un TextInput arriba para buscar por nombre.
Los datos están hardcodeados. Simulá un pull to refresh que espera 1 segundo y vuelve a cargar la misma lista.
# requisitos
FlatList con keyExtractor basado en el id, no ScrollView con map.TextInput es controlado y el filtro ignora mayúsculas y minúsculas.ListEmptyComponent cuando no hay resultados.refreshing y onRefresh.StyleSheet.create, respetando el safe area.# si te sobra tiempo, te van a preguntar
FlatList y no un ScrollView con map?Armá dos pantallas con Expo Router o React Navigation. La primera lista productos que trae fetchProducts(): Promise<{ id: string, name: string, price: number }[]> y la segunda muestra el detalle de uno con fetchProduct(id): Promise<{ id: string, name: string, price: number, description: string }>. Mockeá las dos funciones con un delay de 600 ms.
Al tocar un producto se navega al detalle pasando solo el id como parámetro. El título del header del detalle es el nombre del producto.
# requisitos
id por parámetro de ruta y pide sus datos; no recibe el objeto entero.Intl.NumberFormat o equivalente.# si te sobra tiempo, te van a preguntar
id y no el objeto completo como parámetro?Recibís transacciones con la forma { id: string, description: string, amount: number, date: string }, donde date es ISO (2024-06-03T10:15:00Z) y amount es negativo para gastos. Escribí una función pura toSections(transactions) que devuelva el formato que espera SectionList: { title: string, total: number, data: Transaction[] }[].
Las secciones se agrupan por día, van del día más reciente al más viejo y dentro de cada día las transacciones también van de la más reciente a la más vieja. total es la suma del día. Después usá la función para renderizar la SectionList con el total en cada encabezado.
# requisitos
Hoy, Ayer o 3 de junio.toSections.# si te sobra tiempo, te van a preguntar
map para entender callbacks, la base de renderizar listas.async y await.Map, un patrón de algoritmos muy básico y muy pedido.Set para bajar de O(n²) a O(n), algo que también usás para deduplicar datos en una lista.