wake-up-neo.com

Was ist der Unterschied zwischen React Native und React?

Ich habe aus Neugier angefangen, Reagieren zu lernen und wollte den Unterschied zwischen React und React Native kennenlernen - konnte jedoch mit Google keine zufriedenstellende Antwort finden. React und React Native scheinen dasselbe Format zu haben. Haben sie eine völlig andere Syntax?

563
shiva kumar

ReactJS ist eine JavaScript-Bibliothek, die sowohl das Front-End-Web unterstützt als auch auf einem Server ausgeführt wird, um Benutzeroberflächen und Webanwendungen zu erstellen.

React Native ist ein mobiles Framework, das zu nativen App-Komponenten kompiliert wird und es Ihnen ermöglicht, native mobile Anwendungen für verschiedene Plattformen (iOS, Android und Windows Mobile) in JavaScript zu erstellen, mit denen Sie ReactJS zum Erstellen Ihrer Anwendungen verwenden können Komponenten und implementiert ReactJS unter der Haube.

Beide sind Open Source von Facebook.

612
Nader Dabit

Google kann Ihnen das nicht erklären, wie Sie sagten, aber Google würde sich sehr freuen, wenn sie React erfinden würden.

Hier ist das React Projekt .

Bei Facebook erfanden sie Reagieren , damit JavaScript das Website-DOM mithilfe des virtuellen DOM-Modells schneller manipulieren kann.

Die vollständige DOM-Aktualisierung ist langsamer als bei React Virtual-Dom-Modell , bei dem nur Teile der Seite aktualisiert werden (Lesen: Teilaktualisierung).

Wie Sie vielleicht aus diesem Video verstehen, hat Facebook React nicht erfunden, weil es sofort verstanden hat, dass die teilweise Aktualisierung schneller als die herkömmliche sein würde. Ursprünglich brauchten sie eine Möglichkeit, um die Zeit für die Neuerstellung von Facebook-Anwendungen zu verkürzen, und glücklicherweise erweckte dies die teilweise DOM-Aktualisierung zum Leben.

React native ist nur eine Folge von React. Es ist eine Plattform, um native Apps mit JavaScript zu erstellen.

Vor Eingeborenen müssen Sie Java für Android oder Objective-C für iPhone und iPad kennen Erstellen Sie native Apps.

Mit React Native ist es möglich, das Verhalten der nativen App in JavaScript nachzuahmen. Am Ende erhalten Sie plattformspezifischen Code als Ausgabe. Sie können sogar den nativen Code mit dem JavaScript mischen, wenn Sie Ihre Anwendung weiter optimieren müssen.

Wie Olivia Bishop im Video sagte, können 85% der reaktiven Codebasis auf mehreren Plattformen verwendet werden. Dies sind die Komponenten, die normalerweise von Anwendungen verwendet werden, und die gemeinsame Logik.

15% des Codes sind plattformspezifisch. Das plattformspezifische JavaScript verleiht der Plattform das gewisse Etwas (und macht den Unterschied in der Erfahrung aus).

Das Coole daran ist, dass dieser plattformspezifische Code bereits geschrieben ist und Sie ihn nur noch verwenden müssen.

215
prosti

Reagieren:

React ist eine deklarative, effiziente und flexible JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen.

Reagiere einheimisch:

Mit React Native können Sie mobile Apps nur mit JavaScript erstellen. Es verwendet dasselbe Design wie React, sodass Sie eine umfangreiche mobile Benutzeroberfläche aus deklarativen Komponenten zusammenstellen können.
Mit React Native erstellen Sie keine "mobile Web-App", eine "HTML5-App" oder eine "Hybrid-App". Sie erstellen eine echte mobile App, die sich nicht von einer App unterscheidet, die mit Objective-C oder Java erstellt wurde. React Native verwendet dieselben grundlegenden UI-Bausteine ​​wie normale iOS- und Android-Apps. Sie fügen diese Bausteine ​​einfach mit JavaScript und React zusammen.
Mit React Native können Sie Ihre App schneller erstellen. Anstatt neu zu kompilieren, können Sie Ihre App sofort neu laden. Beim erneuten Laden im laufenden Betrieb können Sie sogar neuen Code ausführen und dabei den Anwendungsstatus beibehalten. Probieren Sie es aus - es ist eine magische Erfahrung.
React Native lässt sich problemlos mit Komponenten kombinieren, die in Objective-C, Java oder Swift geschrieben wurden. Es ist einfach, auf systemeigenen Code zuzugreifen, wenn Sie einige Aspekte Ihrer Anwendung optimieren müssen. Es ist auch einfach, einen Teil Ihrer App in React Native zu erstellen und einen Teil Ihrer App direkt mit nativem Code zu erstellen - so funktioniert die Facebook-App.

Also im Grunde Reagieren ist UI-Bibliothek für die Ansicht Ihrer Web-App, mit Javascript und JSX, Reagieren native ist eine zusätzliche Bibliothek auf oben in Reagieren, um eine native App für iOS und Android Geräte zu erstellen.

Beispielcode für eine Reaktion :

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


Natives Codebeispiel reagieren:

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

Weitere Informationen zu React finden Sie auf der offiziellen Website des Facebook-Teams:

https://facebook.github.io/react

Weitere Informationen zu React Native finden Sie auf der Website von React native hier:

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

83
Alireza

ReactJS ist ein Framework zum Aufbau einer Hierarchie von UI-Komponenten. Jede Komponente hat Status und Requisiten. Daten fließen über Requisiten von den obersten zu den untersten Komponenten. Der Status wird in der Komponente der obersten Ebene mithilfe von Ereignishandlern aktualisiert.

React native verwendet das Framework React zum Erstellen von Komponenten für mobile Apps. React native bietet einen Basissatz von Komponenten für die Plattformen iOS und Android. Einige der Komponenten in React Native sind Navigator, TabBar, Text, TextInput, View, ScrollView. Diese Komponenten verwenden intern native iOS UIKit- und Android UI-Komponenten. React native ermöglicht auch NativeModules, bei denen in ObjectiveC für iOS geschriebener Code und Java für Android in JavaScript verwendet werden können.

47
vijayst
  1. React-Native ist ein Framework für die Entwicklung von Android & iOS-Anwendungen, die 80% - 90% des Javascript-Codes gemeinsam nutzen.

Während React.js eine übergeordnete Javascript-Bibliothek für die Entwicklung von Webanwendungen ist.

  1. Während Sie Tags wie _<View>_, _<Text>_ in React-Native sehr häufig verwenden, verwendet React.js Web-HTML-Tags wie _<div>_ _<h1><h2>_ Synonyme im Wörterbuch für Web-/Mobile-Entwicklungen.

  2. Für React.js benötigen Sie DOM für das Pfad-Rendering von HTML-Tags, für mobile Anwendungen: React-Native verwendet AppRegistry, um Ihre App zu registrieren.

Ich hoffe, dies ist eine einfache Erklärung für schnelle Unterschiede/Ähnlichkeiten in React.js und React-Native.

Zunächst die Gemeinsamkeiten: Sowohl React als auch React-Native (RN) wurden entwickelt, um Entwicklern die Erstellung flexibler Benutzeroberflächen zu ermöglichen. Es gibt Unmengen von Vorteilen für diese Frameworks, aber das Grundlegendste ist, dass sie für die UI-Entwicklung gemacht sind.

React: Facebook (das RN ein paar Jahre später entwickelt hat) hat dieses Framework so gestaltet, als würde man JavaScript in HTML/XML schreiben warum die Tags "JSX" (JavaScript XML) heißen (z. B. die bekannten HTML-ähnlichen Tags wie <div> oder <p>). Ein Kennzeichen von React sind die Großbuchstaben-Tags, die eine benutzerdefinierte Komponente wie <MyFancyNavbar /> kennzeichnen, was auch für RN gilt. Wo sie sich jedoch unterscheiden, ist, dass React das DOM verwendet. Da das DOM für HTML vorhanden ist, wird React daher für die Webentwicklung verwendet.

React Native: RN verwendet kein HTML und wird daher nicht für die Webentwicklung verwendet. Es wird für ... praktisch alles andere verwendet! Mobile Entwicklung (sowohl iOS als auch Android), Smart-Geräte (z. B. Uhren, Fernseher), Augmented Reality usw. Da RN kein DOM für die Interaktion hat, verwendet es dieselben HTML-Tags wie in React Tags, die dann in andere Sprachen übersetzt werden. Beispielsweise verwenden RN-Entwickler anstelle von <div> -Tags das in RN integrierte <View> -Tag, das in anderen systemeigenen Code kompiliert wird (z. B. Android.view unter Android; und UIView unter iOS).

Kurz gesagt: Sie sind sich (für die Entwicklung der Benutzeroberfläche) sehr ähnlich, werden jedoch für verschiedene Medien verwendet.

20
Ryo-code

Wir können sie nicht genau vergleichen. Es gibt nterschiede im Verwendungszweck.

(Aktualisierung 2018)


ReactJS

hat als Hauptthema focus : Web Development

    • Reacts virtuelles DOM ist schneller als das herkömmliche vollständige Aktualisierungsmodell, da das virtuelle DOM nur Teile der Seite aktualisiert.
    • Sie können Code-Komponenten wiederverwenden in React JS, wodurch Sie viel Zeit sparen. (wie du auch in RN kannst)
    • As Business: Das Rendering Ihrer Seiten vom Server bis zum Browser wird Verbesserung der SEO Ihrer Web-App.
    • Es verbessert die Debugging-Geschwindigkeit erleichtert das Leben Ihres Entwicklers.
    • Sie können die Entwicklung hybrider mobiler Apps wie Cordova oder Ionic verwenden, um auch mobile Apps mit ReactJS zu erstellen. Sie können jedoch mobile Apps mit React Native von vielen Punkten aus effizienter erstellen.

ReactNative

eine Erweiterung von reagieren , angegliedert an Mobile Development.

    • der Schwerpunkt -> dreht sich alles um Mobile User Interface.
    • iOS & Android abgedeckt.
    • wiederverwendbar React Native UI Komponenten & Module damit Hybrid-Apps nativ gerendert werden können.
    • Sie müssen Ihre alte App nicht überarbeiten. Alles, was Sie tun müssen, ist React native UI-Komponenten in den Code Ihrer vorhandenen App einfügen, ohne ihn neu schreiben zu müssen.
    • Verwendet kein HTML zum Rendern der App. Bietet alternative Komponenten, die auf ähnliche Weise funktionieren, sodass es nicht schwer ist, sie zu verstehen.
    • Da Ihr Code nicht in einer HTML-Seite gerendert wird, bedeutet dies auch, dass Sie Sie können zuvor mit ReactJS verwendete Bibliotheken nicht wiederverwenden, dass jede Art von HTML, SVG oder Canvas gerendert wird.
    • React-Native besteht nicht aus Webelementen und kann nicht auf die gleiche Weise gestaltet werden. Tschüss CSS Animationen

Hoffentlich habe ich dir geholfen :)

14
Adrian Gheorghe

In einem einfachen Sinn folgen React und React native denselben Entwurfsprinzipien, außer im Fall des Entwurfs der Benutzeroberfläche.

  1. React native verfügt über separate Tags zum Definieren der Benutzeroberfläche für Mobilgeräte, beide verwenden jedoch JSX zum Definieren von Komponenten.
  2. Das Hauptziel beider Systeme ist es, wiederverwendbare UI-Komponenten zu entwickeln und den Entwicklungsaufwand durch ihre Zusammensetzung zu reduzieren.
  3. Wenn Sie Code richtig planen und strukturieren, können Sie dieselbe Geschäftslogik für Mobilgeräte und das Internet verwenden

Auf jeden Fall ist es eine hervorragende Bibliothek, um eine Benutzeroberfläche für Mobilgeräte und das Internet zu erstellen.

13
Manzoor Samad

React ist eine deklarative, effiziente und flexible JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Ihre Komponenten teilen React mit, was Sie rendern möchten - dann wird React genau die richtigen Komponenten aktualisieren und rendern, wenn Ihre Daten ändern sich. Hier ist ShoppingList eine React Komponentenklasse oder ein React Komponententyp.

Eine React native App ist eine echte mobile App. Mit React Native erstellen Sie keine „mobile Web-App“, „HTML5-App“ oder „Hybrid-App“. Sie erstellen eine echte mobile App, die sich nicht von einer App unterscheidet, die mit Objective-C oder Java erstellt wurde. React Native verwendet dieselben grundlegenden UI-Bausteine ​​wie normale iOS- und Android-Apps.

Mehr Infos

13
Bipon Biswas

React Native wurde hauptsächlich in JavaScript entwickelt. Dies bedeutet, dass der größte Teil des Codes, den Sie für den Einstieg benötigen, plattformübergreifend verwendet werden kann. React Native wird mit nativen Komponenten gerendert. React Native Apps werden in der Sprache entwickelt, die für die Zielplattform erforderlich ist, Objective-C oder Swift für iOS, Java für Android usw. Der geschriebene Code wird nicht plattformübergreifend geteilt und ihr Verhalten variiert. Sie haben uneingeschränkten direkten Zugriff auf alle Funktionen der Plattform.

React ist eine Open-Source-JavaScript-Bibliothek, die von Facebook zum Erstellen von Benutzeroberflächen entwickelt wurde. Es wird für die Verwaltung der Ansichtsebene für Web- und mobile Apps verwendet. ReactJS wurde zum Erstellen wiederverwendbarer UI-Komponenten verwendet. Es ist derzeit eine der beliebtesten JavaScript-Bibliotheken im it-Bereich und hat eine starke Grundlage und eine große Community. Wenn Sie ReactJS lernen, müssen Sie Kenntnisse in JavaScript, HTML5 und CSS haben.

11
Ramya Ram

ReactJS ist ein Kernframework, das dazu gedacht ist, Komponenten zu erstellen, die auf reaktiven Mustern basieren. Sie können es sich als das V von MVC vorstellen .

ReactNative ist eine weitere Ebene, die eine festgelegte Komponente für Android und iOS-Plattformen enthalten soll. Der Code sieht also im Grunde genommen genauso aus wie ReactJS, da es sich um ReactJS handelt, aber er wird nativ auf mobilen Plattformen geladen. Sie können auch komplexere und plattformbezogene APIs mit Java/Objective-C/Swift abhängig vom Betriebssystem verbinden und in React verwenden.

10
Necronet

React ist die Basisabstraktion von React Native und React DOM. Wenn Sie also mit React Native arbeiten, werden Sie Außerdem müssen Sie mit dem Web reagieren, aber anstelle von React Native benötigen Sie React DOM.

Da React die Basisabstraktion ist, sind die allgemeine Syntax und der Workflow identisch, aber die verwendeten Komponenten sind sehr unterschiedlich. Daher müssen Sie die Unterschiede kennen lernen, die mit React zusammenhängen moto heißt "Learn once write anywhere", denn wenn Sie React (Basisabstraktion) kennen, können Sie die Unterschiede zwischen Plattformen einfach lernen, ohne eine andere Programmiersprache, Syntax und einen anderen Workflow zu lernen.

React Js ist eine Javascript-Bibliothek, in der Sie mit React schnellere Webanwendungen entwickeln und ausführen können.

Mit React Native können Sie mobile Apps nur mit JavaScript erstellen. Es wird für die Entwicklung mobiler Anwendungen verwendet. Weitere Informationen hier https://facebook.github.io/react-native/docs/getting-started.html

8
Nischith

React-Native ist ein Framework, in dem ReactJS eine JavaScript-Bibliothek ist, die Sie für Ihre Website verwenden können.

React-native stellt Standard-Kernkomponenten (Bilder, Text) bereit, wobei React eine Reihe von Komponenten bereitstellt und zusammenarbeitet.

8
iPragmatech

In Bezug auf den Komponentenlebenszyklus und all die anderen Dinge ist es meistens dasselbe.

Der Unterschied besteht hauptsächlich im verwendeten JSX-Markup. React verwendet eine, die HTML ähnelt. Das andere ist das Markup, das von react-native zum Anzeigen der Ansicht verwendet wird.

7
Scott Blanch

React Native ist für mobile Anwendungen vorgesehen, während React für Websites (Front-End) vorgesehen ist. Beides sind Frameworks, die von Facebook erfunden wurden. React Native ist ein plattformübergreifendes Entwicklungsframework, das bedeutet, dass man für IOS und Android fast den gleichen Code schreiben kann, und es würde funktionieren. Ich persönlich weiß viel mehr über React Native, also werde ich es hier belassen.

7
S. Sinha

Reagieren Js manipuliert mit HTML Dom. Aber React native manipuliert mit der nativen UI-Komponente für Mobilgeräte (iOS/Android).

6
Uzama Zaid

ReactJS ist eine Javascript-Bibliothek , mit der Web-Interfaces erstellt werden. Sie benötigen einen Bundler wie das Webpack und versuchen, Module zu installieren, die Sie zum Erstellen Ihrer Website benötigen.

React Native ist ein Javascript-Framework und enthält alles, was Sie zum Schreiben von plattformübergreifenden Apps (wie iOS oder Android) benötigen. . Sie müssten xcode und Android studio installiert haben, um Ihre App zu erstellen und bereitzustellen.

Im Gegensatz zu ReactJS verwendet React-Native kein HTML, sondern ähnliche Komponenten, die Sie für die Erstellung Ihrer App über ios und Android verwenden können. Diese Komponenten verwenden echte native Komponenten, um die Apps ios und Android zu erstellen. Aufgrund dessen fühlen sich React-Native-Apps im Gegensatz zu anderen Hybrid-Entwicklungsplattformen echt an. Components erhöht auch die Wiederverwendbarkeit Ihres Codes, da Sie unter ios und Android nicht dieselbe Benutzeroberfläche erneut erstellen müssen.

5
Ashish Pisey

In einfachen Worten ist ReactJS eine übergeordnete Bibliothek, die etwas zurückgibt, das gemäß der Host-Umgebung (Browser, Mobiltelefon, Server, Desktop usw.) gerendert werden soll. Neben dem Rendern werden auch andere Methoden wie Lifecycle-Hooks usw. bereitgestellt.

Im Browser wird eine andere Bibliotheksreaktionsdomäne zum Rendern von DOM-Elementen verwendet. In Mobilgeräten werden React-Native-Komponenten verwendet, um plattformspezifische (sowohl IOS als auch Android) native UI-Komponenten zu rendern. DAMIT,

react + React-Dom = Webentwicklung

react + React-Native = Mobile Entwicklung

5

REACT ist eine Javascript-Bibliothek zum Erstellen einer großen/kleinen Webanwendung wie Facebook.

REACT NATIVE ist ein Javascript-Framework zur Entwicklung nativer mobiler Anwendungen auf Android, IOS und Windows Phone.

Beide sind Open Source von Facebook.

Hier sind die Unterschiede, die ich kenne:

  1. Sie haben verschiedene HTML-Tags: React Native verwendet für die Verarbeitung von Text und nicht in Reagieren.
  2. React Native verwendet anstelle eines normalen Schaltflächenelements berührbare Komponenten.
  3. React Native verfügt über ScrollView- und FlatList-Komponenten zum Rendern von Listen.
  4. React Native verwendet AsyncStorage, während React den lokalen Speicher verwendet.
  5. In React fungieren native Router als Stapel, während in Reagieren Routenkomponenten zum Zuordnen der Navigation verwendet werden.
3
Dusty

Zusammenfassend: React.js für die Webentwicklung und React-Native für die Entwicklung mobiler Apps

3
Albert A

Reagiere auf Js - React JS ist eine Front-End-Javascript-Bibliothek, es ist eine große Bibliothek, kein Framework

  • Es folgt dem komponentenbasierten Ansatz, der beim Bauen hilft
    wiederverwendbare UI-Komponenten
    • Es wird für die Entwicklung komplexer und interaktiver Web- und mobiler Benutzeroberflächen verwendet
    • Obwohl es erst im Jahr 2015 als Open-Source-Lösung angeboten wurde, wird es von einer der größten Communities unterstützt.

ReactNative - React Native ist ein Open-Source-Framework für mobile Anwendungen.

2
Pankaj Gadhiya

reactjs verwendet ein reag-dom, nicht das Browser-dom, während react native das virtuelle dom verwendet, aber die beiden verwenden dieselbe Syntax. Wenn Sie beispielsweise reactjs verwenden können, können Sie react native verwenden. Denn die meisten Bibliotheken, die Sie in reactjs verwenden, sind in react native verfügbar Wie Ihre Reaktionsnavigation und andere gemeinsame Bibliotheken, die sie gemeinsam haben.

1
solex
  • Reagieren wird häufig als React oder ReactJS bezeichnet. Hierbei handelt es sich um eine JavaScript-Bibliothek, die für den Aufbau einer Hierarchie von Benutzeroberflächenkomponenten oder mit anderen Worten für das Rendern von Benutzeroberflächenkomponenten zuständig ist. Es bietet Unterstützung sowohl für das Frontend als auch für die Serverseite. React Native ist ein Framework zum Erstellen nativer Anwendungen mit JavaScript. React Native Kompilierung in native App-Komponenten, wodurch Sie native mobile Anwendungen erstellen können.

  • In React JS ist React die Basisabstraktion von React DOM für die Webplattform, während mit React Native, React ist immer noch die Basisabstraktion, aber von React Native. Die Syntax und der Workflow bleiben also ähnlich, aber die Komponenten unterscheiden sich.

  • Reagieren ist ideal, um eine dynamische, leistungsstarke und reaktionsschnelle Benutzeroberfläche für Ihre Webschnittstellen zu erstellen. Reagieren soll Ihren mobilen Apps ein wirklich natives Gefühl verleihen.
0

React Native ist nur eine Folge von React, mit dem native Apps mit JavaScript erstellt werden können. Durch die Verwendung des gleichen Designs wie bei React kann eine umfangreiche mobile Benutzeroberfläche aus deklarativen Komponenten erstellt werden. Es verwendet JavaScript und XML-ähnliches Markup, das als JSX bezeichnet wird, um die Benutzeroberfläche für mobile Apps zu entwickeln.

Mit React Native ist es möglich, native mobile Apps für Android und iOS zu erstellen (ähnlich denjenigen, die mit Java, Objective-C oder Swift erstellt wurden). Mit diesem React Framework ist es möglich, das Verhalten einer nativen App mit Javascript nachzuahmen und plattformspezifischen Code als Ausgabe zu erhalten. Zu den herausragenden Vorteilen von React Native für die Entwicklung mobiler Apps gehören:

Einzelne Umgebung für mehrere Plattformen: React Native erleichtert die plattformübergreifende native App-Entwicklung, d. H. Der für eine Plattform geschriebene Code kann auf einer anderen Plattform verwendet werden. Mit React Native können Unternehmen kostengünstige mobile Apps erstellen und Entwicklern die Möglichkeit geben, neue Logik zu erstellen, indem sie unterschiedliche APIs für zwei verschiedene Plattformen integrieren.

React Komponenten mit systemeigenem Code kombinieren: Entwickler können die Effizienz einer App optimieren, indem sie Komponenten von Objective-C, Java oder Swift mit React systemeigenem Code kombinieren. Es ist einfach, einen Teil der App-Komponenten in React Native und einen Teil davon mit nativem Code zu erstellen und sie dann zusammenzuführen.

0
user2236335