Skip to content
Related Articles

Related Articles

How to view React App in a different devices ?

Improve Article
Save Article
  • Last Updated : 03 Mar, 2022
Improve Article
Save Article

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application. React uses a declarative paradigm that makes it easier to reason about your application and aims to be both efficient and flexible. It designs simple views for each state in your application, and React will efficiently update and render just the right component when your data changes.

Usually, when we create a react-app, we used to view it at localhost:3000. In this article, we will see how to view React App in a different device.

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

Prerequisite: All devices are connected to same wifi.

Below is the step-by-step implementation.

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




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


Step 4: We will simply create the component GFG.jsx.

Javascript




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:

 

 

Step 5: 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 in mobile phone.

 

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!