Usando React.js en Shared Hosting
Software
Sobre React
React (también conocido como React.js o ReactJS) es una biblioteca de JavaScript del lado del cliente para crear interfaces de usuario. Uno de sus principios rectores es la adopción gradual y la posibilidad de "usar tanto como sea necesario".
Usando React
Para usar React en una página web, todo lo que tiene que hacer es incluir dos archivos JavaScript. Hay algunas formas de hacer esto:
- Puede cargar los archivos de la biblioteca de React en una ubicación en su cuenta y luego hacer referencia a ellos directamente en sus páginas web. Por ejemplo, el siguiente fragmento de HTML muestra una forma posible de hacer esto:
<script src = "lib / react.min.js"> </script> <script src = "lib / react-dom.min.js"> </script>
- Debe cargar los archivos de la biblioteca de React en un directorio que sea de acceso público (como el directorio public_html o uno de sus subdirectorios).
- Para ver el repositorio oficial de código de React, visite https://github.com/facebook/react .
-
Alternativamente, puede configurar sus páginas web para hacer referencia a los archivos de la biblioteca de React alojados por un tercero. Por ejemplo, el siguiente fragmento de HTML demuestra cómo incluir los archivos de la biblioteca React del repositorio de paquetes de unskg :
<script src = "https://unpkg.com/ react @ 16 /umd/react.production.min.js"> </script> <script src = "https://unpkg.com/ react-dom @ 16 /umd/react-dom.production.min.js"> </script>
Después de incluir los archivos de la biblioteca de React en una página web, tiene acceso a todas las funciones de React.
Un simple ejemplo de React
El siguiente ejemplo crea un elemento React muy simple y lo muestra en una página HTML.
Primero, cree un archivo llamado react.html y luego copie y pegue el siguiente código en el archivo:
<! DOCTYPE html> <html> <cabeza> <title> Reaccionar prueba </title> </head> <cuerpo> <p> Aquí está nuestro elemento React: </p> <div id = "react_ui"> </div> <script src = "https://unpkg.com/ react @ 16 /umd/react.production.min.js" crossorigin> </script> <script src = "https://unpkg.com/ react-dom @ 16 /umd/react-dom.production.min.js" crossorigin> </script> <script src = "ui.js"> </script> </body> </html>
A continuación, cree un archivo llamado ui.js y luego copie y pegue el siguiente código en el archivo:
'use strict';
const e = React.createElement ('h1', {}, 'Hola mundo');
const domContainer = document.querySelector ('# react_ui');
ReactDOM.render (e, domContainer);
Finalmente, cargue los archivos react.html y ui.js en el directorio public_html de su cuenta y luego cargue el archivo react.html en su navegador web. Debería ver Hello world desde el elemento React.
Solución de problemas de páginas habilitadas para React
Debido a que React está basado en JavaScript y se ejecuta en el cliente, puede usar un navegador web para solucionar y diagnosticar problemas. Muchos navegadores web incluyen una consola que proporciona información detallada sobre el entorno de ejecución de JavaScript. Ingrese a la consola de desarrollo de su navegador favorito.
