# Fondamentaux React (React / Next.js)

> JSX, composants, props, state, événements, rendu conditionnel, listes & keys

- 20 questions d'entretien
- Junior
- [Questions d'entretien: React / Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien.md)

## 1. Qu'est-ce que JSX dans React ?

**Réponse**

JSX est une extension de syntaxe JavaScript qui permet d'écrire du markup ressemblant à du HTML directement dans le code JavaScript. Il est transformé en appels de fonction React.createElement par Babel lors de la compilation. Utiliser JSX rend le code plus lisible et permet de détecter des erreurs au moment de la compilation grâce au typage, tout en combinant la puissance de JavaScript avec une syntaxe familière.

## 2. Quelle syntaxe est correcte pour utiliser une expression JavaScript dans JSX ?

**Réponse**

Les accolades simples permettent d'intégrer n'importe quelle expression JavaScript valide dans JSX, comme des variables, des fonctions ou des calculs. Cette syntaxe crée une délimitation claire entre le markup JSX et le code JavaScript dynamique. Les doubles accolades sont utilisées pour les objets de style inline, les parenthèses pour grouper du JSX multiligne, et les crochets pour les tableaux JavaScript.

## 3. Quelle est la différence principale entre className en JSX et class en HTML ?

**Réponse**

JSX utilise className au lieu de class car class est un mot réservé en JavaScript pour déclarer des classes ES6. Puisque JSX est transformé en JavaScript, utiliser class créerait un conflit de syntaxe. De même, for devient htmlFor, et les événements utilisent la camelCase. Cette convention permet à JSX de rester du JavaScript valide tout en offrant une syntaxe similaire au HTML.

## 17 questions supplémentaires disponibles

- Comment écrire un commentaire dans du code JSX ?
- Qu'est-ce qu'un composant fonctionnel en React ?

S'inscrire gratuitement: https://sharpskill.dev/fr/login

## Autres sujets d'entretien React / Next.js

- [Les bases de JavaScript](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/javascript-essentials.md): 25 questions, Junior
- [React Hooks](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-hooks.md): 22 questions, Junior
- [Cycle de vie des composants](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/component-lifecycle.md): 18 questions, Junior
- [React Router](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-router.md): 20 questions, Junior
- [Gestion d'état avec Context](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/state-management-context.md): 18 questions, Junior
- [Formulaires & Composants contrôlés](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/forms-controlled-components.md): 20 questions, Confirmé
- [Fetching de données & API](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/fetching-data-api.md): 20 questions, Confirmé
- [React Query (TanStack Query)](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-query-tanstack.md): 20 questions, Confirmé
- [Styling & CSS-in-JS](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/styling-css-in-js.md): 18 questions, Confirmé
- [Fondamentaux Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-fundamentals.md): 25 questions, Confirmé
- [TypeScript avec React](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/typescript-react.md): 20 questions, Confirmé
- [Data Fetching Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-data-fetching.md): 24 questions, Confirmé
- [Server Actions Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-server-actions.md): 20 questions, Confirmé
- [Routing & Navigation Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-routing-navigation.md): 22 questions, Confirmé
- [API Routes Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-api-routes.md): 20 questions, Confirmé
- [Metadata & SEO Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-metadata-seo.md): 18 questions, Confirmé
- [Middleware & Auth Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-middleware-auth.md): 22 questions, Confirmé
- [Testing React](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-testing.md): 20 questions, Confirmé
- [Zustand State Management](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/zustand-state-management.md): 18 questions, Confirmé
- [Optimisation Performance React](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-performance-optimization.md): 22 questions, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-error-boundaries.md): 18 questions, Senior
- [Advanced React Patterns](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/advanced-react-patterns.md): 20 questions, Senior
- [Fonctionnalités avancées Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-advanced-features.md): 24 questions, Senior
- [Déploiement & Production Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-deployment-production.md): 20 questions, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-architecture-patterns.md): 22 questions, Senior
- [React Server Components](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-server-components.md): 26 questions, Senior
- [Internationalisation Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-internationalization.md): 20 questions, Senior
- [Sécurité & Best Practices React](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-security-best-practices.md): 22 questions, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-fundamentals