📜  React Native 与 ReactJS 有何不同?

📅  最后修改于: 2022-05-13 01:56:47.677000             🧑  作者: Mango

React Native 与 ReactJS 有何不同?

ReactJS:它是一个同时支持前端和服务器端的 JavaScript 库。它是一个广泛使用的库,专注于为移动和基于 Web 的应用程序开发用户界面 (UI)。它由 Facebook 开发,基于 JavaScript 语言,因此也被称为 ReactJS。

创建 React 应用程序的步骤:

  • 第 1 步:使用以下命令创建一个 React 应用程序:

    npx create-react-app react-demo
  • 第 2 步:创建项目文件夹(即 react-demo)后,使用以下命令移动到该文件夹:

    cd react-demo

项目结构:它将如下所示。

App.js
import React from "react";
import logo from "./logo.svg";
import "./App.css";
  
function App() {
  return (
    
      
        logo         

ReactJS Demo Application

         
    
  ); }    export default App;


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


运行应用程序的步骤:从项目的根目录使用以下命令运行应用程序:

npm start

输出:现在打开你的浏览器并访问http://localhost:3000/,你会看到如下输出

React Native: React Native 是一个使用 ReactJS 框架的跨平台移动框架。顾名思义,它主要用于开发“原生”移动应用程序(如 Windows、iOS 和 Android)。同样由 Facebook 开发,React Native 提供的主要优势是它允许开发人员在各种不同的平台上创建移动应用程序,而不会影响最终用户的体验。

创建 React Native 应用程序的步骤:

  • 第 1 步:打开终端并通过以下命令安装 expo-cli。

    npm install -g expo-cli
  • 第2步:现在通过以下命令创建一个项目。

    expo init react-native-demo
  • 第 3 步:现在进入您的项目文件夹,即 react-native-demo

    cd react-native-demo

项目结构:它将如下所示。

应用程序.js

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

运行应用程序的步骤:使用以下命令启动服务器。

expo start

输出:

React 和 React Native 的区别:

CategoryReactJSReact Native
DefinitionA JavaScript library, widely used for developing the user interface.A cross-platform mobile framework used for developing native mobile applications.
PlatformSince it is majorly used for web browsers, it can be easily executed on all platforms.Since it is used for native applications, it takes a sufficient amount of developer effort to be customized and executed on all platforms.
User InterfaceReactJS renders HTML tags in its user interface. React components can include simple HTML tags.React Native renders JSX in its user interface. React Native supports specific JSX tags which are used.
StylingReactJS uses Cascading Style Sheets (CSS).React Native uses a Stylesheet object (javascript object).
RenderingReactJS uses VirtualDOM, a tool that allows for easy interaction with DOM elements.React Native widely uses native APIs.
NavigationReactJS uses the React router to allow users to visit different web pages.React Native uses its built-in Navigator library to allow users to visit different screens.
External library supportReactJS supports third-party packages but lacks native library support.React Native lacks both native libraries and third-party packages support.
AnimationSince ReactJS focuses on UI, it requires animations, which can be easily added using CSS.To incorporate animations in React Native, it uses an animated API.
SecurityIt has comparatively higher security.It has comparatively lower security.
UsesIt is widely used to develop a dynamic user interface for web applications.It is used to develop true native mobile applications.
ApplicationsFacebook, Netflix, Medium, UdemyUber Eats, Tesla