ReactJS: Es ist eine JavaScript-Bibliothek, die sowohl Front-End als auch serverseitig unterstützt. Es ist eine weit verbreitete Bibliothek, die sich auf die Entwicklung von Benutzeroberflächen (UI) für mobile sowie webbasierte Anwendungen konzentriert. Es wurde von Facebook entwickelt, basiert auf der Sprache JavaScript und wird daher synonym auch als ReactJS bezeichnet.

Schritte zum Erstellen einer React-Anwendung:

• Schritt 1: Erstellen Sie eine React-Anwendung mit dem folgenden Befehl:

  npx Create-React-App React-Demo

• Schritt 2: Nachdem Sie Ihren Projektordner, z. B. „react-demo“, erstellt haben, wechseln Sie mit dem folgenden Befehl dorthin:

  cd reagieren-demo

Projektstruktur: Sie sieht wie folgt aus.

import React from "react";
import logo from "./logo.svg";
import "./App.css";
  
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>ReactJS Demo Application</p>
  
      </header>
    </div>
  );
}
  
export default App;

Schritt zum Ausführen der Anwendung: Führen Sie die Anwendung mit dem folgenden Befehl aus dem Stammverzeichnis des Projekts aus:

npm start

Ausgabe: Öffnen Sie nun Ihren Browser und gehen Sie zu http://localhost:3000/, Sie sehen die folgende Ausgabe

React Native: React Native ist ein plattformübergreifendes mobiles Framework, das das ReactJS-Framework verwendet. Wie der Name schon sagt, wird es hauptsächlich für die Entwicklung „nativer“ mobiler Anwendungen (wie Windows, iOS sowie Android) verwendet. Der Hauptvorteil von React Native, ebenfalls von Facebook entwickelt, besteht darin, dass es den Entwicklern ermöglicht, mobile Anwendungen auf verschiedenen Plattformen zu erstellen, ohne die Erfahrung des Endbenutzers zu beeinträchtigen.

Schritte zum Erstellen einer React Native-Anwendung:

• Schritt 1: Öffnen Sie Ihr Terminal und installieren Sie expo-cli mit dem folgenden Befehl.

  npm install -g expo-cli

• Schritt 2: Erstellen Sie nun ein Projekt mit dem folgenden Befehl.

  expo init reagieren-native-demo

• Schritt 3: Wechseln Sie nun in Ihren Projektordner, dh zu „react-native-demo“ .

  cd reagieren-native-demo

Projektstruktur: Sie sieht wie folgt aus.

import React from "react";
import { StyleSheet, Text, View } from "react-native";
  
export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>React Native Demo Application</Text>
    </View>
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  header: {
    color: "#006600",
    fontSize: 22,
    fontWeight: "700",
  },
});

Schritt zum Ausführen der Anwendung: Starten Sie den Server mit dem folgenden Befehl.

expo start

Ausgabe:

Unterschiede zwischen React und React Native: