Open In App

How React Native is different from ReactJS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn about how React Native is different from ReactJS. ReactJS and React Native are both popular JavaScript libraries, ReactJS is primarily used for building user interfaces on the web, while React Native extends the capabilities to mobile app development.

React JS:

It is a JavaScript library that supports both front-end and server-side. It is a popularly used library, which focuses on developing user interfaces (UI) for mobile as well as web-based applications. Developed by Facebook, it is based on the JavaScript language and hence, it is synonymously also called ReactJS.

Steps to Create a React Application:

Step 1: Create a React application using the following command:

npx create-react-app react-demo

Step 2: After creating your project folder i.e. react-demo, move to it using the following command:

cd react-demo

Project Structure:

App.js




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;


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000

React Native:

React Native is a cross-platform mobile framework that uses the ReactJS framework. As the name suggests, it is primarily used for developing “native” mobile applications (like Windows, iOS as well as Android). Also developed by Facebook, the major advantage provided by React Native is that it allows the developers to create mobile applications on various different platforms without compromising the end user’s experience.

Steps to create a React Native Application:

Step 1: Open your terminal and install expo-cli by the following command.

npm install -g expo-cli

Step 2: Now create a project by the following command.

expo init react-native-demo

Step 3: Now go into your project folder i.e. react-native-demo

cd react-native-demo

Project Structure:

App.js




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


Step to Run  Application: Start the server by using the following command.

expo start

Output:

Differences between React and React Native:

Category React JS React Native
Definition A JavaScript library, widely used for developing the user interface. A cross-platform mobile framework used for developing native mobile applications.
Platform Since 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 Interface ReactJS 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.
Styling ReactJS uses Cascading Style Sheets (CSS). React Native uses a Stylesheet object (javascript object).
Rendering ReactJS uses VirtualDOM, a tool that allows for easy interaction with DOM elements. React Native widely uses native APIs.
Navigation ReactJS 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 support ReactJS supports third-party packages but lacks native library support. React Native lacks both native libraries and third-party packages support.
Animation Since 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.
Security It has comparatively higher security. It has comparatively lower security.
Uses It is widely used to develop a dynamic user interface for web applications. It is used to develop true native mobile applications.
Applications Facebook, Netflix, Medium, Udemy Uber Eats, Tesla


Last Updated : 29 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads