web-dev-qa-db-fra.com

Quelle est la différence entre React Native et React?

J'ai commencé à apprendre React par curiosité et je voulais connaître la différence entre React et React Native - mais je n'ai pas trouvé de réponse satisfaisante à l'aide de Google. React et React Native semble avoir le même format. Ont-ils une syntaxe complètement différente?

563
shiva kumar

ReactJS est une bibliothèque JavaScript, prenant en charge à la fois le Web frontal et l’exécution sur un serveur, pour la construction d’interfaces utilisateur et d’applications Web.

React Native est un framework mobile compilant des composants d'application natifs, vous permettant de créer des applications mobiles natives pour différentes plates-formes (iOS, Android et Windows Mobile) en JavaScript, ce qui vous permet d'utiliser ReactJS pour créer votre composants et implémente ReactJS sous le capot.

Les deux sont open source par Facebook.

612
Nader Dabit

Google ne peut pas vous expliquer cela, comme vous l'avez dit, mais Google serait si heureux s'ils inventaient React.

Voici le projet React .

Sur Facebook, ils ont inventé React afin que JavaScript puisse manipuler le DOM du site Web plus rapidement à l'aide du modèle de DOM virtuel.

L'actualisation complète du DOM est plus lente que celle de modèle React virtual-dom , qui actualise uniquement certaines parties de la page (lire: actualisation partielle).

Comme vous pouvez le comprendre d'après cette vidéo , Facebook n'a pas inventé React parce qu'ils ont immédiatement compris que l'actualisation partielle serait plus rapide que celle classique. À l'origine, ils avaient besoin d'un moyen de réduire le temps de reconstruction de l'application Facebook et, heureusement, cela a permis d'actualiser l'actualisation partielle du DOM.

React native n'est qu'une conséquence de React. C'est une plate-forme pour créer des applications natives à l'aide de JavaScript.

Avant de réagir en natif , vous deviez connaître Java pour Android ou Objective-C pour iPhone et iPad afin de: créer des applications natives.

Avec React Native, il est possible d'imiter le comportement de l'application native en JavaScript et, à la fin, vous obtiendrez du code spécifique à la plate-forme en sortie. Vous pouvez même mélanger le code natif avec JavaScript si vous souhaitez optimiser votre application.

Comme le dit Olivia Bishop dans le vidéo , 85% de la base de code de React natif peut être partagée entre plusieurs plates-formes. Ce sont les composants que les applications utilisent généralement et la logique commune.

15% du code est spécifique à la plate-forme. Le code JavaScript spécifique à la plate-forme est ce qui donne à la plate-forme sa saveur (et fait la différence dans l'expérience).

La chose intéressante est ce code spécifique à la plate-forme - est déjà écrit, de sorte que vous avez juste besoin de l'utiliser.

215
prosti

Réagissez:

React est une bibliothèque JavaScript déclarative, efficace et flexible permettant de créer des interfaces utilisateur.

Réagir natif:

React Native vous permet de créer des applications mobiles en utilisant uniquement JavaScript. Il utilise le même design que React, vous permettant de composer une interface utilisateur mobile riche à partir de composants déclaratifs.
Avec React Native, vous ne créez pas une "application Web mobile", une "application HTML5" ou une "application hybride". Vous construisez une application mobile réelle qui ne peut être distinguée d'une application créée à l'aide d'Objective-C ou de Java. React Native utilise les mêmes blocs de construction de l'interface utilisateur que les applications iOS et Android ordinaires. Vous venez de mettre ces éléments ensemble en utilisant JavaScript et React.
React Native vous permet de créer votre application plus rapidement. Au lieu de recompiler, vous pouvez recharger votre application instantanément. Avec le rechargement à chaud, vous pouvez même exécuter un nouveau code tout en conservant l'état de votre application. Essayez-le - c'est une expérience magique.
React Native se combine facilement avec les composants écrits en Objective-C, Java ou Swift. Il est facile de passer au code natif si vous devez optimiser quelques aspects de votre application. Il est également facile de créer une partie de votre application dans React Native, ainsi qu'une partie de votre application utilisant directement du code natif: c'est ainsi que fonctionne l'application Facebook.

Donc, fondamentalement React est une bibliothèque d'interface utilisateur pour l'affichage de votre application Web, à l'aide de javascript et JSX, Réagissez natif est une bibliothèque supplémentaire sur en haut de React, pour créer une application native pour les périphériques iOS et Android.

Réagissez exemple de code:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);


Réagissez avec l'exemple de code Native :

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

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      <View>
        <Text>
          If you like React on the web, you'll like React Native.
        </Text>
        <Text>
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        </Text>
      </View>
    );
  }
}

Pour plus d'informations sur React , visitez le site officiel de l'équipe facebook:

https://facebook.github.io/react

Pour plus d'informations sur React Native , visitez le site Web React _ natif ici:

https://facebook.github.io/react-native

83
Alireza

ReactJS est un framework permettant de construire une hiérarchie de composants d'interface utilisateur. Chaque composant a un état et des accessoires. Les données circulent du haut vers les composants de bas niveau via des accessoires. L'état est mis à jour dans le composant de niveau supérieur à l'aide de gestionnaires d'événements.

React native utilise le cadre React pour la création de composants pour les applications mobiles. React native fournit un ensemble de composants de base pour les plates-formes iOS et Android. Certains des composants de React Native sont Navigator, TabBar, Text, TextInput, View, ScrollView. Ces composants utilisent des composants iOS UIKit et Android UI natifs en interne. React native permet également NativeModules dans lequel le code écrit dans ObjectiveC pour iOS et Java pour Android peut être utilisé dans JavaScript.

47
vijayst
  1. React-Native est un framework de développement d'applications Android et iOS partageant 80% à 90% du code Javascript.

Alors que React.js est une bibliothèque Javascript parent pour développer des applications Web.

  1. Tandis que vous utilisez des balises comme <View>, <Text> très fréquemment dans React-Native, React.js utilise des balises Web html telles que <div><h1><h2>, qui ne sont que synonymes dans le dictionnaire des développements web/mobile.

  2. Pour React.js, vous avez besoin de DOM pour le rendu du chemin des balises HTML, tandis que pour les applications mobiles: React-Native utilise AppRegistry pour enregistrer votre application.

J'espère que c'est une explication simple des différences/similitudes rapides entre React.js et React-Native.

Premièrement, les similitudes: Les deux réagissent et réagissent-nativement (RN) ont été conçus pour permettre aux développeurs de créer des interfaces utilisateur flexibles. Ces cadres offrent de nombreux avantages, mais le plus fondamental est qu'ils sont conçus pour le développement de l'assurance-chômage.

Réagissez: Facebook (qui a développé RN quelques années plus tard) a conçu ce cadre pour qu'il soit presque comme écrire votre code JavaScript dans votre code HTML/XML, qui est: pourquoi les balises sont appelées "JSX" (JavaScript XML) (par exemple, les balises familières de type HTML telles que <div> ou <p>). Une caractéristique de React est les balises majuscules qui désignent un composant personnalisé, tel que <MyFancyNavbar />, qui est également vrai pour RN. Cependant, ils diffèrent par le fait que React utilise le DOM . Puisque le DOM existe pour HTML, React est donc utilisé pour le développement Web.

React Native: RN n'utilise pas HTML et n'est donc pas utilisé pour le développement Web. Il est utilisé pour ... pratiquement tout le reste! Développement mobile (iOS et Android), appareils intelligents (montres, téléviseurs, etc.), réalité augmentée, etc. Étant donné que RN n'a pas de DOM sur lequel interagir, au lieu d'utiliser le même type de balises HTML utilisé dans React, il utilise le sien. balises qui sont ensuite compilées dans d'autres langues. Par exemple, au lieu des balises <div>, les développeurs RN utiliseront la balise intégrée <View> de RN, qui sera compilée sous un autre code natif sous le capot (par exemple Android.view sur Android; et UIView sur iOS).

En bref: ils sont très similaires (pour le développement d'interface utilisateur) mais utilisés pour des supports différents.

20
Ryo-code

Nous ne pouvons pas les comparer exactement. Il y a des différences dans le cas d'utilisation .

(Mise à jour 2018)


ReactJS

a pour principal la focalisation : Développement Web

    • Le DOM virtuel de React est plus rapide que le modèle classique d’actualisation complète , car il n’actualise que certaines parties de la page.
    • Vous pouvez réutiliser des composants de code dans React JS, ce qui vous fait gagner beaucoup de temps. (comme vous pouvez aussi dans RN)
    • En tant qu'entreprise: le rendu complet de vos pages, du serveur au navigateur, améliorera le référencement de votre application Web .
    • Il améliore la vitesse de débogage , ce qui facilite la vie de votre développeur.
    • Vous pouvez utiliser le développement d'applications mobiles hybrides, comme Cordova ou Ionic, pour créer des applications mobiles, avec ReactJS, mais construit plus efficacement des applications mobiles avec React native de nombreux points.

Réactif

une extension de react , nommée sur Développement mobile.

    • son objectif principal -> concerne tout l'interface utilisateur mobile .
    • iOS et Android couverts.
    • réutilisable React UI native composants et modules permettant aux applications hybrides de s'afficher en mode natif.
    • Pas besoin de réviser votre ancienne application. Tout ce que vous avez à faire est d’ajouter React des composants d’interface utilisateur native dans le code de votre application existante , sans avoir à réécrire.
    • N'utilise pas HTML pour rendre l'application . Fournit des composants alternatifs qui fonctionnent de manière similaire, de sorte qu'il ne serait pas difficile de les comprendre.
    • Etant donné que votre code n'est pas rendu dans une page HTML, cela signifie également que vous ne pourrez pas réutiliser les bibliothèques précédemment utilisées avec ReactJS qui restituent tout type de code HTML, SVG ou toile.
    • React-Native n’est pas constitué d’éléments Web et ne peut pas être stylisé de la même manière. Au revoir animations CSS

J'espère que je vous ai aidé :)

14
Adrian Gheorghe

En termes simples, React et React native suivent les mêmes principes de conception, sauf dans le cas de la conception d'une interface utilisateur.

  1. React native dispose d'un ensemble distinct de balises pour définir l'interface utilisateur pour mobile, mais les deux utilisent JSX pour définir les composants.
  2. L’intention principale des deux systèmes est de développer des composants d’UI réutilisables et de réduire l’effort de développement lié à ses compositions.
  3. Si vous planifiez et structurez le code correctement, vous pouvez utiliser la même logique métier pour les applications mobiles et Web.

Quoi qu’il en soit, c’est une excellente bibliothèque pour construire une interface utilisateur pour mobile et Web.

13
Manzoor Samad

React est une bibliothèque JavaScript déclarative, efficace et flexible destinée à la création d'interfaces utilisateur. Vos composants indiquent à React ce que vous souhaitez restituer. Ensuite, React mettra à jour et restituera efficacement les bons composants lorsque vos données seront modifiées. Ici, ShoppingList est une classe de composants React ou un type de composant React.

Une application native React est une véritable application mobile. Avec React Native, vous ne créez pas une "application Web mobile", une "application HTML5" ou une "application hybride". Vous construisez une véritable application mobile qui ne peut être distinguée d'une application créée avec Objective-C ou Java. React Native utilise les mêmes blocs de construction de l'interface utilisateur que les applications iOS et Android classiques.

Plus d'infos

13
Bipon Biswas

React Native est principalement développé en JavaScript, ce qui signifie que la plupart du code dont vous avez besoin pour commencer peut être partagé sur plusieurs plates-formes. React Native rend le rendu à l'aide de composants natifs. React Les applications natives sont développées dans le langage requis par la plateforme cible, Objective-C ou Swift pour iOS, Java pour Android, etc. Le code écrit n'est pas partagé entre les plates-formes et leur comportement varie. Ils ont un accès direct à toutes les fonctionnalités offertes par la plate-forme sans aucune restriction.

React est une bibliothèque JavaScript open-source développée par Facebook pour la construction d'interfaces utilisateur. Il est utilisé pour gérer la couche d'affichage pour les applications Web et mobiles. ReactJS était utilisé pour créer des composants d’UI réutilisables. C’est actuellement l’une des bibliothèques JavaScript les plus populaires dans le domaine des technologies de l’information. Il repose sur une base solide et une grande communauté. Si vous apprenez ReactJS, vous devez avoir des connaissances en JavaScript, HTML5 et CSS.

11
Ramya Ram

ReactJS est un framework de base, conçu pour construire des composants isolés sur la base d'un modèle réactif. Vous pouvez le considérer comme le V de MVC, bien que je voudrais dire que rea apporte une sensation différente, en particulier si vous êtes moins familier avec le concept réactif. .

ReactNative est une autre couche destinée à avoir un composant défini pour Android et une plate-forme iOS communs. Donc, le code a le même aspect que ReactJS car c'est ReactJS, mais il se charge de manière native dans les plates-formes mobiles. Vous pouvez également établir une liaison entre des API plus complexes et relatives à la plate-forme avec Java/Objective-C/Swift en fonction du système d'exploitation et les utiliser dans React.

10
Necronet

React est l'abstraction de base de React Native et React DOM, donc si vous allez travailler avec React Native vous allez Également besoin de React ... idem avec le Web, mais au lieu de React Native, vous aurez besoin de React DOM.

Puisque React est l'abstraction de base, la syntaxe générale et le flux de travail sont identiques, mais les composants que vous utiliseriez sont très différents. Vous devrez donc apprendre ces différences. Ceci est aligné avec React so appelé moto qui est "Apprendre une fois, écrivez n'importe où" car si vous connaissez React (abstraction de base), vous pouvez simplement apprendre les différences entre plates-formes sans apprendre un autre langage de programmation, une autre syntaxe ou un autre processus.

9

React Js est une bibliothèque Javascript dans laquelle vous pouvez développer et exécuter des applications Web plus rapides à l'aide de React.

React Native vous permet de créer des applications mobiles en utilisant uniquement JavaScript. Il est utilisé pour le développement d'applications mobiles. plus d'infos ici https://facebook.github.io/react-native/docs/getting-started.html

8
Nischith

React-Native est un framework dans lequel ReactJS est une bibliothèque javascript que vous pouvez utiliser pour votre site web.

React-native fournit les composants de base par défaut (images, texte), où React fournit un ensemble de composants et les fait fonctionner ensemble.

8
iPragmatech

En ce qui concerne le cycle de vie des composants et tous les autres sonneries, il est quasiment identique.

La différence réside principalement dans le balisage JSX utilisé. React en utilise un qui ressemble à HTML. L'autre est le balisage utilisé par react-native pour afficher la vue.

7
Scott Blanch

React Native est destiné aux applications mobiles tandis que React est destiné aux sites Web (front-end). Les deux sont des cadres inventés par Facebook. React Native est un cadre de développement multiplateforme qui permet d'écrire presque le même code pour IOS et Android et cela fonctionnerait. Personnellement, j'en sais beaucoup plus sur React Native, je vais donc en rester là.

7
S. Sinha

React Js manipule avec HTML Dom. Mais React native manipule avec le composant d'interface utilisateur native pour mobile (iOS/Android).

6
Uzama Zaid

ReactJS est une bibliothèque javascript utilisée pour créer des interfaces Web. Vous auriez besoin d'un bundle tel que webpack et essayez d'installer les modules dont vous auriez besoin pour construire votre site web.

React Native est un cadre javascript et est fourni avec tout ce dont vous avez besoin pour écrire des applications multiplates-formes (comme iOS ou Android). . Vous devez installer xcode et Android studio pour créer et déployer votre application.

Contrairement à ReactJS, React-Native n'utilise pas HTML, mais des composants similaires que vous pouvez utiliser sur ios et Android pour créer votre application. Ces composants utilisent de vrais composants natifs pour créer les applications ios et Android. En raison de cette réactivité, les applications natives se sentent différentes des autres plates-formes de développement hybrides. Les composants augmentent également la possibilité de réutilisation de votre code, car vous n'avez pas besoin de créer à nouveau la même interface utilisateur sur ios et Android.

5
Ashish Pisey

En termes simples, ReactJS est une bibliothèque parente qui retourne quelque chose à restituer selon l'environnement de l'hôte (navigateur, mobile, serveur, ordinateur de bureau, etc.). Outre le rendu, il fournit également d'autres méthodes telles que les hooks de cycle de vie, etc.

Dans le navigateur, il utilise une autre bibliothèque react-dom pour restituer les éléments DOM. Dans Mobile, il utilise des composants React-Native pour restituer les composants de l'interface utilisateur native spécifiques à la plate-forme (IOS et Android). ALORS,

réagir + réagir-dom = développement web

react + react-native = développement mobile

5
Rajender Dandyal

RÉAGIR est une bibliothèque Javascript permettant de créer une application Web à interface grande/petite comme Facebook.

REACT NATIVE est un framework Javascript permettant de développer une application mobile native sur Android, IOS et Windows Phone.

Les deux sont open source par Facebook.

4

Voici les différences que je connais:

  1. Ils ont différentes balises HTML: React que Native utilise pour gérer le texte et non pas dans React.
  2. React Native utilise des composants Touchable au lieu d'un élément de bouton standard.
  3. React Native intègre des composants ScrollView et FlatList pour le rendu des listes.
  4. React Native utilise AsyncStorage tandis que React utilise la mémoire de stockage locale.
  5. Dans React, les routeurs natifs fonctionnent comme une pile, tandis que dans React, nous utilisons des composants Route pour la navigation cartographique.
3
Dusty

En résumé: React.js pour le développement Web tandis que React-Native pour le développement d'applications mobiles

3
Albert A

React Js - React JS est une bibliothèque javascript front-end, c'est une grande bibliothèque et non un framework.

  • Il suit l'approche par composant qui aide à construire
    composants réutilisables de l'interface utilisateur
    • Il est utilisé pour développer une interface utilisateur Web et mobile complexe et interactive.
    • Bien qu'il n'ait été open source qu'en 2015, l'une des plus grandes communautés le supporte.

ReactNative - React Native est un framework d'applications mobiles à code source ouvert.

2
Pankaj Gadhiya

reactjs utilise un react-dom pas le navigateur, alors que react native utilise un dom virtuel, mais les deux utilisent la même syntaxe, c.-à-d. que vous pouvez utiliser reactjs, vous pouvez utiliser react native. comme votre navigation de réaction et d'autres bibliothèques communes qu'ils ont en commun.

1
solex
  • React souvent appelé React ou ReactJS est une bibliothèque JavaScript chargée de la création d'une hiérarchie des composants de l'interface utilisateur ou, en d'autres termes, responsable du rendu des composants de l'interface utilisateur. Il fournit une prise en charge à la fois frontale et côté serveur .React Native est un framework pour la construction d'applications natives à l'aide de JavaScript. React Les compilations natives en composants d'applications natives vous permettent de créer des applications mobiles natives.

  • Dans React JS, React est l'abstraction de base de React DOM pour la plate-forme Web, tandis que avec React Native, React est toujours l'abstraction de base mais de React Native. La syntaxe et le flux de travail restent donc similaires, mais les composants sont différents.

  • React est idéal pour créer une interface utilisateur dynamique, hautement performante et réactive pour vos interfaces Web, tandis que React Native est conçu pour donner à vos applications mobiles une sensation véritablement native.
0
abhinandan sharma

React Native n'est qu'une conséquence de React, qui permet de créer des applications natives à l'aide de JavaScript. En utilisant la même conception que React, il permet de créer une interface utilisateur mobile riche à partir de composants déclaratifs. Il utilise les balises JavaScript et XML-esque, connues sous le nom de JSX, pour développer l'interface des applications mobiles.

Avec React Native, il est possible de créer des applications mobiles natives pour Android et iOS (similaires à celles construites avec Java, Objective-C ou Swift). Avec ce cadre React _, il est possible d'imiter le comportement d'une application native à l'aide de Javascript et d'obtenir un code spécifique à la plate-forme en sortie. Certains des avantages notables de React Native pour le développement d'applications mobiles incluent:

Environnement unique pour plusieurs plates-formes: React Native facilite le développement d'applications natives multiplates-formes, c'est-à-dire que le code écrit pour une plate-forme peut être utilisé sur une autre. React Native permet aux entreprises de créer des applications mobiles économiques et aux développeurs de réduire le fardeau de la création de nouvelles logiques, en intégrant différentes API pour deux plates-formes différentes.

Combinaison de React Composants avec du code natif: les développeurs peuvent optimiser l'efficacité d'une application en combinant des composants de Objective-C, Java ou Swift avec React code natif. Il est facile de créer une partie des composants de l’application dans React Native et de l’utiliser avec du code natif, puis de les fusionner.

0
user2236335