Usar react offline?

@XSStringManolo · 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 (javascript) [Seleccionar]

if (pathname.substr(pathname.length-3 == ".js") {
 response.writeHead(200, { "Content-Type": "text/html"});
} else {
 response.writeHead(200, { "Content-Type": "text/javascript"});
}
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.

[u]nsigned · 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 (bash) [Seleccionar]

npm install -g create-react-app

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

Código (bash) [Seleccionar]

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.

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 (bash) [Seleccionar]

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 (bash) [Seleccionar]

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 (bash) [Seleccionar]

npm install http-server --global

Y luego lanzarlo desde la terminal

Código (bash) [Seleccionar]

http-server

Para el ejemplo que estas siguiendo el codigo quedaria asi:

index.html:

Código (html4strict) [Seleccionar]


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>

    <!-- We will put our React component inside this div. -->
    <div id="like_button_container"></div>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script
      src="./node_modules/react/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="./node_modules/react-dom/umd/react-dom.development.js"
      crossorigin
    ></script>

    <!-- Load our React component. -->
    <script src="like_button.js"></script>
  </body>
</html>

like_button.js:

Código (javascript) [Seleccionar]


"use strict";

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return "You liked this.";
    }

    return e(
      "button",
      { onClick: () => this.setState({ liked: true }) },
      "Like"
    );
  }
}

const domContainer = document.querySelector("#like_button_container");
ReactDOM.render(e(LikeButton), domContainer);

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.

@XSStringManolo · 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.

Test Foro de elhacker.net SMF 2.1

Usar react offline?

@XSStringManolo

[u]nsigned

@XSStringManolo