Preguntas y respuestas de entrevista para React Native Junior

// React (Web)
import React from 'react';

function App() {
  return <div className="container">Hola Web</div>;
}

// React Native (Mobile)
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

function App() {
  return (
    <View style={styles.container}>
      <Text>Hola Mobile</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

import {
  View,
  Text,
  Image,
  TextInput,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';

function MyComponent() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Bienvenido</Text>
      <Image source={{ uri: 'https://example.com/image.jpg' }} style={styles.image} />
      <TextInput placeholder="Introduce el nombre" style={styles.input} />
      <TouchableOpacity style={styles.button} onPress={() => console.log('Pulsado')}>
        <Text style={styles.buttonText}>Haz clic</Text>
      </TouchableOpacity>
    </View>
  );
}

// View - no desplazable
<View style={{ height: 200 }}>
  <Text>Contenido 1</Text>
  <Text>Contenido 2</Text>
  {/* Si el contenido excede los 200px, se corta */}
</View>

// ScrollView - desplazable
<ScrollView style={{ height: 200 }}>
  <Text>Contenido 1</Text>
  <Text>Contenido 2</Text>
  <Text>Contenido 3</Text>
  {/* Se puede desplazar para ver todo el contenido */}
</ScrollView>

// FlatList - eficiente para listas grandes
<FlatList
  data={items}
  renderItem={({ item }) => <Text>{item.name}</Text>}
  keyExtractor={item => item.id}
/>

import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';

function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    console.log(`El conteo cambió a: ${count}`);
    
    // Función de limpieza
    return () => {
      console.log('Limpieza');
    };
  }, [count]); // Se ejecuta cuando el conteo cambia
  
  return (
    <View>
      <Text>Conteo: {count}</Text>
      <Button title="Incrementar" onPress={() => setCount(count + 1)} />
    </View>
  );
}

import { useEffect, useState } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  // Se ejecuta una vez al montar
  useEffect(() => {
    console.log('Componente montado');
  }, []);
  
  // Se ejecuta cuando userId cambia
  useEffect(() => {
    fetchUser(userId).then(data => setUser(data));
  }, [userId]);
  
  // Se ejecuta después de cada renderizado (evitar esto)
  useEffect(() => {
    console.log('Renderizado');
  });
  
  // Función de limpieza
  useEffect(() => {
    const subscription = subscribeToUpdates();
    
    return () => {
      subscription.unsubscribe(); // Limpieza al desmontar
    };
  }, []);
  
  return <Text>{user?.name}</Text>;
}

// Componente padre
function ParentComponent() {
  const [count, setCount] = useState(0);
  
  return (
    <ChildComponent 
      title="Contador"  // Props
      count={count}    // Props
      onIncrement={() => setCount(count + 1)}  // Props
    />
  );
}

// Componente hijo
function ChildComponent({ title, count, onIncrement }) {
  // No se pueden modificar las props
  // title = "Nuevo título"; // ¡Error!
  
  return (
    <View>
      <Text>{title}</Text>
      <Text>Conteo: {count}</Text>
      <Button title="Incrementar" onPress={onIncrement} />
    </View>
  );
}

// Componente Funcional (Moderno)
function Welcome({ name }) {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    console.log('Montado');
  }, []);
  
  return <Text>Hola, {name}</Text>;
}

// Componente de Clase (Legado)
class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  componentDidMount() {
    console.log('Montado');
  }
  
  render() {
    return <Text>Hola, {this.props.name}</Text>;
  }
}

// Componente padre
function ParentComponent() {
  const [message, setMessage] = useState('');
  
  const handleMessageFromChild = (msg) => {
    setMessage(msg);
  };
  
  return (
    <View>
      <Text>Mensaje del hijo: {message}</Text>
      <ChildComponent onSendMessage={handleMessageFromChild} />
    </View>
  );
}

// Componente hijo
function ChildComponent({ onSendMessage }) {
  const [input, setInput] = useState('');
  
  const sendMessage = () => {
    onSendMessage(input); // Llama a la función del padre
  };
  
  return (
    <View>
      <TextInput value={input} onChangeText={setInput} />
      <Button title="Enviar al padre" onPress={sendMessage} />
    </View>
  );
}

// Bien - usando ID único
function UserList({ users }) {
  return (
    <FlatList
      data={users}
      keyExtractor={item => item.id} // Clave única
      renderItem={({ item }) => <Text>{item.name}</Text>}
    />
  );
}

// Mal - usando el índice (evitar si la lista puede cambiar)
function BadList({ items }) {
  return (
    <View>
      {items.map((item, index) => (
        <Text key={index}>{item}</Text> // No usar el índice
      ))}
    </View>
  );
}

// Bien - usando una propiedad única
function GoodList({ items }) {
  return (
    <View>
      {items.map(item => (
        <Text key={item.id}>{item.name}</Text>
      ))}
    </View>
  );
}

import { View, Text, StyleSheet } from 'react-native';

function StyledComponent() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Título</Text>
      <Text style={[styles.text, styles.bold]}>Múltiples estilos</Text>
      <Text style={{ color: 'red' }}>Estilo en línea</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
  text: {
    fontSize: 16,
    color: '#666',
  },
  bold: {
    fontWeight: 'bold',
  },
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row', // Diseño horizontal
    justifyContent: 'space-between', // Espacia los elementos uniformemente
    alignItems: 'center', // Centra verticalmente
  },
  box1: {
    flex: 1, // Ocupa 1/3 del espacio
    backgroundColor: 'red',
  },
  box2: {
    flex: 2, // Ocupa 2/3 del espacio
    backgroundColor: 'blue',
  },
});

function FlexExample() {
  return (
    <View style={styles.container}>
      <View style={styles.box1} />
      <View style={styles.box2} />
    </View>
  );
}

const styles = StyleSheet.create({
  box: {
    margin: 20,        // Espacio exterior
    padding: 10,       // Espacio interior
    backgroundColor: 'lightblue',
  },
  // Lados específicos
  specificBox: {
    marginTop: 10,
    marginBottom: 20,
    paddingLeft: 15,
    paddingRight: 15,
  },
  // Horizontal y vertical
  shorthand: {
    marginHorizontal: 20,  // izquierda y derecha
    marginVertical: 10,    // arriba y abajo
    paddingHorizontal: 15,
    paddingVertical: 5,
  },
});

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Pantalla de inicio</Text>
      <Button
        title="Ir a detalles"
        onPress={() => navigation.navigate('Details', { itemId: 42 })}
      />
    </View>
  );
}

function DetailsScreen({ route, navigation }) {
  const { itemId } = route.params;
  
  return (
    <View>
      <Text>Pantalla de detalles</Text>
      <Text>ID del elemento: {itemId}</Text>
      <Button title="Volver" onPress={() => navigation.goBack()} />
    </View>
  );
}

// Navegar con parámetros
function HomeScreen({ navigation }) {
  const user = { id: 1, name: 'John', email: '[email protected]' };
  
  return (
    <Button
      title="Ver perfil"
      onPress={() => navigation.navigate('Profile', { user })}
    />
  );
}

// Recibir parámetros
function ProfileScreen({ route }) {
  const { user } = route.params;
  
  return (
    <View>
      <Text>Nombre: {user.name}</Text>
      <Text>Email: {user.email}</Text>
    </View>
  );
}

// Actualizar parámetros
function EditScreen({ navigation }) {
  const updateUser = () => {
    navigation.setParams({ user: updatedUser });
  };
  
  return <Button title="Actualizar" onPress={updateUser} />;
}

function HomeScreen({ navigation }) {
  useEffect(() => {
    navigation.setOptions({
      title: 'Mi inicio',
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
      headerRight: () => (
        <Button title="Info" onPress={() => alert('Info')} />
      ),
    });
  }, [navigation]);
  
  return <View><Text>Inicio</Text></View>;
}

// O establecer en el navegador
<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{
    title: 'Mi inicio',
    headerStyle: { backgroundColor: '#f4511e' },
    headerTintColor: '#fff',
  }}
/>

import { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    fetchUsers();
  }, []);
  
  const fetchUsers = async () => {
    try {
      const response = await fetch('https://api.example.com/users');
      
      if (!response.ok) {
        throw new Error('La respuesta de la red no fue correcta');
      }
      
      const data = await response.json();
      setUsers(data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  
  if (loading) return <ActivityIndicator />;
  if (error) return <Text>Error: {error}</Text>;
  
  return (
    <FlatList
      data={users}
      renderItem={({ item }) => <Text>{item.name}</Text>}
      keyExtractor={item => item.id.toString()}
    />
  );
}

import AsyncStorage from '@react-native-async-storage/async-storage';

const savePreference = async (theme) => {
  await AsyncStorage.setItem('theme', theme);
};

const loadPreference = async () => {
  return await AsyncStorage.getItem('theme');
};

// ScrollView - renderiza todo
<ScrollView>
  {items.map(item => (
    <View key={item.id}>
      <Text>{item.name}</Text>
    </View>
  ))}
</ScrollView>

// FlatList - renderiza solo los elementos visibles
<FlatList
  data={items}
  renderItem={({ item }) => (
    <View>
      <Text>{item.name}</Text>
    </View>
  )}
  keyExtractor={item => item.id}
  // Optimizaciones de rendimiento
  initialNumToRender={10}
  maxToRenderPerBatch={10}
  windowSize={5}
/>

import { useState } from 'react';
import { View, TextInput, Button, Text } from 'react-native';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});
  
  const validate = () => {
    const newErrors = {};
    
    if (!email) {
      newErrors.email = 'El email es obligatorio';
    } else if (!/\S+@\S+\.\S+/.test(email)) {
      newErrors.email = 'El email no es válido';
    }
    
    if (!password) {
      newErrors.password = 'La contraseña es obligatoria';
    } else if (password.length < 6) {
      newErrors.password = 'La contraseña debe tener al menos 6 caracteres';
    }
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };
  
  const handleSubmit = () => {
    if (validate()) {
      console.log('Formulario enviado:', { email, password });
      // Enviar a la API
    }
  };
  
  return (
    <View>
      <TextInput
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoCapitalize="none"
      />
      {errors.email && <Text style={{ color: 'red' }}>{errors.email}</Text>}
      
      <TextInput
        placeholder="Contraseña"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      {errors.password && <Text style={{ color: 'red' }}>{errors.password}</Text>}
      
      <Button title="Iniciar sesión" onPress={handleSubmit} />
    </View>
  );
}