Les composants en React Native

Le component (composant en français) est le concept clé de React.

Les components permettent de deviser l’interface en des composants indépendants et réutilisables.

en React Native il existe deux types de components:

React Native Component

appelé tout court component, il s’agit des éléments graphiques que l’on trouve dans une application React Native comme par exemple: button,Text, Input, View, ScrollView etc…

Custom Component

c’est un template qui regroupe plusieurs react native components.

Imagions par exemple qu’on veut créer une vue pour l’interface d’accueil.

cette vue contiendra : un titre principal, et une liste d’items et un input pour la recherche des items entourés tous par une vue.

pour utiliser cette vue dans un autre component on va crée un component Custom que l’on va appeler Home qui sera réutilisable dans tous les components.

Comment créer un Custom Component ?

il y a deux façons de créer un custom component en React Native : soit on crée un composant à base de fonction ou un composant à base de classe, et dans les deux on doit importer la librairie React .

import React from ‘react’

dans un composant à base de classe on a besoin d’hériter de React.Component.

cette classe contient la méthode render(), son but est de retourner des éléments graphique.

en React Native on utilise les imports nommés pour importer les React Native components.

pour les custom components on utilise l’export par défaut.

React Native utilise les composants mobiles natifs pour différencier une Application android à une Application ios.

c’est à dire si on utilise un Button , React Native va le traduire en android.widget.button en Android et en UIButton en Ios.

de cette façon notre application deviendra de plus en plus unique et de plus en plus performante.