React Native – Le point de vue d’un développeur Web sur le passage au mobile / Blogs / Perficient

J’ai travaillé avec Réagir au Web pour les 6 dernières années de ma carrière de développeur. Je suis très familier et à l’aise dans cet espace et j’aime travailler avec React. Cependant, on m’a présenté l’opportunité de me lancer dans le développement mobile vers la fin de 2023. N’ayant aucune expérience professionnelle en développement mobile sur des projets antérieurs, je savais que je devais me lancer rapidement si je voulais pouvoir saisir cette opportunité. J’avais hâte de relever le défi !

J’ai beaucoup à apprendre, mais je voulais partager certaines des choses intéressantes que j’ai apprises en cours de route. Je voulais aussi partager cela avec une perspective puisque je suis déjà à l’aise avec React. Combien y a-t-il à apprendre pour être un contributeur efficace sur un Réagir natif projet?

Composants! C’est toujours React.

Vous avez des composants fonctionnels qui renvoient des éléments. Ces composants ont accès aux mêmes hooks que vous connaissez (useState, useEffect etc.), ce qui signifie que vous avez la même gestion/rendu d’état. Les « trucs » que j’ai mentionnés ci-dessus sont JSX, une syntaxe familière. Vous pouvez également tirer parti Redux pour l’état global de l’application. Toutes les choses que j’ai mentionnées disposent également d’une documentation très complète et fiable. Mettre tout cela sur la table lorsque vous passez à React-Native vous permet d’atteindre plus de 50 % du chemin.

Il n’y a pas de DOM. Mais ça va! Parce que de toute façon, vous utilisiez déjà JSX au lieu de HTML. Le JSX que vous utilisez pour React Native est presque identique, sauf sans éléments HTML.

Exemple d’extrait de code (Source : https://reactnative.dev/docs/tutorial)

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',
  },
});

Il n’y a que 2 choses dans l’exemple ci-dessus qui diffèrent du Web :

1. Composants de base natifs uniques de React
2. Les styles sont créés avec une syntaxe différente

De plus, il n’y a pas non plus de prise en charge intégrée au navigateur (pas d’onglet console ou réseau). Ainsi, le débogage de votre application par défaut est un peu plus complexe. Heureusement, il existe des outils pour combler ce fossé. Flipper vous aidera à voir les journaux de votre console de la même manière que Chrome le ferait sur le Web. Pour inspecter les éléments de l’interface utilisateur, vous pouvez appuyer sur un raccourci clavier depuis votre simulateur command + control + z et voir un menu utile Show Element Inspector.

• Il existe des composants appelés Composants principaux. Étonnamment, il n’y en a pas une tonne et vous pouvez accomplir beaucoup de choses en n’en apprenant que quelques-unes. Ce seront vos principaux composants que vous utiliserez à la place du JSX HTML du Web.
• Il n’y a pas de CSS. Vous pouvez configurer des styles de la même manière via une API de style qui est transmise aux éléments JSX individuels via un accessoire de style qui a une apparence similaire au Web. Vos styles ne sont pas mis en cascade comme ils le feraient avec CSS par défaut ; mais il existe également des moyens de contourner ce problème.
• Tu as accès au matériel physique du téléphone (l’appareil photo). Vous pouvez tirer parti des services de localisation et partager du contenu via les invites de partage natives du système d’exploitation.
• Le plus gros choc du passage à React Native et au mobile en général, le déploiement d’applications est plus compliqué. Au lieu de déployer votre code construit sur un serveur Web, vous devez désormais jouer avec Apple et Google pour qu’ils hébergent votre application dans leur boutique. Ce qui signifie qu’au lieu de déployer sur un serveur Web, vous devez déployer deux fois pour mobile. Un pour Connexion à l’App Store et un autre pour jeu de Google.

J’ai couvert les détails que j’ai rencontrés au cours de mon parcours du Web au mobile. Il est important de passer du temps à apprendre ce que API native de réaction propose des offres à la place des éléments DOM que vous connaissez déjà. J’espère que cela aidera tous ceux qui envisagent de se lancer dans le développement mobile.

Pour plus d’informations sur Perficient Solutions mobiles compétence, s’abonner sur notre blog ou contact notre équipe de solutions mobiles dès aujourd’hui !