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 on your mobile phone.
