Concepts front-end II

Niveau junior

1. Question : Qu'est-ce que CSS Grid ? Réponse : CSS Grid est un système de mise en page qui vous permet de créer des mises en page bidimensionnelles sur le Web. Il divise la page en lignes et colonnes, facilitant ainsi le positionnement des éléments. Par exemple:

   .grid-container {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-gap: 10px;
   }

1. Question : Qu'est-ce que l'événement "DOMContentLoaded" ? Réponse : L'événement DOMContentLoaded est déclenché lorsque le document HTML initial a été complètement chargé et analysé, sans attendre la fin du chargement des feuilles de style, des images et des sous-cadres. C'est utile pour exécuter des scripts une fois que le DOM est prêt :

   document.addEventListener("DOMContentLoaded", function() {
       console.log("DOM completamente carregado e analisado");
   });

1. Question : Qu'est-ce que la propriété "z-index" en CSS ? Réponse : La propriété z-index contrôle l'ordre d'empilement des éléments. Les éléments avec un z-index plus élevé sont affichés devant les éléments avec un z-index plus faible. Par exemple:

   .box1 {
       position: relative;
       z-index: 1;
   }
   .box2 {
       position: relative;
       z-index: 2; /* box2 será exibido na frente de box1 */
   }

1. Question : Qu'est-ce que "ceci" en JavaScript ? Réponse : Ceci en JavaScript fait référence au contexte d'exécution actuel. La valeur de this peut changer en fonction de la manière dont une fonction est appelée. Par exemple:

   const obj = {
       name: "John",
       greet: function() {
           console.log("Hello, " + this.name);
       }
   };
   obj.greet(); // "Hello, John"

1. Question : Que sont les sélecteurs CSS ? Réponse : Les sélecteurs CSS sont des modèles utilisés pour sélectionner les éléments que vous souhaitez styliser. Il existe plusieurs types de sélecteurs tels que les sélecteurs de classe, d'ID et de type. Par exemple:

   .className { /* Seleciona todos os elementos com a classe "className" */
       color: blue;
   }
   #idName { /* Seleciona o elemento com o ID "idName" */
       font-size: 20px;
   }

1. Question : Qu'est-ce que "localStorage" en JavaScript ? Réponse : localStorage est une API qui vous permet de stocker des données de manière persistante dans le navigateur de l'utilisateur. Les données stockées dans localStorage n'expirent pas et restent même après la fermeture du navigateur. Par exemple:

   localStorage.setItem("key", "value");
   const value = localStorage.getItem("key"); // "value"

1. Question : Qu'est-ce que le « bouillonnement d'événement » ?
   
   Réponse : Le « bullage d'événements » est un mécanisme de propagation d'événements dans lequel un événement démarre dans l'élément le plus interne et se propage vers les éléments externes. Par exemple, si un bouton à l'intérieur d'un

   est cliqué, l'événement click sera déclenché d'abord sur le bouton puis sur le

   .

2. Question : Qu'est-ce qu'une « fonction de rappel » ?
   
   Réponse : Une "fonction de rappel" est une fonction passée en argument à une autre fonction, qui peut être appelée ultérieurement. Par exemple :
   

   .grid-container {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-gap: 10px;
   }

1. Question : Qu'est-ce que le « responsive design » ? Réponse : Le « responsive design » est une approche de conception Web qui vise à créer des pages qui s'adaptent à différentes tailles d'écran et appareils. Ceci est souvent réalisé à l'aide de requêtes multimédias en CSS. Par exemple:

   document.addEventListener("DOMContentLoaded", function() {
       console.log("DOM completamente carregado e analisado");
   });

1. Question : Qu'est-ce que « fetch API » ?
   
   Réponse : L'API fetch est une interface moderne permettant d'effectuer des requêtes HTTP en JavaScript. Il renvoie une promesse qui résout la réponse à la demande. Par exemple :
   

      .box1 {
          position: relative;
          z-index: 1;
      }
      .box2 {
          position: relative;
          z-index: 2; /* box2 será exibido na frente de box1 */
      }
   

Niveau complet

1. Question : Qu'est-ce que "CORS" ?
   
   Réponse : CORS (Cross-Origin Resource Sharing) est un mécanisme de sécurité qui permet de demander des ressources restreintes sur une page Web à un domaine différent de celui qui a servi la page. Ceci est important pour protéger les données des utilisateurs.

2. Question : Qu'est-ce que le "DOM virtuel" dans React ?
   
   Réponse : Le "DOM virtuel" est une représentation légère du DOM réel. React utilise le DOM virtuel pour optimiser la mise à jour du DOM, lui permettant d'apporter des modifications plus efficacement en comparant le DOM virtuel au DOM réel et en appliquant uniquement les modifications nécessaires.

3. Question : Que sont les « accessoires » dans React ?
   
   Réponse : Les « accessoires » sont un mécanisme permettant de transmettre des données entre les composants dans React. Ils vous permettent de transmettre des données d'un composant parent à un composant enfant. Par exemple :
   

      const obj = {
          name: "John",
          greet: function() {
              console.log("Hello, " + this.name);
          }
      };
      obj.greet(); // "Hello, John"
   

4. Question : Qu'est-ce que « état » dans React ?
   
   Réponse : L'"état" est un objet qui représente la partie de l'application qui peut changer. Il est utilisé pour stocker les données qui affectent le rendu du composant. Par exemple :
   

      .className { /* Seleciona todos os elementos com a classe "className" */
          color: blue;
      }
      #idName { /* Seleciona o elemento com o ID "idName" */
          font-size: 20px;
      }
   

5. Question : Qu'est-ce que "React Router" ?
   
   Réponse : React Router est une bibliothèque qui permet la navigation entre différents composants dans une application React, facilitant la création d'applications monopage (SPA). Il vous permet de définir des itinéraires et de restituer des composants en fonction de l'URL.

6. Question : Que sont les « hooks » dans React ?
   
   Réponse : Les hooks sont des fonctions qui vous permettent d'utiliser l'état et d'autres ressources React dans des composants fonctionnels. useState et useEffect sont des exemples de hooks. Par exemple :
   

      .grid-container {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 10px;
      }
   

7. Question :Qu'est-ce que « Webpack » ?
   
   Réponse : Webpack est un wrapper de module pour les applications JavaScript. Il vous permet de regrouper JavaScript, CSS et d'autres fichiers de ressources dans un seul fichier ou plusieurs fichiers optimisés pour la production.

8. Question :Qu'est-ce que "Babel" ?
   
   Réponse : Babel est un transpilateur qui vous permet d'écrire du code JavaScript moderne (ES6) et de le convertir vers une version compatible avec les anciens navigateurs. Il est souvent utilisé en conjonction avec Webpack.

9. Question : Qu'est-ce que le « SASS » ?
   
   Réponse : SASS (Syntaxically Awesome Style Sheets) est un préprocesseur CSS qui vous permet d'utiliser des variables, des imbrications et des fonctions, rendant le CSS plus dynamique et plus facile à maintenir. Par exemple :
   

      document.addEventListener("DOMContentLoaded", function() {
          console.log("DOM completamente carregado e analisado");
      });
   

10. Question :Qu'est-ce que "AJAX" ?
    
    Réponse : AJAX (Asynchronous JavaScript and XML) est une technique qui permet de faire des requêtes asynchrones au serveur sans recharger la page. Ceci est souvent utilisé pour mettre à jour dynamiquement des parties d'une page Web.

Niveau supérieur

1. Question : Qu'est-ce que « l'architecture des microservices » ?
   
   Réponse : L'architecture des microservices est un style architectural qui structure une application comme un ensemble de petits services indépendants qui communiquent entre eux. Cela permet à différentes équipes de travailler plus efficacement sur différentes parties de l'application.

2. Question : Qu'est-ce que le « SSR » (Server-Side Rendering) ?
   
   Réponse : SSR est une technique où le rendu d'une application web se fait sur le serveur plutôt que sur le client. Cela peut améliorer les performances et le référencement car le contenu est envoyé au client déjà rendu.

3. Question : Qu'est-ce que le « CSR » (Client-Side Rendering) ?
   
   Réponse : Le CSR est une technique où le rendu d'une application web se fait sur le client, généralement à l'aide de JavaScript. Cela permet une expérience utilisateur plus interactive, mais peut avoir un impact négatif sur le référencement s'il n'est pas mis en œuvre correctement.

4. Question :Qu'est-ce que "Redux Saga" ?
   
   Réponse : Redux Saga est une bibliothèque qui facilite la gestion des effets secondaires dans les applications Redux. Il utilise des générateurs pour gérer les opérations asynchrones telles que les appels d'API de manière plus lisible et organisée.

5. Question : Qu'est-ce que « l'API contextuelle » dans React ?
   
   Réponse : L'API Context est un moyen de transmettre des données à travers l'arborescence des composants sans avoir à transmettre manuellement des accessoires à chaque niveau. Ceci est utile pour partager des données globales telles que des thèmes ou des informations sur les utilisateurs.

6. Question : Qu'est-ce que "TypeScript" ?
   
   Réponse : TypeScript est un sur-ensemble de JavaScript qui ajoute un typage statique au code. Il vous permet de définir des types de variables, de fonctions et d'objets, contribuant ainsi à éviter les erreurs d'exécution.

7. Question : Qu'est-ce que la « Progressive Web App » (PWA) ?
   
   Réponse : Les PWA sont des applications Web qui offrent une expérience native semblable à celle d'une application, notamment une prise en charge hors ligne, des notifications push et une installation sur l'écran d'accueil. Ils sont construits à l'aide des technologies Web standards.

8. Question : Qu'est-ce que "GraphQL" ?
   
   Réponse : GraphQL est un langage de requête pour les API qui permet aux clients de demander exactement les données dont ils ont besoin. Cela contraste avec les API REST, où les clients peuvent recevoir plus de données que nécessaire.

9. Question : Qu'est-ce que « l'accessibilité Web » ?
   
   Réponse : L'accessibilité du Web fait référence à la pratique consistant à rendre les applications Web utilisables par les personnes handicapées. Cela inclut l'utilisation de balises sémantiques, d'attributs ARIA et la garantie que le contenu est navigable au clavier.

10. Question : Qu'est-ce que le « Service Worker » ?
    
    Réponse : Un Service Worker est un script que le navigateur exécute en arrière-plan, distinct d'une page Web, permettant des fonctionnalités telles que la mise en cache, les notifications push et la synchronisation en arrière-plan. C’est essentiel pour construire des PWA.

Bibliographie

Les informations présentées ont été extraites et adaptées de plusieurs sources fiables, notamment :

1. Glassdoor - Un site où les gens partagent leurs expériences d'entretien et leurs questions courantes.

   • Porte vitrée

2. MDN Web Docs - Documentation complète sur HTML, CSS et JavaScript.

   • Documents Web MDN

3. JavaScript.info - Un guide moderne de JavaScript, couvrant tout, des principes fondamentaux aux sujets avancés.

   • JavaScript.info

4. Documentation React - La documentation officielle de React, qui fournit des informations détaillées sur la bibliothèque.

   • Documentation React

5. CSS-Tricks - Un site Web avec des conseils et des tutoriels sur CSS et le développement front-end.

   • Astuces CSS

Ces sources sont largement reconnues dans la communauté du développement Web et constituent d'excellentes ressources pour approfondir les connaissances front-end.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!