elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado:


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Usar react offline?		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Usar react offline?  (Leído 3,916 veces)
@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.399


Turn off the red ligth


Ver Perfil WWW
Usar react offline?
« en: 1 Mayo 2020, 19:11 pm »
Hola, estoy intentando correr React offline y no tengo nada claro cual es el problema.

En su web tienen estos script src:
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

Entonces accedí a cada link y usando este programa:
https://github.com/StringManolo/Smpider/blob/master/shortVersion.js

seleccioné el innerHTML de los pre tag de los links y me los descargué como 2 archivos. reactDev.js y reactDevDom.js

Utilicé un ejemplo que tienen en la web y substituí los valores de ambos atributos src por la ruta de los nuevos archivos.

Por último hice un servidor en node.js para responder al navegador con los content-type en la cabecera.

Hago un url.parse con el módulo url y en base a la extensión escribi el content type adecuado.
Algo así:
Código
  1. if (pathname.substr(pathname.length-3 == ".js") {
  2.  response.writeHead(200, { "Content-Type": "text/html"});
  3. } else {
  4.  response.writeHead(200, { "Content-Type": "text/javascript"});
  5. }
  6. response.write(contenidoArchivo);

Probé varios content-type en lugar de text/javascript, no sé si estará ahí el error.


Cuando cargo el index.html simplemente no carga el botón que se supone que tiene que cargar.

El ejemplo es este de carga react en un minuto con las etiquetas script.
https://reactjs.org/docs/add-react-to-a-website.html



Básicamente quiero poder desarrollar offline y cachear las libs para que con mi caca internet no tarde 5 minutos en descargar las libs cada vez que abra una app en el navegador.
 
En línea
Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖
[u]nsigned


Desconectado Desconectado

Mensajes: 2.397

JS/Node developer


Ver Perfil WWW
Re: Usar react offline?
« Respuesta #1 en: 2 Mayo 2020, 03:35 am »
Yo creo que te estas complicando mucho, lo mejor es usar npm. Yo vivo en el sur de argentina, y tengo un inet de 3mb y no tengo ningún problema, no creo que vos en españa tengas un inet peor xD.

Si ya tenes node entonces tenes NPM y NPX. Lo mejor para desarrollar con react es usar la herramienta create-react-app. Para instalarla de forma global solo ejecuta en una terminal:

Código
  1. npm install -g create-react-app

Y una vez instalada, para crear un bolilerplate de una app de react simplemente ejecutas:

Código
  1. create-react-app nombre_de_tu_app

Y en menos de 5 minutos tendrás todo lo necesario para trabajar de forma profesional con react, el transpilador de de babel, etc.

 >:D


Ahora, si insistes en trabajar de esa forma, simplemente incluyendo la libreria en un documento html por medio de etiquetas script como si de jquery se tratara, lo mejor en mi opinión es instalar en local dichas librerias con npm. Creas una carpeta, y dentro de ella en tu shell ejecutas:

Código
  1. npm init -y

Con eso crearas un archivo package.json generico, en necesario para el siguiente paso, que consiste en instalar los paquetes de forma local con npm:

Código
  1. npm install react react-dom

Y con eso ya tendrias todos los archivos del ambos paquetes en local, dentro de la carpeta node_modules.

Solo hay que aclarar que react solo funciona desde un servidor web(http/https), no funciona desde el sistema de archivos(file://). Lo mas práctico es instalarte de forma global el paquete http-server con la siguiente instrucción en tu shell:

Código
  1. npm install http-server --global

Y luego lanzarlo desde la terminal

Código
  1. http-server

Para el ejemplo que estas siguiendo el codigo quedaria asi:

index.html:
Código
  1. <!DOCTYPE html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>Add React in One Minute</title>
  6.   </head>
  7.   <body>
  8.     <h2>Add React in One Minute</h2>
  9.     <p>This page demonstrates using React with no build tooling.</p>
  10.     <p>React is loaded as a script tag.</p>
  11.  
  12.     <!-- We will put our React component inside this div. -->
  13.     <div id="like_button_container"></div>
  14.  
  15.     <!-- Load React. -->
  16.     <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  17.     <script
  18.       src="./node_modules/react/umd/react.development.js"
  19.       crossorigin
  20.     ></script>
  21.     <script
  22.       src="./node_modules/react-dom/umd/react-dom.development.js"
  23.       crossorigin
  24.     ></script>
  25.  
  26.     <!-- Load our React component. -->
  27.     <script src="like_button.js"></script>
  28.   </body>
  29. </html>
  30.  

like_button.js:

Código
  1. "use strict";
  2.  
  3. const e = React.createElement;
  4.  
  5. class LikeButton extends React.Component {
  6.   constructor(props) {
  7.     super(props);
  8.     this.state = { liked: false };
  9.   }
  10.  
  11.   render() {
  12.     if (this.state.liked) {
  13.       return "You liked this.";
  14.     }
  15.  
  16.     return e(
  17.       "button",
  18.       { onClick: () => this.setState({ liked: true }) },
  19.       "Like"
  20.     );
  21.   }
  22. }
  23.  
  24. const domContainer = document.querySelector("#like_button_container");
  25. ReactDOM.render(e(LikeButton), domContainer);
  26.  
  27.  

Acabo de probarlo y funciona perfecto. Luego podes reutilizar esa carpeta e ir creando otros archivos html y js a medida que progresas con los tutoriales. No tendrias que volver a descar react ni react dom nunca mas,

Pero desde mi humilde punto de vista, lo mejor y mas profesional es trabajar con la herramienta create-react-app

Saludos.
En línea
No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!
@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.399


Turn off the red ligth


Ver Perfil WWW
Re: Usar react offline?
« Respuesta #2 en: 2 Mayo 2020, 08:58 am »
Ya viera por ahí lo de instalarlo así en node. Lo malo es que tengo el Android que uso para desarrollo petado y mi internet es de pocos kb/s xD. Tiene que ir como lo estaba intentando, no sé cual es el problema... Lo intentaré de nuevo capturando las petis de las libs originales y las replico con netcat o algo. Se me hace extraño que no me vaya como lo intenté, por eso lo comenté a ver si alguien ve el problema. Con vue hice exactamente lo mismo y me va perfecto.

Si no lo consigo cuando me den los datos limpio un poco el Smartphone y lo instalo por node tal como me recomiendas. Gracias.
En línea
Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Usar cliente juego mmorpg para servidor local offline
Redes 		nickolae19 0 2,380 Último mensaje 16 Noviembre 2012, 03:42 am
por nickolae19
crear app hibrida. ¿react native ó ionic2?
Desarrollo Web 		OssoH 1 2,800 Último mensaje 2 Julio 2017, 19:00 pm
por MinusFour
[Duda] Auth con Google Firebase + React JS Web
Desarrollo Web 		Gustavo_Hack 2 2,561 Último mensaje 22 Julio 2017, 19:16 pm
por Gustavo_Hack
desarrollar juego con react native
Programación General 		yina07 0 2,902 Último mensaje 25 Marzo 2019, 17:07 pm
por yina07
Pregunta sobre React
Desarrollo Web 		Cergath 2 4,004 Último mensaje 12 Noviembre 2020, 18:15 pm
por Cergath
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines