Questions d'entretien pour développeur React Native Junior : Guide complet

Introduction

React Native permet aux développeurs de créer des applications mobiles natives en utilisant JavaScript et React. Avec une seule base de code, vous pouvez créer des applications pour iOS et Android, ce qui en fait un choix puissant pour le développement mobile multiplateforme.

Ce guide couvre les questions d'entretien essentielles pour les développeurs React Native Juniors. Nous explorons les fondamentaux de React, les composants, les hooks, la navigation, la gestion d'état et les concepts spécifiques au mobile pour vous aider à vous préparer à votre premier rôle de développeur React Native.

Fondamentaux de React (6 Questions)

1. Qu'est-ce que React Native et en quoi diffère-t-il de React ?

Réponse :

React : Bibliothèque JavaScript pour la construction d'interfaces utilisateur web
React Native : Framework pour la construction d'applications mobiles natives en utilisant React
Différences clés :
- React Native effectue le rendu vers des composants natifs (pas le DOM)
- Utilise les API natives au lieu des API web
- Approche de style différente (pas de CSS, utilise StyleSheet)
- Code spécifique à la plateforme pour iOS et Android

// 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',
  },
});

Rareté : Très courant Difficulté : Facile

2. Quels sont les composants principaux de React Native ?

Réponse : React Native fournit des composants intégrés qui correspondent aux éléments d'interface utilisateur natifs :

View : Composant conteneur (comme div dans le web)
Text : Afficher du texte (tout le texte doit être dans un composant Text)
Image : Afficher des images
ScrollView : Conteneur défilable
TextInput : Champ de saisie de texte
TouchableOpacity/Pressable : Éléments tactiles
FlatList : Rendu de liste efficace
Button : Composant bouton de base

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>
  );
}

Rareté : Très courant Difficulté : Facile

3. Expliquez la différence entre `View` et `ScrollView`.

Réponse :

View : Conteneur statique. Le contenu au-delà des limites de l'écran n'est pas défilable.
ScrollView : Conteneur défilable. Rend tous les enfants en même temps (peut être gourmand en mémoire pour les grandes listes).
Quand utiliser :
- View : Pour les mises en page qui tiennent à l'écran
- ScrollView : Pour de petites quantités de contenu défilable
- FlatList : Pour les grandes listes (ne rend que les éléments visibles)

// 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}
/>

Rareté : Très courant Difficulté : Facile

4. Que sont les Hooks React et lesquels sont les plus couramment utilisés ?

Réponse : Les Hooks sont des fonctions qui vous permettent d'utiliser l'état et les fonctionnalités du cycle de vie dans les composants fonctionnels.

Hooks courants :
- useState : Gérer l'état du composant
- useEffect : Gérer les effets secondaires (récupération de données, abonnements)
- useContext : Accéder aux valeurs de contexte
- useCallback : Mémoriser les fonctions
- useMemo : Mémoriser les calculs coûteux
- useRef : Référencer les éléments DOM ou conserver les valeurs

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>
  );
}

Rareté : Très courant Difficulté : Facile

5. Expliquez le hook `useEffect` et son tableau de dépendances.

Réponse : useEffect exécute des effets secondaires après le rendu. Le tableau de dépendances contrôle quand il s'exécute :

Pas de tableau : S'exécute après chaque rendu
Tableau vide [] : S'exécute une fois après le rendu initial
Avec des dépendances [dep1, dep2] : S'exécute lorsque les dépendances changent

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>;
}

Rareté : Très courant Difficulté : Moyenne

6. Qu'est-ce que le DOM virtuel et comment React l'utilise-t-il ?

Réponse : Le DOM virtuel est une représentation JavaScript légère du DOM réel.

Processus :
1. Lorsque l'état change, React crée un nouvel arbre DOM virtuel
2. Le compare avec le DOM virtuel précédent (différenciation)
3. Calcule les modifications minimales nécessaires
4. Met à jour uniquement les parties modifiées dans le DOM réel
Avantages : Mises à jour efficaces, meilleures performances

Rareté : Courant Difficulté : Facile

Composants & Props (4 Questions)

7. Quelle est la différence entre Props et State ?

Réponse :

Props :
- Passées du parent à l'enfant
- En lecture seule (immuables)
- Utilisées pour la configuration du composant
State :
- Géré au sein du composant
- Mutable (peut être modifié)
- Utilisé pour les données dynamiques

// 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>
  );
}

Rareté : Très courant Difficulté : Facile

8. Que sont les composants fonctionnels par rapport aux composants de classe ?

Réponse :

Composants fonctionnels :
- Syntaxe plus simple
- Utiliser des hooks pour l'état et le cycle de vie
- Préférés dans React moderne
Composants de classe :
- Approche plus ancienne
- Utiliser this.state et les méthodes de cycle de vie
- Toujours pris en charge, mais moins courant

// 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>;
  }
}

Rareté : Courant Difficulté : Facile

9. Comment transmettez-vous des données du composant enfant au composant parent ?

Réponse : Utilisez des fonctions de rappel passées en tant que props.

// 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>
  );
}

Rareté : Très courant Difficulté : Facile

10. Qu'est-ce que la prop `key` et pourquoi est-elle importante ?

Réponse : La prop key aide React à identifier quels éléments ont été modifiés, ajoutés ou supprimés dans les listes.

Objectif : Optimiser les performances de rendu
Exigences : Doit être unique parmi les frères et sœurs, stable (n'utilisez pas l'index si la liste peut changer)

// 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>
  );
}

Rareté : Très courant Difficulté : Facile

Style & Mise en page (3 Questions)

11. Comment styliser les composants dans React Native ?

Réponse : React Native utilise des objets JavaScript pour le style, pas du CSS.

API StyleSheet : Créer des styles optimisés
Styles en ligne : Objets de style directs (moins performants)
Flexbox : Système de mise en page par défaut

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',
  },
});

Rareté : Très courant Difficulté : Facile

12. Expliquez Flexbox dans React Native.

Réponse : Flexbox est le principal système de mise en page dans React Native.

Propriétés principales :
- flexDirection : row ou column (par défaut : column)
- justifyContent : Aligner le long de l'axe principal
- alignItems : Aligner le long de l'axe transversal
- flex : Dimensionnement proportionnel

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>
  );
}

Rareté : Très courant Difficulté : Moyenne

13. Quelle est la différence entre `margin` et `padding` ?

Réponse :

Padding : Espace à l'intérieur du composant (entre le contenu et la bordure)
Margin : Espace à l'extérieur du composant (entre le composant et les voisins)

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,
  },
});

Rareté : Courant Difficulté : Facile

Réponse : React Navigation est la bibliothèque de navigation la plus populaire pour React Native.

Types :
- Stack Navigator : Pile d'écrans (push/pop)
- Tab Navigator : Onglets inférieurs
- Drawer Navigator : Menu latéral

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>
  );
}

Rareté : Très courant Difficulté : Moyenne

15. Comment passez-vous des paramètres entre les écrans ?

Réponse : Utilisez la fonction navigate avec un deuxième paramètre pour les données.

// 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} />;
}

Rareté : Très courant Difficulté : Facile

Réponse : Les options de navigation contrôlent l'apparence et le comportement de l'écran.

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',
  }}
/>

Rareté : Courant Difficulté : Facile

Données & Stockage (4 Questions)

17. Comment récupérez-vous des données à partir d'une API dans React Native ?

Réponse : Utilisez l'API fetch ou des bibliothèques comme Axios.

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()}
    />
  );
}

Rareté : Très courant Difficulté : Moyenne

18. Qu'est-ce qu'AsyncStorage et comment l'utilisez-vous ?

Réponse : AsyncStorage est un système de stockage clé-valeur simple et asynchrone pour React Native.

Cas d'utilisation : Préférences de l'utilisateur, jetons, petites données
Pas pour : Les grands ensembles de données, les requêtes complexes (utilisez plutôt SQLite)

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

// Enregistrer les données
const saveData = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, value);
  } catch (error) {
    console.error('Erreur lors de l\'enregistrement des données :', error);
  }
};

// Enregistrer l'objet
const saveUser = async (user) => {
  try {
    const jsonValue = JSON.stringify(user);
    await AsyncStorage.setItem('user', jsonValue);
  } catch (error) {
    console.error('Erreur lors de l\'enregistrement de l\'utilisateur :', error);
  }
};

// Lire les données
const getData = async (key) => {
  try {
    const value = await AsyncStorage.getItem(key);
    return value !== null ? value : null;
  } catch (error) {
    console.error('Erreur lors de la lecture des données :', error);
  }
};

// Lire l'objet
const getUser = async () => {
  try {
    const jsonValue = await AsyncStorage.getItem('user');
    return jsonValue != null ? JSON.parse(jsonValue) : null;
  } catch (error) {
    console.error('Erreur lors de la lecture de l\'utilisateur :', error);
  }
};

// Supprimer les données
const removeData = async (key) => {
  try {
    await AsyncStorage.removeItem(key);
  } catch (error) {
    console.error('Erreur lors de la suppression des données :', error);
  }
};

// Effacer tout
const clearAll = async () => {
  try {
    await AsyncStorage.clear();
  } catch (error) {
    console.error('Erreur lors de l\'effacement du stockage :', error);
  }
};

Rareté : Très courant Difficulté : Facile

19. Quelle est la différence entre `FlatList` et `ScrollView` ?

Réponse :

ScrollView :
- Rend tous les enfants en même temps
- Bon pour les petites listes
- Gourmand en mémoire pour les grandes listes
FlatList :
- Ne rend que les éléments visibles (chargement paresseux)
- Efficace pour les grandes listes
- Optimisations intégrées

// 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}
/>

Rareté : Très courant Difficulté : Facile

20. Comment gérez-vous les formulaires et la saisie utilisateur ?

Réponse : Utilisez des composants contrôlés avec l'état.

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>
  );
}

Rareté : Très courant Difficulté : Moyenne

Table des matières

Questions d'entretien pour développeur React Native Junior : Guide complet

Introduction

Fondamentaux de React (6 Questions)

1. Qu'est-ce que React Native et en quoi diffère-t-il de React ?

2. Quels sont les composants principaux de React Native ?

3. Expliquez la différence entre `View` et `ScrollView`.

4. Que sont les Hooks React et lesquels sont les plus couramment utilisés ?

5. Expliquez le hook `useEffect` et son tableau de dépendances.

6. Qu'est-ce que le DOM virtuel et comment React l'utilise-t-il ?

Composants & Props (4 Questions)

7. Quelle est la différence entre Props et State ?

8. Que sont les composants fonctionnels par rapport aux composants de classe ?

9. Comment transmettez-vous des données du composant enfant au composant parent ?

10. Qu'est-ce que la prop `key` et pourquoi est-elle importante ?

Style & Mise en page (3 Questions)

11. Comment styliser les composants dans React Native ?

12. Expliquez Flexbox dans React Native.

13. Quelle est la différence entre `margin` et `padding` ?

Navigation (3 Questions)

14. Qu'est-ce que React Navigation et comment l'utilisez-vous ?

15. Comment passez-vous des paramètres entre les écrans ?

16. Quelles sont les options de navigation et comment personnalisez-vous les en-têtes ?

Données & Stockage (4 Questions)

17. Comment récupérez-vous des données à partir d'une API dans React Native ?

18. Qu'est-ce qu'AsyncStorage et comment l'utilisez-vous ?

19. Quelle est la différence entre `FlatList` et `ScrollView` ?

20. Comment gérez-vous les formulaires et la saisie utilisateur ?

Créez un CV qui Vous Fait Embaucher 60% Plus Vite

Partager cet article

Conseils de carrière hebdomadaires qui fonctionnent vraiment

Conseils de carrière hebdomadaires qui fonctionnent vraiment

Articles Connexes

Questions d'entretien pour développeur mobile junior (Android) : Guide complet

Questions d'entretien pour Développeur Backend Junior (Node.js) : Guide Complet

Questions d'entretien pour Développeur Backend Junior (Python) : Guide complet

Créez un CV qui Vous Fait Embaucher 60% Plus Vite

Partager cet article

Faites Compter Vos 6 Secondes

Table des matières

Introduction

Fondamentaux de React (6 Questions)

1. Qu'est-ce que React Native et en quoi diffère-t-il de React ?

2. Quels sont les composants principaux de React Native ?

3. Expliquez la différence entre View et ScrollView.

4. Que sont les Hooks React et lesquels sont les plus couramment utilisés ?

5. Expliquez le hook useEffect et son tableau de dépendances.

6. Qu'est-ce que le DOM virtuel et comment React l'utilise-t-il ?

Composants & Props (4 Questions)

7. Quelle est la différence entre Props et State ?

8. Que sont les composants fonctionnels par rapport aux composants de classe ?

9. Comment transmettez-vous des données du composant enfant au composant parent ?

10. Qu'est-ce que la prop key et pourquoi est-elle importante ?

Style & Mise en page (3 Questions)

11. Comment styliser les composants dans React Native ?

12. Expliquez Flexbox dans React Native.

13. Quelle est la différence entre margin et padding ?

Navigation (3 Questions)

14. Qu'est-ce que React Navigation et comment l'utilisez-vous ?

15. Comment passez-vous des paramètres entre les écrans ?

16. Quelles sont les options de navigation et comment personnalisez-vous les en-têtes ?

Données & Stockage (4 Questions)

17. Comment récupérez-vous des données à partir d'une API dans React Native ?

18. Qu'est-ce qu'AsyncStorage et comment l'utilisez-vous ?

19. Quelle est la différence entre FlatList et ScrollView ?

20. Comment gérez-vous les formulaires et la saisie utilisateur ?

Créez un CV qui Vous Fait Embaucher 60% Plus Vite

Partager cet article

Conseils de carrière hebdomadaires qui fonctionnent vraiment

Conseils de carrière hebdomadaires qui fonctionnent vraiment

Articles Connexes

Questions d'entretien pour développeur mobile junior (Android) : Guide complet

Questions d'entretien pour Développeur Backend Junior (Node.js) : Guide Complet

Questions d'entretien pour Développeur Backend Junior (Python) : Guide complet

Créez un CV qui Vous Fait Embaucher 60% Plus Vite

Partager cet article

Faites Compter Vos 6 Secondes

3. Expliquez la différence entre `View` et `ScrollView`.

5. Expliquez le hook `useEffect` et son tableau de dépendances.

10. Qu'est-ce que la prop `key` et pourquoi est-elle importante ?

13. Quelle est la différence entre `margin` et `padding` ?

19. Quelle est la différence entre `FlatList` et `ScrollView` ?