Comment fonctionnent les composants et JSX dans React Native?

Question

Accepted Answer

React Native utilise **le modèle de composants de React et JSX** — en construisant des UIs à partir de **composants** réutilisables qui retournent du JSX. Si vous connaissez React pour le web, cela s'applique directement; la principale différence est l'utilisation de composants natifs à la place des éléments HTML. ## Composants et JSX ```jsx // a functional component returns JSX describing the UI (using RN core components) function Greeting({ name }) { // receives props return ( Hello, {name}! {/* JSX with an embedded expression */} ); } // compose components (like React for web) function App() { return ( {/* reuse the component */} ); } ``` Les composants sont des éléments d'UI réutilisables (des fonctions retournant du JSX); ils acceptent des **props** (entrées) et se composent en arbres — exactement comme React pour le web, mais avec des composants natifs. ## Props et état (concepts React) ```jsx import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // STATE (useState hook) return ( setCount(count + 1)}> Count: {count} {/* re-renders when state changes */} ); } ``` Les **props** passent des données dans les composants; l'**état** (via `useState`) contient les données changeantes qui déclenchent les re-rendus — le même modèle React que sur le web. ## Les connaissances React se transfèrent ```text ✓ Components, JSX, props, state, HOOKS (useState, useEffect, etc.), composition, keys — all the same as React for web ✓ The main difference: native components (View/Text) instead of HTML; styling differs → React developers can apply most of their knowledge directly to React Native. ``` ## Pourquoi c'est important Comprendre comment fonctionnent les composants et JSX dans React Native est fondamental car **React Native est construit sur le modèle de composants de React**, donc le maîtriser est essentiel, et un avantage majeur est que **les connaissances React se transfèrent directement**. Les composants (des éléments d'UI réutilisables qui retournent du JSX, acceptent des props en entrée, et se composent en arbres) et JSX (la syntaxe décrivant l'UI avec des expressions intégrées) sont la base du développement React Native — exactement comme React pour le web. Comprendre les **props** (passer des données dans les composants) et l'**état** (via le hook `useState`, contenant des données changeantes qui déclenchent les re-rendus) est essentiel car ces concepts React sont la façon dont les composants React Native reçoivent des données et gèrent les changements — identique au React web. L'idée clé est que **les connaissances React se transfèrent**: les composants, JSX, props, état, hooks (useState, useEffect, etc.), composition, et clés fonctionnent tous de la même manière que dans React pour le web, les principales différences étant l'utilisation de composants natifs (View, Text) à la place du HTML et un style différent. Cette transférabilité est une raison majeure pour laquelle React Native est attrayant — le large pool de développeurs React/web peut appliquer la plupart de leurs connaissances existantes directement à la construction d'applications mobiles natives, avec une courbe d'apprentissage relativement faible axée sur les composants natifs et les spécificités de la plateforme. Puisque React Native est fondamentalement React (composants, JSX, props, état, hooks) appliqué à l'UI natif, et que comprendre ce modèle est essentiel pour construire des applications React Native tout en reconnaissant que les connaissances React se transfèrent directement (un avantage clé), comprendre les composants et JSX dans React Native est une connaissance essentielle et fondamentale — le modèle de programmation fondamental de React Native, nécessaire pour construire des applications, et particulièrement précieux pour mettre en évidence comment les compétences React/web s'appliquent directement au développement mobile React Native.