Difference betweeen ReactjS and React Native

ReactJS and React Native are both popular JavaScript libraries used for building user interfaces. While they share similar concepts, they are used for different platforms and purposes.

• ReactJS is mainly used for building web applications and runs in the browser.
• React Native is used for developing mobile applications for Android and iOS.
• React Native uses native components instead of HTML and CSS like ReactJS.

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

Creating a React application involves setting up the development environment, initializing a project, creating components, and running the app in a browser or device.

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://react.dev/"
          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 ?

React JS Vs React Native