Il est courant pour nous, les êtres humains, de ressentir de la confusion face à divers sujets. Cette confusion peut naître de plusieurs caractéristiques des choses, et la plus fréquente est liée à leurs appellations.
Généralement, l’apprentissage commence par la connaissance du nom d’une chose nouvelle. Qu’il s’agisse d’une personne, d’un animal, d’un produit ou d’un logiciel, nous recherchons d’abord leur nom, avant de nous pencher sur leurs fonctions, utilisations ou historique.
Pourquoi cette confusion est-elle si répandue?
Les termes (noms) React et React Native prêtent souvent à confusion. Une personne non technique qui entend ces deux noms pourrait facilement penser que React Native est une extension de React. Même certaines personnes techniques peuvent avoir cette idée si elles n’ont pas de connaissances dans ce domaine.
Mais qu’est-ce que ces technologies en réalité ? Pourquoi suscitent-elles une telle confusion par rapport à d’autres?
React et React Native sont en fait deux frameworks distincts. Leurs noms similaires, à un mot près, sont souvent à l’origine de la confusion. Si vous partagez cette confusion, vous êtes au bon endroit pour dissiper le mystère qui les entoure.
Alors, décortiquons-les ensemble.
React
React est une bibliothèque JavaScript utilisée pour la création d’applications web monopage. C’est l’une des plus populaires pour la conception d’interfaces utilisateur (front-end) pour le web, voire la plus populaire actuellement. Elle a été créée et est maintenue par Facebook. On la connaît également sous le nom de ReactJS.
D’après mon expérience avec React, je peux affirmer qu’elle est agréable et simple à apprendre et à utiliser. C’est une bibliothèque, ce qui permet de construire ce que l’on veut et comme on le souhaite en exploitant ses fonctionnalités. Il n’y a pas de règles strictes à suivre lors du développement d’applications avec React, ce qui offre une grande liberté.
React dispose de nombreuses fonctionnalités intéressantes. Explorons-les.
#1. Les Composants
Dans React, tout est considéré comme un composant. Imaginez-les comme des blocs de construction d’une application web. On peut créer de grands composants en combinant des plus petits. Chaque composant a son propre état et son propre contrôle. Ils gèrent l’interface utilisateur et décident de ce qui doit être affiché aux utilisateurs en fonction de leur état.
Les composants sont la pierre angulaire de React et sont réutilisables. Écrivez-les une seule fois et utilisez-les partout.
Il est important de concevoir les composants avec soin afin de faciliter la maintenance de l’application à mesure qu’elle grandit. Un composant trop volumineux peut devenir difficile à gérer sur le long terme. Un bon composant React doit être petit et bien défini. Cela peut rendre la vie des développeurs agréable, ou au contraire, cauchemardesque, selon leur qualité.
#2. Le DOM Virtuel
Vous avez sûrement déjà vu un indicateur de chargement à l’intérieur d’un bouton. Sur les réseaux sociaux, le nombre de « j’aime » augmente instantanément après un clic. Autrefois, il était nécessaire de recharger toute la page pour obtenir une mise à jour. Maintenant, seule la partie modifiée s’actualise, sans perturber le reste. Comment est-ce possible ?
Comme nous l’avons mentionné, tout dans React est un composant. Les navigateurs conservent la structure DOM (Document Object Model) des éléments d’une application web. Pour mettre à jour une partie de l’application, il faut manipuler le DOM. C’est ce que React fait, mais avec une grande efficacité.
React crée une copie du DOM, appelée DOM virtuel, pour chacun de ses composants. Pour effectuer une mise à jour, React compare le DOM réel avec son DOM virtuel. S’il y a des différences, React déclenche alors la mise à jour du composant concerné.
#3. Le Flux de Données Unidirectionnel
Un flux de données est nécessaire pour diviser un ensemble de composants en sous-composants. Il doit y avoir un moyen de faire circuler les données entre eux.
React permet de transmettre les données d’un composant à un autre dans une seule direction. Les données circulent du parent vers les enfants, mais les composants enfants ne peuvent pas mettre à jour les données du parent. Le flux étant unidirectionnel, il n’y a pas de moyen de renvoyer les données au composant parent.
Bien que cela puisse sembler restrictif, ce flux de données unidirectionnel offre en réalité un meilleur contrôle par rapport à un flux multidirectionnel.
En résumé
Il existe d’autres fonctionnalités comme JSX ou le rendu conditionnel, mais elles sont secondaires. Nous avons vu les principales fonctionnalités de la bibliothèque React. Quant aux applications, on peut quasiment tout créer avec React. La communauté React est immense et propose de nombreux outils pour travailler avec cette bibliothèque.
React Native
React Native est un framework JavaScript utilisé pour le développement d’applications mobiles multiplateformes. Il est également créé et maintenu par Facebook.
L’affirmation ci-dessus peut surprendre bon nombre d’entre vous.
Est-il possible de créer des applications mobiles pour Android et iOS avec un seul framework ?
Si vous n’êtes pas à l’affût des dernières évolutions technologiques, il est possible que vous l’ignoriez. Oui, il est tout à fait possible de créer des applications multiplateformes (Android et iOS) avec React Native, et il existe d’autres frameworks de développement d’applications multiplateformes.
React Native est l’un des plus populaires. Bien qu’il ne soit pas le plus populaire en raison de certaines limitations de JavaScript dans les applications natives, il excelle dans son domaine. Même de grandes entreprises comme Facebook, Instagram ou Flipkart l’utilisent. Cela ne signifie pas que vous devez l’utiliser, mais que React Native permet de créer des applications multiplateformes de niveau professionnel.
J’ai employé l’expression « applications natives » précédemment. De quoi s’agit-il ? Ce ne sont pas de nouvelles applications, il s’agit d’applications conçues spécifiquement pour une plateforme donnée : applications Android pour Android, applications iOS pour iPhone, applications Windows pour Windows, etc.
Alors, quel est le rapport avec « Native » dans React Native ? Pour résumer, React Native crée une application native qui convient à la fois à Android et à iOS, selon nos préférences. Les applications développées avec React Native sont natives au même titre qu’une application développée avec Android Studio pour Android ou Swift pour iOS.
C’est peut-être pour cette raison que ses créateurs l’ont nommé React Native, mais cela reste une hypothèse.
React Native possède de nombreuses fonctionnalités intéressantes. Explorons-en quelques-unes.
#1. Multiplateforme
On peut créer des applications mobiles pour Android et iOS simultanément avec une seule base de code. C’est un gain de temps et d’argent considérable pour les entreprises.
#2. Rechargement à chaud ou en direct
Si vous avez de l’expérience avec React ou React Native, vous connaissez sûrement cette fonctionnalité. Elle permet de recharger l’application avec les nouvelles modifications de code sans avoir à rafraîchir manuellement. Modifiez le code et voyez les changements instantanément, sans avoir à attendre. Bien sûr, en cas de bugs, il faut les corriger.
Cette fonctionnalité peut sembler secondaire pour certains, mais si vous venez du développement Android sans frameworks, vous apprécierez sa valeur dans React Native.
#3. Bibliothèques d’Interface Utilisateur et Communauté
React Native intègre de nombreux composants natifs. Vous pouvez les utiliser directement sans configuration ni installation supplémentaire. Ces composants natifs ont l’apparence des éléments natifs de chaque plateforme. L’interface utilisateur des applications React Native est identique à l’interface utilisateur d’iOS ou d’Android. React Native propose également des composants similaires à ceux de React.
Et en ce qui concerne la communauté, elle est vaste et en constante croissance. Vous pourrez facilement obtenir de l’aide si vous rencontrez des difficultés.
En Résumé
Vous pouvez découvrir de nombreuses autres fonctionnalités de React Native sur internet. Explorez-les si vous vous lancez dans le développement d’applications mobiles. Un développeur front-end peut également développer des applications natives en utilisant React Native. Ce qui facilite le développement d’applications mobiles multiplateformes.
React vs. React Native
Il existe des similitudes et des différences entre React et React Native. Examinons-les.
En ce qui concerne les applications, React et React Native sont totalement différents. Cependant, leurs principes fondamentaux sont similaires. Les deux reposent sur des composants et suivent les mêmes principes dans leur développement respectif.
Ils utilisent tous les deux JavaScript pour le développement. Voici un simple exemple d’application « Hello, World » pour les deux.
React
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="container">
<h1>Hello, Wolrd!</h1>
</div>
);
}
}
export default App;
React Native
import React from 'react';
import { Text, View } from 'react-native';
const App = () => {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center"
}}>
<Text>Hello, world!</Text>
</View>
)
}
export default App;
Comme vous pouvez le constater, les deux utilisent le package React. La syntaxe est similaire, car elles utilisent un balisage spécial appelé JSX. Toutefois, au niveau du rendu, elles ont des approches différentes. React utilise le DOM virtuel et React Native utilise l’API native pour le rendu de l’interface utilisateur.
Il existe des outils externes comme Redux ou MobX pour la gestion de l’état des applications React. On peut également utiliser les mêmes outils dans les applications React Native.
React et React Native utilisent JavaScript, ce qui permet d’utiliser la plupart des outils JavaScript avec les deux. Cela augmente le nombre d’outils disponibles pour les deux bibliothèques.
React et React Native sont liés, mais ils sont utilisés à des fins différentes.
Conclusion
React et React Native sont différents en termes de produit final et de plateformes cibles. Cependant, ils suivent des principes de développement similaires. Apprendre l’un ou l’autre permet d’accélérer l’apprentissage de l’autre. La connaissance de React est nécessaire pour le développement d’applications React Native, mais elle n’est pas suffisante. Il faut en savoir davantage sur le développement d’applications natives, car le support est limité dans React Native.
Espérons que le support s’améliorera à l’avenir.
Si vous envisagez de vous lancer dans le développement d’applications web ou mobiles, choisir React ou React Native sera bénéfique pour votre avenir, bien que ce ne soit pas une obligation.
Apprendre les concepts de React est facile si vous maîtrisez JavaScript. La documentation officielle est une excellente ressource pour débuter avec React ou React Native.
Bon apprentissage ! 🙂