Questions et réponses d’entretien React Native Junior

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

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

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

function App() {
  return (
    <View style={styles.container}>
      <Text>Hello 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}>Bienvenue</Text>
      <Image source={{ uri: 'https://example.com/image.jpg' }} style={styles.image} />
      <TextInput placeholder="Entrez le nom" style={styles.input} />
      <TouchableOpacity style={styles.button} onPress={() => console.log('Pressed')}>
        <Text style={styles.buttonText}>Cliquez ici</Text>
      </TouchableOpacity>
    </View>
  );
}

// View - non défilable
<View style={{ height: 200 }}>
  <Text>Contenu 1</Text>
  <Text>Contenu 2</Text>
  {/* Si le contenu dépasse 200px, il est coupé */}
</View>

// ScrollView - défilable
<ScrollView style={{ height: 200 }}>
  <Text>Contenu 1</Text>
  <Text>Contenu 2</Text>
  <Text>Contenu 3</Text>
  {/* Peut défiler pour voir tout le contenu */}
</ScrollView>

// FlatList - efficace pour les grandes listes
<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(`Le compte est passé à : ${count}`);
    
    // Fonction de nettoyage
    return () => {
      console.log('Nettoyage');
    };
  }, [count]); // S'exécute lorsque le compte change
  
  return (
    <View>
      <Text>Compte : {count}</Text>
      <Button title="Incrémenter" onPress={() => setCount(count + 1)} />
    </View>
  );
}

import { useEffect, useState } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  // S'exécute une fois au montage
  useEffect(() => {
    console.log('Composant monté');
  }, []);
  
  // S'exécute lorsque userId change
  useEffect(() => {
    fetchUser(userId).then(data => setUser(data));
  }, [userId]);
  
  // S'exécute après chaque rendu (à éviter)
  useEffect(() => {
    console.log('Rendu');
  });
  
  // Fonction de nettoyage
  useEffect(() => {
    const subscription = subscribeToUpdates();
    
    return () => {
      subscription.unsubscribe(); // Nettoyage au démontage
    };
  }, []);
  
  return <Text>{user?.name}</Text>;
}

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

// Composant enfant
function ChildComponent({ title, count, onIncrement }) {
  // Impossible de modifier les props
  // title = "Nouveau titre"; // Erreur !
  
  return (
    <View>
      <Text>{title}</Text>
      <Text>Compte : {count}</Text>
      <Button title="Incrémenter" onPress={onIncrement} />
    </View>
  );
}

// Composant fonctionnel (moderne)
function Welcome({ name }) {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    console.log('Monté');
  }, []);
  
  return <Text>Bonjour, {name}</Text>;
}

// Composant de classe (hérité)
class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  componentDidMount() {
    console.log('Monté');
  }
  
  render() {
    return <Text>Bonjour, {this.props.name}</Text>;
  }
}

// Composant parent
function ParentComponent() {
  const [message, setMessage] = useState('');
  
  const handleMessageFromChild = (msg) => {
    setMessage(msg);
  };
  
  return (
    <View>
      <Text>Message de l'enfant : {message}</Text>
      <ChildComponent onSendMessage={handleMessageFromChild} />
    </View>
  );
}

// Composant enfant
function ChildComponent({ onSendMessage }) {
  const [input, setInput] = useState('');
  
  const sendMessage = () => {
    onSendMessage(input); // Appeler la fonction du parent
  };
  
  return (
    <View>
      <TextInput value={input} onChangeText={setInput} />
      <Button title="Envoyer au parent" onPress={sendMessage} />
    </View>
  );
}

// Bien - utiliser un ID unique
function UserList({ users }) {
  return (
    <FlatList
      data={users}
      keyExtractor={item => item.id} // Clé unique
      renderItem={({ item }) => <Text>{item.name}</Text>}
    />
  );
}

// Mauvais - utiliser l'index (à éviter si la liste peut changer)
function BadList({ items }) {
  return (
    <View>
      {items.map((item, index) => (
        <Text key={index}>{item}</Text> // N'utilisez pas l'index
      ))}
    </View>
  );
}

// Bien - utiliser une propriété unique
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}>Titre</Text>
      <Text style={[styles.text, styles.bold]}>Styles multiples</Text>
      <Text style={{ color: 'red' }}>Style en ligne</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', // Mise en page horizontale
    justifyContent: 'space-between', // Espacer les éléments uniformément
    alignItems: 'center', // Centrer verticalement
  },
  box1: {
    flex: 1, // Prend 1/3 de l'espace
    backgroundColor: 'red',
  },
  box2: {
    flex: 2, // Prend 2/3 de l'espace
    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,        // Espace extérieur
    padding: 10,       // Espace intérieur
    backgroundColor: 'lightblue',
  },
  // Côtés spécifiques
  specificBox: {
    marginTop: 10,
    marginBottom: 20,
    paddingLeft: 15,
    paddingRight: 15,
  },
  // Horizontal et vertical
  shorthand: {
    marginHorizontal: 20,  // gauche et droite
    marginVertical: 10,    // haut et bas
    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>Écran d'accueil</Text>
      <Button
        title="Aller aux détails"
        onPress={() => navigation.navigate('Details', { itemId: 42 })}
      />
    </View>
  );
}

function DetailsScreen({ route, navigation }) {
  const { itemId } = route.params;
  
  return (
    <View>
      <Text>Écran des détails</Text>
      <Text>ID de l'élément : {itemId}</Text>
      <Button title="Revenir en arrière" onPress={() => navigation.goBack()} />
    </View>
  );
}

// Naviguer avec des paramètres
function HomeScreen({ navigation }) {
  const user = { id: 1, name: 'John', email: '[email protected]' };
  
  return (
    <Button
      title="Voir le profil"
      onPress={() => navigation.navigate('Profile', { user })}
    />
  );
}

// Recevoir des paramètres
function ProfileScreen({ route }) {
  const { user } = route.params;
  
  return (
    <View>
      <Text>Nom : {user.name}</Text>
      <Text>Email : {user.email}</Text>
    </View>
  );
}

// Mettre à jour les paramètres
function EditScreen({ navigation }) {
  const updateUser = () => {
    navigation.setParams({ user: updatedUser });
  };
  
  return <Button title="Mettre à jour" onPress={updateUser} />;
}

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

// Ou définir dans le navigateur
<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{
    title: 'Mon accueil',
    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 réponse du réseau n'était pas ok');
      }
      
      const data = await response.json();
      setUsers(data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  
  if (loading) return <ActivityIndicator />;
  if (error) return <Text>Erreur : {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 - rend tout
<ScrollView>
  {items.map(item => (
    <View key={item.id}>
      <Text>{item.name}</Text>
    </View>
  ))}
</ScrollView>

// FlatList - ne rend que les éléments visibles
<FlatList
  data={items}
  renderItem={({ item }) => (
    <View>
      <Text>{item.name}</Text>
    </View>
  )}
  keyExtractor={item => item.id}
  // Optimisations des performances
  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 = 'L\'email est requis';
    } else if (!/\S+@\S+\.\S+/.test(email)) {
      newErrors.email = 'L\'email n\'est pas valide';
    }
    
    if (!password) {
      newErrors.password = 'Le mot de passe est requis';
    } else if (password.length < 6) {
      newErrors.password = 'Le mot de passe doit contenir au moins 6 caractères';
    }
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };
  
  const handleSubmit = () => {
    if (validate()) {
      console.log('Formulaire soumis :', { email, password });
      // Soumettre à l'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="Mot de passe"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      {errors.password && <Text style={{ color: 'red' }}>{errors.password}</Text>}
      
      <Button title="Se connecter" onPress={handleSubmit} />
    </View>
  );
}