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

730

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 pu trouver de réponse satisfaisante en utilisant Google. React et React Native semblent avoir le même format. Ont-ils une syntaxe complètement différente?

shiva kumar
la source
61
Tout le monde donne une réponse par dictionnaire lorsque la plupart des personnes qui posent cette question veulent simplement savoir à quel point elles sont interchangeables: est-il facile de porter leur code React sur React Native? Aurez-vous besoin de réécrire le front-end de votre application web dans un code React différent si vous le souhaitez sur un iPad? Quelle différence?
Lawrence Weru
9
Quelles sont les principales différences entre ReactJS et React-Native? lien ici medium.com/@alexmngn/…
core114
14
La réponse courte est que react-native crée des applications mobiles pour iOS, Android et Windows Mobile que vous pouvez compiler et mettre dans les magasins d'applications pour que les utilisateurs les installent. Reactjs sert à créer des pages Web à utiliser dans un navigateur Web. Les deux utilisent des composants réutilisables, mais la syntaxe que vous utilisez pour rendre les éléments dans les composants (à l'aide de JSX) est différente. Html rend JSX réagira comme composants comme <h1>, <p>, etc. Où application native vue rend-native composants réagissent comme <View>, <Text>, <Image>, <ScrollView>, de sorte que vous ne pouvez pas réutiliser directement votre code composant d'interface utilisateur à moins que vous retouchez / remplacer tous les éléments.
Ira Herman

Réponses:

773

ReactJS est une bibliothèque JavaScript, prenant en charge à la fois le Web frontal et s'exécutant sur un serveur, pour créer des interfaces utilisateur et des applications Web.

React Native est un framework mobile qui se compile en 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 qui vous permet d'utiliser ReactJS pour construire vos composants et implémente ReactJS sous le capuche.

Les deux suivent l'extension de syntaxe JSX vers JavaScript.

Les deux sont open source par Facebook.

Nader Dabit
la source
3
@LemuelAdane Voici un compte rendu de Facebook sur la façon dont cela est fait: facebook.github.io/react/docs/environments.html . Voici une belle introduction qui explique comment l'implémenter: maketea.co.uk/2014/06/30/…
Nader Dabit
61
Donc, si je crée une application dans React Native, peut-elle être réutilisée dans ReaJS ou vice versa?
Troy Cosentino
12
@MelAdane L'affiche fait probablement référence à l'utilisation de bibliothèques ReactJS sur un NodeJS afin de créer des fichiers prédéfinis (en utilisant quelque chose comme Webpack) qui peuvent ensuite être servis au client sous forme de fichiers statiques.
Pineda
9
Si je crée une webapp en utilisant react, le même code HTML / JS peut-il être utilisé dans une application mobile en utilisant react native?
Ravi Maniyar
14
@RaviManiyar NON, vous pouvez réutiliser votre logique métier mais vous ne pouvez pas réutiliser vos codes d'interface utilisateur. React Native utilise des composants d'interface utilisateur natifs tandis que React.JS est utilisé pour le Web et l'interface utilisateur est créée à l'aide de composants html et css
Chromonav
292

Voici le projet React .

Chez Facebook, ils ont inventé React pour que JavaScript puisse manipuler le site Web DOM plus rapidement en utilisant le modèle DOM virtuel.

L'actualisation complète du DOM est plus lente par rapport au modèle de dom virtuel React , qui actualise uniquement certaines parties de la page (lire: actualisation partielle).

Comme vous pouvez le comprendre dans cette vidéo , Facebook n'a pas inventé React car ils ont immédiatement compris que le rafraîchissement partiel serait plus rapide que le rafraîchissement conventionnel. À l'origine, ils avaient besoin d'un moyen de réduire le temps de reconstruction des applications Facebook et, heureusement, cela a donné vie au rafraîchissement partiel du DOM.

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

Avant React native, vous deviez connaître Java pour Android ou Objective-C pour iPhone et iPad pour 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 le JavaScript si vous avez besoin d'optimiser davantage votre application.

Comme Olivia Bishop l'a dit dans la vidéo , 85% de la base de code native React peut être partagée entre les plateformes. Ce sont les composants que les applications utilisent généralement et la logique commune.

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

Ce qui est cool, c'est ce code spécifique à la plate-forme - il est déjà écrit, il vous suffit donc de l'utiliser.

prosti
la source
9
Personnellement, j'aime davantage cette réponse, car elle est plus détaillée et propose des liens vers d'autres explications.
Cristi Potlog le
7
J'aime aussi cette réponse. "Avant React Native ..." N'oubliez pas qu'il y a aussi Xamarin. ;)
Asp Upload
117

Réagir:

React est une bibliothèque JavaScript déclarative, efficace et flexible pour la création d'interfaces utilisateur.

React Native:

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 créez une véritable application mobile qui ne se distingue pas d'une application créée à l'aide d'Objective-C ou de Java. React Native utilise les mêmes blocs de construction d'interface utilisateur fondamentaux que les applications iOS et Android classiques. Vous venez de rassembler ces blocs de construction 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 des composants écrits en Objective-C, Java ou Swift. Il est simple de passer au code natif si vous avez besoin d'optimiser quelques aspects de votre application. Il est également facile de créer une partie de votre application dans React Native et une partie de votre application en utilisant directement le code natif - c'est ainsi que l'application Facebook fonctionne.

Donc, fondamentalement, React est une bibliothèque d'interface utilisateur pour la vue de votre application Web, en utilisant javascript et JSX , React native est une bibliothèque supplémentaire au-dessus de React, pour créer une application native pour iOSet les Androidappareils.

Exemple de code React :

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


Exemple de code natif React :

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 leur site officiel créé par l'équipe facebook:

https://facebook.github.io/react

Pour plus d'informations sur React Native , visitez le site Web React Native ci-dessous:

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

Alireza
la source
40
Vos exemples de code sont utiles, mais il serait bien mieux de voir le même composant implémenté dans chaque framework
poshest
8
Votre réponse devrait être acceptée, je suis venu ici pour voir si React et React Native ont la même architecture et si le code est le même, pas pour les définitions des deux bibliothèques.
Gherbi Hicham
1
Je tiens à ajouter que si vous deveniez natif brut, vous n'auriez littéralement que deux lignes de code, dont l'une est configurée automatiquement pour la prise (selon). Oui, vous aurez besoin d'un formateur de date, mais toujours d'une seule ligne. J'ai du mal à lire "C'est pourquoi réagir est génial" quand il a littéralement 20 fois plus de lignes de code que les applications natives réelles. Cela dit, j'apprécie votre réponse et j'aime même React on web pour les solutions qu'il fournit dans le domaine dans lequel il est excellent. Je souhaite juste que plus de gens sachent comment implémenter ses modèles sans lui, pour comparer quand c'est utile vs cauchemar de maintenance
Stephen J
58

ReactJS est un cadre pour 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 natif utilise le framework React pour créer des 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 les composants natifs iOS UIKit et Android UI en interne. React native permet également à NativeModules d'utiliser du code écrit en ObjectiveC pour iOS et Java pour Android dans JavaScript.

vijayst
la source
41

Premièrement, les similitudes: React et React Native (RN) ont été conçus pour créer des interfaces utilisateur flexibles. Il y a des tonnes d'avantages à ces cadres, mais le plus fondamental est qu'ils sont faits pour le développement de l'interface utilisateur. Facebook a développé RN quelques années après React.

Réagissez: Facebook a conçu ce cadre pour ressembler presque à l'écriture de votre JavaScript à l'intérieur de votre HTML / XML, c'est pourquoi les balises sont appelées " JSX " (JavaScript XML) et sont similaires aux balises de type HTML familières telles que <div>ou <p>. Une caractéristique de React est les balises en lettres majuscules qui désignent un composant personnalisé, tel que <MyFancyNavbar />, qui existe également dans RN. Cependant, React utilise le DOM . Le DOM existe pour HTML, donc React est 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 (par exemple montres, téléviseurs), réalité augmentée, etc. Comme RN n'a pas de DOM avec lequel interagir, au lieu d'utiliser le même type de balises HTML que celles utilisées dans React, il utilise ses propres balises qui sont ensuite compilées dans d'autres langues. Par exemple, au lieu des <div>balises, les développeurs RN utilisent la <View>balise intégrée de RN , qui se compile dans un autre code natif sous le capot (par exemple android.viewsur Android et UIViewsur iOS).

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

Ryo-code
la source
Bonne réponse .. Pouvez-vous élaborer un peu plus et y ajouter plus de points. Ce serait bien pour les gens qui lisent.
Sarath
1
mettre cette réponse en haut
JerryGoyal
38
  1. React-Native est un framework pour développer des applications Android et iOS qui partage 80% - 90% du code Javascript.

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

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

  2. Pour React.js, vous avez besoin de DOM pour le rendu du chemin des balises html, tandis que pour l'application mobile: React-Native utilise AppRegistry pour enregistrer votre application.

J'espère que c'est une explication facile pour les différences / similitudes rapides dans React.js et React-Native.

Анураг Пракаш
la source
25

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

(Mise à jour 2018)


ReactJS

React a pour principal objectif le développement Web.

    • Le DOM virtuel de React est plus rapide que le modèle de rafraîchissement complet conventionnel , car le DOM virtuel ne rafraîchit que certaines parties de la page.
    • Vous pouvez réutiliser les composants de code dans React, ce qui vous fait gagner beaucoup de temps. (Vous pouvez aussi dans React Native.)
    • 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 et 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 React, mais il est plus efficace de créer des applications mobiles avec React Native à partir de nombreux points.

React Native

Une extension de React , nichée sur le développement mobile.

    • Son objectif principal est tout au sujet des interfaces utilisateur mobiles .
    • iOS et Android sont couverts.
    • Les composants et modules réutilisables de l' interface utilisateur native React permettent aux applications hybrides de s'afficher en mode natif.
    • Pas besoin de revoir votre ancienne application. Tout ce que vous avez à faire est d' ajouter des composants React Native UI 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, il ne serait donc pas difficile de les comprendre.
    • Étant donné que votre code n'est pas affiché dans une page HTML, cela signifie également que vous ne pourrez pas réutiliser les bibliothèques que vous avez précédemment utilisées avec React qui rendent tout type de HTML, SVG ou Canvas.
    • React Native n'est pas fait à partir d'éléments Web et ne peut pas être stylé de la même manière. Au revoir les animations CSS!

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

Adrian Gheorghe
la source
17

Dans un sens simple, 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 possède 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'interface utilisateur réutilisables et de réduire l'effort de développement par ses compositions.
  3. Si vous planifiez et structurez le code correctement, vous pouvez utiliser la même logique métier pour mobile et web

Quoi qu'il en soit, c'est une excellente bibliothèque pour créer une interface utilisateur pour mobile et web.

Manzoor Samad
la source
16

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

Une application React Native 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 créez une véritable application mobile qui ne se distingue pas d'une application créée à l'aide d'Objective-C ou de Java. React Native utilise les mêmes blocs de construction d'interface utilisateur fondamentaux que les applications iOS et Android classiques.

Plus d'informations

Bipon Biswas
la source
13

ReactJS est un framework de base, destiné à construire un composant isolé basé sur un modèle réactif, vous pouvez le considérer comme le V de MVC, bien que je voudrais dire que réagir apporte une sensation différente, surtout si vous êtes moins familier avec le concept réactif .

ReactNative est une autre couche qui est censée avoir un composant défini pour la plate-forme Android et iOS qui sont communs. Le code ressemble donc essentiellement à ReactJS car il s'agit de ReactJS, mais il se charge nativement sur les plates-formes mobiles. Vous pouvez également relier des API plus complexes et relatives à la plate-forme avec Java / Objective-C / Swift selon le système d'exploitation et l'utiliser dans React.

Necronet
la source
13

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 plateformes. React Native effectuera le rendu à l'aide de composants natifs. Les applications React Native sont développées dans le langage requis par la plateforme ciblée, Objective-C ou Swift pour iOS, Java pour Android, etc. Le code écrit n'est pas partagé entre les plateformes et leur comportement varie. Ils ont un accès direct à toutes les fonctionnalités offertes par la plateforme sans aucune restriction.

React est une bibliothèque JavaScript open source développée par Facebook pour créer des interfaces utilisateur. Il est utilisé pour gérer la couche d'affichage pour les applications Web et mobiles. ReactJS utilisé pour créer des composants d'interface utilisateur réutilisables.C'est actuellement l'une des bibliothèques JavaScript les plus populaires dans le domaine informatique et elle a une base solide et une grande communauté derrière elle.Si vous apprenez ReactJS, vous devez avoir une connaissance de JavaScript, HTML5 et CSS.

Ramya Ram
la source
12

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

Étant donné que React est l'abstraction de base, la syntaxe générale et le flux de travail sont les mêmes, mais les composants que vous utiliserez sont très différents, vous devrez donc apprendre ces différences, cela est en ligne avec React, appelé moto, qui est "Apprendre une fois à écrire n'importe où", car si vous connaissez React (abstraction de base), vous pouvez simplement apprendre les différences entre les plates-formes sans apprendre un autre langage de programmation, la syntaxe et le flux de travail.

Sharlon M. Balbalosa
la source
11

React-Native est un framework, où ReactJS est une bibliothèque javascript que vous pouvez utiliser pour votre site Web.

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

iPragmatech
la source
10

React Js est une bibliothèque Javascript où 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'informations ici https://facebook.github.io/react-native/docs/getting-started.html

Nischith
la source
9

En ce qui concerne le cycle de vie des composants et toutes les autres cloches et sifflets, il est essentiellement le même.

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

Scott Blanch
la source
8

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 framework de développement multiplateforme, ce qui signifie que l'on pourrait écrire presque le même code pour IOS et Android et cela fonctionnerait. Personnellement, j'en sais beaucoup plus sur React Native, donc je vais en rester là.

S. Sinha
la source
8

React Js manipule avec HTML Dom. Mais React natif manipule avec le composant ui natif mobile (iOS / android).

Uzama Zaid
la source
7

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

React Native est un framework javascript et il est livré avec tout ce dont vous avez besoin pour écrire des applications multi-plateformes (comme iOS ou Android). Vous auriez besoin que xcode et android studio soient installés 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 cela, les applications React-Native semblent réelles contrairement aux autres plates-formes de développement hybrides. Les composants augmentent également la réutilisabilité de votre code car vous n'avez pas besoin de recréer la même interface utilisateur sur iOS et Android.

Ashish Pisey
la source
6

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

Dans le navigateur, il utilise une autre bibliothèque react-dom pour rendre les éléments DOM. Dans le mobile, il utilise des composants React-Native pour rendre les composants d'interface utilisateur natifs spécifiques à la plate-forme (IOS et Android). DONC,

react + react-dom = développement web

react + react-native = développement mobile

Rajender Dandyal
la source
4

REACT est une bibliothèque Javascript pour construire une application web à grande / petite interface comme Facebook.

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

Les deux sont open source par Facebook.

Daniel Agus Sidabutar
la source
3

Voici les différences que je connais:

  1. Ils ont différentes balises html: React Native utilise pour gérer le texte et non dans React.
  2. React Native utilise des composants tactiles au lieu d'un élément de bouton normal.
  3. React Native possède des composants ScrollView et FlatList pour le rendu des listes.
  4. React Native utilise AsyncStorage tandis que React utilise le stockage local.
  5. Dans React Native, les routeurs fonctionnent comme une pile, tandis que dans React, nous utilisons des composants Route pour cartographier la navigation.
Poussiéreux
la source
3

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

Albert A
la source
3

React vs React Native

ReactJS

  • React est utilisé pour créer des sites Web, des applications Web, des SPA, etc.
  • React est une bibliothèque Javascript utilisée pour créer une hiérarchie d'interface utilisateur.
  • Il est responsable du rendu des composants de l'interface utilisateur, il est considéré comme une partie V du cadre MVC.
  • Le DOM virtuel de React est plus rapide que le modèle de rafraîchissement complet conventionnel, car le DOM virtuel ne rafraîchit que certaines parties de la page, ce qui diminue le temps de rafraîchissement de la page.
  • React utilise des composants comme unité de base de l'interface utilisateur qui peuvent être réutilisés, ce qui fait gagner du temps de codage. Simple et facile à apprendre.

React Native

  • React Native est un cadre utilisé pour créer des applications natives multiplateformes. Cela signifie que vous pouvez créer des applications natives et que la même application s'exécutera sur Android et ios.
  • React native a tous les avantages de ReactJS
  • React native permet aux développeurs de créer des applications natives dans une approche de style Web.
  • Le développeur frontal peut facilement devenir développeur mobile.
GOVINDARAJ
la source
2

React Js - React JS est une bibliothèque javascript front-end c'est une grande bibliothèque pas un framework

  • Il suit l'approche basée sur les composants qui aide à construire
    des composants d'interface utilisateur réutilisables
    • Il est utilisé pour développer une interface utilisateur Web et mobile complexe et interactive
    • Même s'il n'était open source qu'en 2015, il a l'une des plus grandes communautés qui le soutiennent.

ReactNative - React Native est un cadre d'application mobile open source.

Pankaj Gadhiya
la source
2

Un peu tard pour la fête, mais voici une réponse plus complète avec des exemples:

Réagir

React est une bibliothèque d'interface utilisateur basée sur des composants qui utilise un "DOM fantôme" pour mettre à jour efficacement le DOM avec ce qui a changé au lieu de reconstruire l'arborescence DOM entière pour chaque changement. Il a été initialement conçu pour les applications Web, mais peut désormais être utilisé pour les mobiles et 3D / VR.

Les composants entre React et React Native ne peuvent pas être échangés car React Native est mappé à des éléments d'interface utilisateur mobile natifs, mais la logique métier et le code non lié au rendu peuvent être réutilisés.

ReactDOM

Initialement inclus dans la bibliothèque React, il a été fractionné une fois que React était utilisé pour d'autres plates-formes que le Web. Il sert de point d'entrée au DOM et est utilisé en association avec React.

Exemple:

import React from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    state = {
        data: [],
    }

    componentDidMount() {
        const data = API.getData(); // fetch some data
        this.setState({ data })
    }

    clearData = () => {
        this.setState({
            data: [],
        });
    }

    render() {
        return (
            <div>
                {this.state.data.map((data) => (
                    <p key={data.id}>{data.label}</p>
                ))}
                <button onClick={this.clearData}>
                    Clear list
                </button>
            </div>
        );
    }

}

ReactDOM.render(App, document.getElementById('app'));

React Native

React Native est un framework mobile multiplateforme qui utilise React et communique entre Javascript et son homologue natif via un "pont". Pour cette raison, beaucoup de structuration de l'interface utilisateur doit être différente lors de l'utilisation de React Native. Par exemple: lors de la création d'une liste, vous rencontrerez des problèmes de performances majeurs si vous essayez d'utiliser mappour construire la liste au lieu de React NativeFlatList . React Native peut être utilisé pour créer des applications mobiles IOS / Android, ainsi que pour des montres intelligentes et des téléviseurs.

Expo

Expo est le go-to lors du démarrage d'une nouvelle application React Native.

Expo est un cadre et une plate-forme pour les applications React universelles. Il s'agit d'un ensemble d'outils et de services construits autour de React Native et de plateformes natives qui vous aident à développer, créer, déployer et itérer rapidement sur iOS, Android et les applications Web.

Remarque: Lorsque vous utilisez Expo, vous ne pouvez utiliser que les API natives qu'ils fournissent. Toutes les bibliothèques supplémentaires que vous incluez devront être en pur javascript ou vous devrez éjecter l'expo.

Même exemple avec React Native:

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

export default class App extends Component {
    state = {
        data: [],
    }

    componentDidMount() {
        const data = API.getData(); // fetch some data
        this.setState({ data })
    }

    clearData = () => {
        this.setState({
            data: [],
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.data}
                    renderItem={({ item }) => <Text key={item.id}>{item.label}</Text>}
                />
                <Button title="Clear list" onPress={this.clearData}></Button>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

Différences:

  • Notez que tout ce qui est en dehors du rendu peut rester le même, c'est pourquoi le code logique métier / cycle de vie peut être réutilisé dans React et React Native
  • Dans React Native, tous les composants doivent être importés à partir de React-Native ou d'une autre bibliothèque d'interface utilisateur
  • L'utilisation de certaines API qui mappent sur des composants natifs sera généralement plus performante que d'essayer de tout gérer du côté javascript. ex. mappage de composants pour créer une liste vs utilisation d'une liste plate
  • Différences subtiles: des choses comme se onClicktransformer enonPress , React Native utilise des feuilles de style pour définir les styles d'une manière plus performante, et React Native utilise flexbox comme structure de mise en page par défaut pour garder les choses réactives.
  • Puisqu'il n'y a pas de "DOM" traditionnel dans React Native, seules les bibliothèques javascript pures peuvent être utilisées à la fois dans React et React Native

React360

Il convient également de mentionner que React peut également être utilisé pour développer des applications 3D / VR. La structure des composants est très similaire à React Native. https://facebook.github.io/react-360/

Matt Aft
la source
1

reactjs utilise un react-dom pas le navigateur dom tandis que react native utilise un dom virtuel mais les deux utilisent la même syntaxe c'est à dire si vous pouvez utiliser reactjs alors vous pouvez utiliser react native.parce que la plupart des bibliothèques que vous utilisez dans reactjs sont disponibles dans react native comme votre navigation React et d'autres bibliothèques communes qu'ils ont en commun.

solex
la source
La réponse courte est que react-native crée des applications mobiles pour iOS, Android et Windows Mobile que vous pouvez compiler et mettre dans les magasins d'applications pour que les utilisateurs les installent. Reactjs sert à créer des pages Web à utiliser dans un navigateur Web. Les deux utilisent des composants réutilisables, mais la syntaxe que vous utilisez pour rendre les éléments dans les composants (à l'aide de JSX) est différente. React JSX rend les composants comme html comme <h1>, <p>, etc. Où rend les composants natifs de vue de l' application native comme réagissent <View>et <Text>.
Ira Herman
1

En réponse au commentaire de @poshest ci-dessus, voici une version React Native du code Clock précédemment publié dans React (désolé, je n'ai pas pu commenter directement la section, sinon j'aurais ajouté le code ici):

Exemple de code natif React

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

class Clock extends 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 (
      <View style={styles.container}>
        <Text style={styles.sectionTitle}>Hello, world!</Text>
        <Text style={styles.sectionDescription}>It is {this.state.date.toLocaleTimeString()}.</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
    justifyContent: 'center',
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: 'black',
    alignSelf: 'center',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: 'darkgrey',
    alignSelf: 'center',
  },
});

AppRegistry.registerComponent("clock", () => Clock);

Notez que le style est entièrement mon choix et ne cherche pas à répliquer directement les balises <h1>et <h2>utilisées dans le code React.

Martin N
la source
1

Certaines différences sont les suivantes:
1- React-Native est un framework qui permet de créer des applications mobiles, où ReactJS est une bibliothèque javascript que vous pouvez utiliser pour votre site Web.
2- React-Native n'utilise pas HTML pour rendre l'application pendant que React l'utilise.
3- React-Native utilisé pour développer uniquement Mobile App tandis que React utilise pour site Web et Mobile.

Naveen
la source
0

React Native

  • Il s'agit d'un cadre pour la création d'applications natives à l'aide de JavaScript.

  • Il se compile en composants d'application natifs, ce qui vous permet de créer des applications mobiles natives.

  • Pas besoin de revoir votre ancienne application. Tout ce que vous avez à faire est d'ajouter des composants React Native UI dans le code de votre application existante, sans avoir à réécrire.

React js

  • Il prend en charge à la fois le Web frontal et s'exécute sur un serveur, pour créer des interfaces utilisateur et des applications Web.

  • Cela nous permet également de créer des composants d'interface utilisateur réutilisables.

  • Vous pouvez réutiliser les composants de code dans React JS, ce qui vous fait gagner beaucoup de temps.

pirate cardiaque
la source
0

React.js, souvent appelé React ou ReactJS, est une bibliothèque JavaScript chargée de construire une hiérarchie de composants d'interface utilisateur ou en d'autres termes, responsable du rendu des composants d'interface utilisateur. Il fournit une prise en charge à la fois frontale et côté serveur.

React Native est un cadre pour la création d'applications natives à l'aide de JavaScript. React Native compile en composants d'application natifs, ce qui vous permet 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 qu'avec React Native, React est toujours l'abstraction de base mais de React Native. La syntaxe et le workflow restent donc similaires, mais les composants sont différents.

Prakash Sharma
la source