ReactJS: é uma biblioteca JavaScript que suporta front-end e servidor. É uma biblioteca usada popularmente, que se concentra no desenvolvimento de interfaces de usuário (UI) para aplicativos móveis e baseados na web. Desenvolvido pelo Facebook, é baseado na linguagem JavaScript e, portanto, também é sinônimo de ReactJS.

Etapas para criar um aplicativo React:

• Etapa 1: crie um aplicativo React usando o seguinte comando:

  npx create-react-app react-demo

• Etapa 2: depois de criar sua pasta de projeto, por exemplo, react-demo, vá até ela usando o seguinte comando:

  cd react-demo

Estrutura do projeto: terá a seguinte aparência.

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;

Etapa para executar o aplicativo: execute o aplicativo usando o seguinte comando do diretório raiz do projeto:

npm start

Resultado: agora abra seu navegador e vá para http: // localhost: 3000 /, você verá o seguinte resultado

React Native: React Native é uma estrutura móvel de plataforma cruzada que usa a estrutura ReactJS. Como o nome sugere, ele é usado principalmente para desenvolver aplicativos móveis “nativos” (como Windows, iOS e Android). Também desenvolvido pelo Facebook, a principal vantagem do React Native é que ele permite que os desenvolvedores criem aplicativos móveis em várias plataformas diferentes sem comprometer a experiência do usuário final.

Etapas para criar um aplicativo nativo React:

• Etapa 1: Abra seu terminal e instale o expo-cli com o seguinte comando.

  npm install -g expo-cli

• Etapa 2: Agora crie um projeto com o seguinte comando.

  expo init react-native-demo

• Etapa 3: agora vá para a pasta do projeto, ou seja, react-native-demo

  cd react-native-demo

Estrutura do projeto: terá a seguinte aparência.

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

Etapa para executar o aplicativo: Inicie o servidor usando o seguinte comando.

expo start

Saída:

Diferenças entre React e React Native: