Open In App

How to view React App in a different devices ?

Improve
Improve
Like Article
Like
Save
Share
Report

Usually, when we create a React App, we view it at localhost:3000 on the browser. It is also possible to view React App on mobile and other devices. It will be done with the approach mentioned below.

Approach to view React App in different devices

We can easily view the React App on different devices. We need to find out the IP address of our device. In Windows, we can use ipconfig command in Windows cmd. After that, we can access that URL from any device and we will be able to view this page on our device provided both are on the same network.

Note: All devices must be connected to the same wifi.

Below is the step-by-step implementation to view React App on different devices

Steps to Create React Application:

Step 1: Create a react application using the following command.

npx create-react-app foldername

Step 2: Once it is done, change your directory to the newly created application using the following command.

cd foldername

Project Structure: It will look like the following.

Step 3: Now write down the following code in App.js file.

Javascript




// Filename - App.js
 
import GFG from './GFG'
import React from 'react';
function App() {
    return (
        <div className="App">
            <GFG />
        </div>
    );
}
 
export default App;


Javascript




// Filename - GFG.jsx
 
import React from 'react'
function GFG() {
    return (
        <div className="container"
            style={{ align: 'center' }}>
            <h1>GeeksForGeeks Portal</h1>
        </div>
    )
}
 
export default GFG;


Step to run the application: Enter the following command to run the application. 

npm start

Output: This output is visible on browser on https://localhost:3000/

Step 4: Now we will access this app from mobile. For this, first find out ip of your device using ipconfig command in Windows cmd.

After finding your ip: suppose 255.255.255.0. Now access url  255.255.255.0:3000 from any device. You will be able to view this page in your device (provided both are on same network)

#ip:3000

Just see a glimpse of react app on your mobile phone.



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