Créer son premier Hello World avec React Native

Conformément aux anciennes traditions de notre peuple de développeur, nous devons d’abord construire une application qui ne fait rien d’autre que de dire « Hello World! »

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

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
    </View>
  )
}
export default monApp;

Que se passe-t-il ici ?

Tout d’abord, nous devons importer React pour pouvoir utiliser JSX, qui sera ensuite transformé en composants natifs de chaque plateforme.
A la ligne 2, nous importons les composants Text et View de react-native.
Ensuite, nous définissons la fonction HelloWorldApp, qui est un composant fonctionnel et se comporte de la même manière que dans React pour le web. Cette fonction renvoie un composant View avec quelques styles et un Text comme enfant.

Le composant Text nous permet de rendre un texte, tandis que le composant View rend un conteneur. Ce conteneur a plusieurs styles appliqués, analysons ce que fait chacun d’eux.

Le premier style que nous trouvons est flex : 1, l’accessoire flex va définir comment vos éléments vont « remplir » l’espace disponible le long de votre axe principal. Comme nous n’avons qu’un seul conteneur, il occupera tout l’espace disponible du composant parent. Dans le cas présent, il s’agit du seul composant, il occupera donc tout l’espace disponible à l’écran.

Le style suivant est justifyContent : « center ». Cela aligne les enfants d’un conteneur au centre de l’axe principal du conteneur. Enfin, nous avons alignItems : « center », qui aligne les enfants d’un conteneur au centre de l’axe transversal du conteneur.

Certains des éléments présentés ici peuvent ne pas ressembler à du JavaScript pour vous. Ne paniquez pas. C’est l’avenir.

Tout d’abord, ES2015 (également connu sous le nom de ES6) est un ensemble d’améliorations apportées à JavaScript qui fait désormais partie de la norme officielle, mais qui n’est pas encore pris en charge par tous les navigateurs, de sorte qu’il n’est souvent pas encore utilisé dans le développement Web. React Native est livré avec le support ES2015, vous pouvez donc utiliser ces éléments sans vous soucier de la compatibilité. import, export, const et from dans l’exemple ci-dessus sont tous des fonctionnalités ES2015. Si vous n’êtes pas familier avec l’ES2015, vous pouvez probablement l’apprendre en lisant des exemples de code comme celui de ce tutoriel. Si vous le souhaitez, cette page propose un bon aperçu des fonctionnalités de l’ES2015.

L’autre élément inhabituel dans cet exemple de code est Hello world!. Il s’agit de JSX, une syntaxe permettant d’intégrer du XML dans JavaScript. De nombreux frameworks utilisent un langage de templating spécialisé qui vous permet d’intégrer du code à l’intérieur du langage de balisage. Dans React, c’est l’inverse. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like or , you use React components. In this case, is a Core Component that displays some text and View is like the or .

Composants

Ce code définit HelloWorldApp, un nouveau composant. Lorsque vous construisez une application React Native, vous allez souvent créer de nouveaux composants. Tout ce que vous voyez à l’écran est une sorte de composant.

Props

La plupart des composants peuvent être personnalisés lors de leur création, avec différents paramètres. Ces paramètres de création sont appelés « props ».

Vos propres composants peuvent également utiliser des props. Cela vous permet de créer un seul composant qui sera utilisé à plusieurs endroits différents de votre application, avec des propriétés légèrement différentes à chaque endroit. Faites référence à props.VOTRE_PROP_NAME dans vos composants fonctionnels ou à this.props.VOTRE_PROP_NAME dans vos composants de classe. Voici un exemple :

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

const styles = StyleSheet.create({
  center: {
    alignItems: 'center'
  }
})

const Greeting = (props) => {
  return (
    <View style={styles.center}>
      <Text>Hello {props.name}!</Text>
    </View>
  );
}

const LotsOfGreetings = () => {
  return (
    <View style={[styles.center, {top: 50}]}>
      <Greeting name='Rexxar' />
      <Greeting name='Jaina' />
      <Greeting name='Valeera' />
    </View>
  );
}

export default UneListe;

L’utilisation de name comme prop nous permet de personnaliser le composant Greeting, de sorte que nous pouvons réutiliser ce composant pour chacun de nos messages de bienvenue. Cet exemple utilise également le composant Greeting en JSX. La possibilité de faire cela est ce qui rend React si cool.

L’autre nouveauté ici est le composant View. Un View est utile comme conteneur pour d’autres composants, pour aider à contrôler le style et la mise en page.

Avec des props et les composants de base Text, Image et View, vous pouvez construire une grande variété d’écrans statiques. Pour savoir comment faire évoluer votre application dans le temps, vous devez vous familiariser avec l’état.

Les états : State

Contrairement aux props qui sont en lecture seule et ne doivent pas être modifiés, l’état permet aux composants React de modifier leur sortie au fil du temps en réponse aux actions de l’utilisateur, aux réponses du réseau et à tout autre élément.

Quelle est la différence entre state et props dans React ?
Dans un composant React, les props sont les variables que l’on passe d’un composant parent à un composant enfant. De même, les state sont également des variables, à la différence qu’elles ne sont pas transmises en tant que paramètres, mais que le composant les initialise et les gère en interne.

Y a-t-il des différences entre React et React Native pour gérer l’état ?

// ReactJS Counter Example using Hooks!

import React, { useState } from 'react';



const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div className="container">
      <p>You clicked {count} times</p>
      <button
        onClick={() => setCount(count + 1)}>
        Click me!
      </button>
    </div>
  );
};


// CSS
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

// React Native Counter Example using Hooks!

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

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text>You clicked {count} times</Text>
      <Button
        onPress={() => setCount(count + 1)}
        title="Click me!"
      />
    </View>
  );
};

// React Native Styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

Comme montré ci-dessus, il n’y a pas de différence dans la gestion de l’état entre React et React Native. Vous pouvez utiliser l’état de vos composants à la fois dans les classes et dans les composants fonctionnels en utilisant des hooks !

Dans l’exemple suivant, nous allons montrer le même exemple de compteur ci-dessus en utilisant des classes.

import React, { Component } from 'react'
import {
  StyleSheet,
  TouchableOpacity,
  Text,
  View,
} from 'react-native'

class App extends Component {
  state = {
    count: 0
  }

  onPress = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

 render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
         style={styles.button}
         onPress={this.onPress}
        >
         <Text>Click me</Text>
        </TouchableOpacity>
        <View>
          <Text>
            You clicked { this.state.count } times
          </Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
    marginBottom: 10
  }
})

export default monApp;