¿Cómo ver la aplicación React en diferentes dispositivos?

React es una biblioteca de JavaScript declarativa, eficiente y flexible para crear interfaces de usuario. ReactJS es una biblioteca front-end de código abierto basada en componentes responsable solo de la capa de visualización de la aplicación. React utiliza un paradigma declarativo que facilita el razonamiento sobre su aplicación y pretende ser eficiente y flexible. Diseña vistas simples para cada estado en su aplicación, y React actualizará y renderizará de manera eficiente el componente correcto cuando cambien sus datos.

Por lo general, cuando creamos una aplicación de reacción, solíamos verla en localhost: 3000. En este artículo, veremos cómo ver la aplicación React en un dispositivo diferente.

Enfoque: podemos ver fácilmente la aplicación React en diferentes dispositivos. Necesitamos averiguar la dirección IP de nuestro dispositivo usando el comando ipconfig en Windows cmd . Después de eso, podemos acceder a esa URL desde cualquier dispositivo y podremos ver esta página en nuestro dispositivo, pero siempre que ambos estén en la misma red.

Requisito previo: todos los dispositivos están conectados al mismo wifi.

A continuación se muestra la implementación paso a paso.

Paso 1: Cree una aplicación de reacción usando el siguiente comando.

npx create-react-app foldername

Paso 2: una vez hecho esto, cambie su directorio a la aplicación recién creada usando el siguiente comando.

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Paso 3: Ahora escriba el siguiente código en el archivo App.js.

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

Paso 4: Simplemente crearemos el componente GFG.jsx.

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

Paso para ejecutar la aplicación: Ingrese el siguiente comando para ejecutar la aplicación.

npm start

Producción:

Paso 5: Ahora accederemos a esta app desde el móvil. Para esto, primero averigüe la IP de su dispositivo usando el comando ipconfig en Windows cmd.

Después de encontrar su ip: suponga 255.255.255.0. Ahora accede a la url   255.255.255.0:3000 desde cualquier dispositivo. Podrá ver esta página en su dispositivo (siempre que ambos estén en la misma red)

#ip:3000

Solo vea un vistazo de la aplicación reaccionar en el teléfono móvil.