[React native] Créer un composant facilement

Initialisation du projet react native

Pour créer un projet, nous avons besoin de le commande ‘create-react-native-app’ disponible grace à npm.

Une fois le projet créé et lancé, on appuis sur ‘a’ pour lancer l’application sur l’émulateur Android.

Créé un composant avec react native

Pour créer notre premier composant avec react native, nous allons créer un dossier « components » à la racine de notre projet. Dans ce dossier, nous créer un fichier monComposant.js qui correspondra à notre composant.

On lui donne l’architecture de base :

import React from 'react';
import { Text, View } from 'react-native';

export default class MonComposant extends React.Component {
  render() {
    return (
      <View>
      </View>
    );
  }
}

Utiliser notre premier composant

Pour utiliser notre composant, on se rend dans le fichier App.js à la racine de notre projet. Ensuite, on va importer notre composant :

import MonComposant from './components/monComposant';

et pour l’utiliser, on va rendre cette vue :

<View style={styles.container}>
  <MonComposant data={this.mesData}/>
</View>