How React Native is different from ReactJS ?

In this article, we will learn about how React Native is different from ReactJS. Both are popular JavaScript libraries. ReactJS is primarily used for building user interfaces on the web, while React Native extends its 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 that focuses on developing user interfaces (UI) for mobile and web-based applications. Developed by Facebook, it is based on the JavaScript language, and hence, it is also synonymously called ReactJS.

Steps to Create a React Application:

Step 1: Create a React application

Create a React application using the following command:

npx create-react-app project-name

It may ask you to install the required package by typing 'y' and pressing Enter. It will then install.

It completes the project creation and displays a message: "Success! Created react-demo at path," as shown in the image below.

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

cd project-name

Project Structure:

App.js:

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>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Step 2: 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 and 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: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

App.js:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Step 3: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

• For Android users, download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
• For iOS users, simply scan the QR code using the Camera app.
• If you're using a web browser, it will provide a local host link that you can use as mentioned in the below image.

Output:

To know more ways to create a React Native Project refer this article: What are the steps to create first React Native App ?

Differences between React and React Native: