Ich habe aus Neugier angefangen, React 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?

ReactJS ist eine JavaScript-Bibliothek, die sowohl das Front-End-Web als auch die Ausführung auf einem Server unterstützt, 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 Komponenten verwenden und ReactJS unter dem implementieren können Kapuze.

Beide folgen der JSX-Syntaxerweiterung für JavaScript.

Beide sind Open-Source von Facebook.

Hier ist das React- Projekt .

Bei Facebook haben sie React erfunden damit JavaScript das Website-DOM mithilfe des virtuellen DOM-Modells schneller bearbeiten kann.

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

Wie Sie vielleicht aus diesem Video verstehen , hat Facebook React nicht erfunden, da sofort verstanden wurde, dass die teilweise Aktualisierung schneller sein würde als die herkömmliche. Ursprünglich brauchten sie eine Möglichkeit, die Wiederherstellungszeit für 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 zum Erstellen nativer Apps mit JavaScript.

Vor React native mussten Sie Java für Android oder Objective-C für iPhone und iPad kennen, um native Apps erstellen zu können.

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

Wie Olivia Bishop im Video sagte , können 85% der nativen React- Codebasis von Plattformen gemeinsam genutzt werden. Dies sind die Komponenten, die Anwendungen normalerweise verwenden, und die gemeinsame Logik.

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

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

Reagieren:

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

Native reagieren:

Mit React Native können Sie mobile Apps nur mit JavaScript erstellen. Es verwendet das gleiche Design wie React, sodass Sie aus deklarativen Komponenten eine umfangreiche mobile Benutzeroberfläche erstellen können.
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. Sie setzen 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 Hot-Reloading können Sie sogar neuen Code ausführen, während Sie Ihren 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 sind. Es ist einfach, auf nativen Code zurückzugreifen, wenn Sie einige Aspekte Ihrer Anwendung optimieren müssen. Es ist auch einfach, einen Teil Ihrer App in React Native und einen Teil Ihrer App direkt mit nativem Code zu erstellen - so funktioniert die Facebook-App.

React ist also im Grunde eine UI-Bibliothek für die Ansicht Ihrer Webanwendung, die Javascript und JSX verwendet . React native ist eine zusätzliche Bibliothek über React, um eine native App für iOSund AndroidGeräte zu erstellen.

Reagieren Sie Codebeispiel:

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

Native 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 folgenden Website von React Native :

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

ReactJS ist ein Framework zum Erstellen einer Hierarchie von UI-Komponenten. Jede Komponente hat Status und Requisiten. Der Datenfluss erfolgt über Requisiten von oben zu Komponenten auf niedriger Ebene. Der Status wird in der Komponente der obersten Ebene mithilfe von Ereignishandlern aktualisiert.

React native verwendet das React Framework zum Erstellen von Komponenten für mobile Apps. React native bietet einen grundlegenden Satz von Komponenten für iOS- und Android-Plattformen. 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 und Java für Android geschriebener Code in JavaScript verwendet werden kann.

Zunächst die Ähnlichkeiten: Sowohl React als auch React Native (RN) wurden entwickelt, um flexible Benutzeroberflächen zu erstellen. Diese Frameworks bieten unzählige Vorteile, aber das grundlegendste Problem ist, dass sie für die Entwicklung der Benutzeroberfläche entwickelt wurden. Facebook entwickelte RN einige Jahre nach React.

Reagieren: Facebook hat dieses Framework so gestaltet, dass es fast so ist, als würde man JavaScript in HTML / XML schreiben. Deshalb heißen die Tags " JSX " (JavaScript XML) und ähneln den bekannten HTML-ähnlichen Tags wie <div>oder <p>. Ein Kennzeichen von React sind die Großbuchstaben-Tags, die eine benutzerdefinierte Komponente kennzeichnen, wie sie <MyFancyNavbar />auch in RN vorhanden ist. React verwendet jedoch das DOM . Das DOM existiert für HTML, daher wird React 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 zur Interaktion hat, anstatt die gleichen HTML-Tags zu verwenden, die in React verwendet werden, werden eigene verwendet Tags, die dann in andere Sprachen kompiliert werden. Beispielsweise verwenden <div>RN-Entwickler anstelle von Tags das integrierte <View>Tag von RN , das unter der Haube in anderen nativen Code kompiliert wird (z. B. android.viewunter Android und UIViewiOS).

Kurz gesagt: Sie sind sehr ähnlich (für die UI-Entwicklung), werden jedoch für verschiedene Medien verwendet.

1. React-Native ist ein Framework für die Entwicklung von Android- und iOS-Anwendungen, das 80% - 90% des Javascript-Codes gemeinsam nutzt.

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

2. Während Sie in React-Native sehr häufig Tags wie verwenden <View>, <Text>verwendet React.js Web-HTML-Tags wie <div> <h1> <h2>, die nur Synonyme im Wörterbuch der Web- / Mobilentwicklungen sind.

3. Für React.js benötigen Sie DOM für das Rendern von HTML-Tags im Pfad, während 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.

Wir können sie nicht genau vergleichen. Es gibt Unterschiede im Anwendungsfall .

(Update 2018)

ReactJS

React hat den Schwerpunkt Web Development.

1. • Das virtuelle DOM von React ist schneller als das herkömmliche Modell der vollständigen Aktualisierung , da das virtuelle DOM nur Teile der Seite aktualisiert.
2. • Sie können Codekomponenten in React wiederverwenden , wodurch Sie viel Zeit sparen. (Sie können auch in React Native.)
3. • Als Unternehmen: Durch das vollständige Rendern Ihrer Seiten vom Server zum Browser wird die SEO Ihrer Web-App verbessert .
4. • Es verbessert die Debugging-Geschwindigkeit und erleichtert Ihrem Entwickler das Leben.
5. • Sie können die Entwicklung hybrider mobiler Apps wie Cordova oder Ionic verwenden, um mobile Apps mit React zu erstellen, aber Sie können mobile Apps mit React Native in vielerlei Hinsicht effizienter erstellen.

Native reagieren

Eine Erweiterung von React , die sich mit Mobile Development befasst.

1. • Das Hauptaugenmerk liegt auf mobilen Benutzeroberflächen .
2. • iOS & Android sind abgedeckt.
3. • Wiederverwendbare reaktive native UI- Komponenten und -Module ermöglichen das native Rendern von Hybrid-Apps.
4. • Sie müssen Ihre alte App nicht überarbeiten. Alles, was Sie tun müssen, ist , React Native UI-Komponenten zum Code Ihrer vorhandenen App hinzuzufügen , ohne sie neu schreiben zu müssen.
5. • Verwendet kein HTML zum Rendern der App . Bietet alternative Komponenten, die auf ähnliche Weise funktionieren, sodass es nicht schwer ist, sie zu verstehen.
6. • Da Ihr Code nicht in einer HTML-Seite gerendert wird, bedeutet dies auch Sie wird, können Sie auch keine Bibliotheken wiederverwenden, die Sie zuvor mit React verwendet haben und die HTML, SVG oder Canvas rendern.
7. • React Native besteht nicht aus Webelementen und kann nicht auf die gleiche Weise gestaltet werden. Auf Wiedersehen CSS-Animationen!

Hoffentlich habe ich dir geholfen :)

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

1. React native verfügt über einen separaten Satz von Tags zum Definieren der Benutzeroberfläche für Mobilgeräte. Beide verwenden jedoch JSX zum Definieren von Komponenten.
2. Die Hauptabsicht beider Systeme besteht darin, 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 Mobile und Web verwenden

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

React ist eine deklarative, effiziente und flexible JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Ihre Komponenten teilen React mit, was Sie rendern möchten. React aktualisiert und rendert dann genau die richtigen Komponenten, wenn sich Ihre Daten ändern. 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 Info

ReactJS ist ein Kernframework, das dazu gedacht ist, Komponenten zu erstellen, die auf reaktiven Mustern isoliert sind. Sie können es sich als das V von MVC vorstellen, obwohl ich sagen möchte, dass React ein anderes Gefühl vermittelt, insbesondere wenn Sie mit dem reaktiven Konzept weniger vertraut sind .

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

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

React ist eine Open-Source-JavaScript-Bibliothek, die von Facebook zum Erstellen von Benutzeroberflächen entwickelt wurde. Es wird für die Verarbeitung 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 verfügt über eine starke Grundlage und eine große Community. Wenn Sie ReactJS lernen, müssen Sie über Kenntnisse in JavaScript, HTML5 und CSS verfügen.

React ist die Basisabstraktion von React Native und React DOM . Wenn Sie also mit React Native arbeiten möchten, benötigen Sie auch React ... wie im Web, aber anstelle von React Native benötigen Sie React DOM.

Da React die Basisabstraktion ist, sind die allgemeine Syntax und der Workflow gleich, aber die Komponenten, die Sie verwenden würden, sind sehr unterschiedlich. Sie müssen also diese Unterschiede lernen. Dies steht im Einklang mit React, dem so genannten Moto, das "Einmal schreiben, irgendwo schreiben" lautet, denn wenn Sie wissen, dass Sie mit React (Basisabstraktion) einfach die Unterschiede zwischen Plattformen lernen können, ohne eine andere Programmiersprache, Syntax und einen anderen Workflow zu lernen.

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

React-native bietet Standardkernkomponenten (Bilder, Text), wobei React eine Reihe von Komponenten bereitstellt und diese zusammenarbeiten lässt.

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

In Bezug auf den Komponentenlebenszyklus und alle anderen Schnickschnack 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.

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

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

ReactJS ist eine Javascript-Bibliothek, mit der Webschnittstellen 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 plattformübergreifender 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 iOS und Android verwenden können, um Ihre App zu erstellen. Diese Komponenten verwenden echte native Komponenten, um die iOS- und Android-Apps zu erstellen. Aufgrund dessen fühlen sich React-Native-Apps im Gegensatz zu anderen Hybrid-Entwicklungsplattformen echt an. Komponenten erhöhen auch die Wiederverwendbarkeit Ihres Codes, da Sie auf ios und android nicht dieselbe Benutzeroberfläche erneut erstellen müssen.

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

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

reagieren + reagieren-dom = Webentwicklung

reagieren + reagieren-native = mobile Entwicklung

REACT ist eine Javascript-Bibliothek zum Erstellen von Webanwendungen mit großer / kleiner Benutzeroberfläche wie Facebook.

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

Beide sind Open Source von Facebook.

Hier sind die Unterschiede, die ich kenne:

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

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

ReactJS

• React wird zum Erstellen von Websites, Web-Apps, SPAs usw. verwendet.
• React ist eine Javascript-Bibliothek, die zum Erstellen der UI-Hierarchie verwendet wird.
• Es ist für das Rendern von UI-Komponenten verantwortlich. Es wird als V-Teil des MVC-Frameworks betrachtet.
• Das virtuelle DOM von React ist schneller als das herkömmliche Modell der vollständigen Aktualisierung, da das virtuelle DOM nur Teile der Seite aktualisiert, wodurch die Aktualisierungszeit der Seite verkürzt wird.
• React verwendet Komponenten als Grundeinheit der Benutzeroberfläche, die wiederverwendet werden können. Dies spart Codierungszeit. Einfach und leicht zu lernen.

Native reagieren

• React Native ist ein Framework, mit dem plattformübergreifende native Apps erstellt werden. Dies bedeutet, dass Sie native Apps erstellen können und dieselbe App auf Android und iOS ausgeführt wird.
• React native bietet alle Vorteile von ReactJS
• Mit React native können Entwickler native Apps im Webstil erstellen.
• Front-End-Entwickler können leicht zu mobilen Entwicklern werden.

React Js - React JS ist eine Front-End-Javascript-Bibliothek. Die große Bibliothek ist kein Framework

• Es folgt dem komponentenbasierten Ansatz, der beim Erstellen
  wiederverwendbarer UI-Komponenten hilft
  • Es wird zur Entwicklung komplexer und interaktiver Web- und mobiler Benutzeroberflächen verwendet
  • Obwohl es erst 2015 Open-Source war, wird es von einer der größten Gemeinden unterstützt.

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

Ein bisschen spät zur Party, aber hier ist eine umfassendere Antwort mit Beispielen:

Reagieren

React ist eine komponentenbasierte UI-Bibliothek, die ein "Schatten-DOM" verwendet, um das DOM effizient mit den Änderungen zu aktualisieren, anstatt den gesamten DOM-Baum für jede Änderung neu zu erstellen. Es wurde ursprünglich für Web-Apps entwickelt, kann jetzt aber auch für Mobilgeräte und 3D / VR verwendet werden.

Komponenten zwischen React und React Native können nicht ausgetauscht werden, da React Native nativen Elementen der mobilen Benutzeroberfläche zugeordnet ist, Geschäftslogik und nicht mit dem Rendering verbundener Code jedoch wiederverwendet werden können.

ReactDOM

War ursprünglich in der React-Bibliothek enthalten, wurde jedoch aufgeteilt, sobald React für andere Plattformen als nur das Web verwendet wurde. Es dient als Einstiegspunkt in das DOM und wird in Verbindung mit React verwendet.

Beispiel:

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

Native reagieren

React Native ist ein plattformübergreifendes mobiles Framework, das React verwendet und über eine "Brücke" zwischen Javascript und seinem nativen Gegenstück kommuniziert. Aus diesem Grund muss die Strukturierung der Benutzeroberfläche bei Verwendung von React Native unterschiedlich sein. Beispiel: Wenn Sie eine Liste maperstellen, treten erhebliche Leistungsprobleme auf, wenn Sie versuchen , die Liste anstelle der von React Native zu erstellen FlatList. React Native kann zum Erstellen von IOS / Android-Apps für Mobilgeräte sowie für Smartwatches und Fernseher verwendet werden.

Messe

Die Expo ist die erste Adresse, wenn Sie eine neue React Native-App starten.

Die Expo ist ein Framework und eine Plattform für universelle React-Anwendungen. Es handelt sich um eine Reihe von Tools und Diensten, die auf React Native und nativen Plattformen basieren und Ihnen helfen, iOS-, Android- und Web-Apps zu entwickeln, zu erstellen, bereitzustellen und schnell zu iterieren

Hinweis: Wenn Sie Expo verwenden, können Sie nur die von ihnen bereitgestellten nativen APIs verwenden. Alle zusätzlichen Bibliotheken, die Sie einschließen, müssen aus reinem Javascript bestehen, oder Sie müssen expo auswerfen.

Gleiches Beispiel mit 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,
    },
});

Unterschiede:

• Beachten Sie, dass alles außerhalb des Renderns gleich bleiben kann. Aus diesem Grund kann der Code für Geschäftslogik / Lebenszykluslogik in React und React Native wiederverwendet werden
• In React Native müssen alle Komponenten aus React-Native oder einer anderen UI-Bibliothek importiert werden
• Die Verwendung bestimmter APIs, die nativen Komponenten zugeordnet sind, ist normalerweise leistungsfähiger als der Versuch, alles auf der Javascript-Seite zu handhaben. Ex. Zuordnen von Komponenten zum Erstellen einer Liste im Vergleich zur Verwendung von Flatlist
• Subtile Unterschiede: Dinge wie onClickverwandeln sich inonPress , Reaktion india Anwendungen Sheets Stile in einer leistungsfähigere Weise zu definieren, und Reagieren india Verwendungen Flexbox als Standard - Layout - Struktur zu halten Dinge anspricht.
• Da es in React Native kein traditionelles "DOM" gibt, können sowohl in React als auch in React Native nur reine Javascript-Bibliotheken verwendet werden

React360

Erwähnenswert ist auch, dass React auch zur Entwicklung von 3D / VR-Anwendungen verwendet werden kann. Die Komponentenstruktur ist React Native sehr ähnlich. https://facebook.github.io/react-360/

Reactjs verwendet einen React-Dom, nicht den Browser-Dom, während React Native Virtual Dom verwendet. Die beiden verwenden jedoch dieselbe Syntax. Wenn Sie Reactjs verwenden können, können Sie React Native verwenden, da die meisten Bibliotheken, die Sie in Reactjs verwenden, in React Native verfügbar sind wie Ihre Reaktionsnavigation und andere gemeinsame Bibliotheken, die sie gemeinsam haben.

Als Antwort auf den Kommentar von @poshest oben ist hier eine React Native-Version des zuvor in React veröffentlichten Clock-Codes (leider konnte ich den Abschnitt nicht direkt kommentieren, sonst hätte ich den Code dort hinzugefügt):

Native Codebeispiel reagieren

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

Beachten Sie, dass das Styling ganz meine Wahl ist und nicht versucht, die im React-Code verwendeten <h1>und- <h2>Tags direkt zu replizieren .

Einige Unterschiede sind folgende:
1- React-Native ist ein Framework, das zum Erstellen von mobilen Apps verwendet wird, wobei ReactJS eine Javascript-Bibliothek ist, die Sie für Ihre Website verwenden können.
2- React-Native verwendet kein HTML, um die App zu rendern, während React verwendet.
3- React-Native wird nur für die Entwicklung von Mobile Apps verwendet, während React für Websites und Mobilgeräte verwendet wird.

Native reagieren

• Es ist ein Framework zum Erstellen nativer Anwendungen mit JavaScript.

• Es wird zu nativen App-Komponenten kompiliert, sodass Sie native mobile Anwendungen erstellen können.

• Sie müssen Ihre alte App nicht überarbeiten. Alles, was Sie tun müssen, ist, React Native UI-Komponenten zum Code Ihrer vorhandenen App hinzuzufügen, ohne sie neu schreiben zu müssen.

Reagiere js

• Es unterstützt sowohl das Front-End-Web als auch die Ausführung auf einem Server, um Benutzeroberflächen und Webanwendungen zu erstellen.

• Außerdem können wir wiederverwendbare UI-Komponenten erstellen.

• Sie können Codekomponenten in React JS wiederverwenden, wodurch Sie viel Zeit sparen.

React.js, oft als React oder ReactJS bezeichnet, ist eine JavaScript-Bibliothek, die für die Erstellung einer Hierarchie von UI-Komponenten oder mit anderen Worten für das Rendern von UI-Komponenten verantwortlich ist. Es bietet Unterstützung sowohl für das Frontend als auch für den Server.

React Native ist ein Framework zum Erstellen nativer Anwendungen mit JavaScript. React Native kompiliert mit nativen App-Komponenten, sodass Sie native mobile Anwendungen erstellen können. In React JS ist React die Basisabstraktion von React DOM für die Webplattform, während React mit React Native immer noch die Basisabstraktion von React Native ist. Die Syntax und der Workflow bleiben also ähnlich, aber die Komponenten sind unterschiedlich.