es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Al utilizar enlaces cdn de React para un sitio, se requiere el uso de componentes de clase o puedo utilizar componentes de función?

¿Al utilizar enlaces cdn de React para un sitio, se requiere el uso de componentes de clase o puedo utilizar componentes de función?

21 Jul, 2023 Programación

Estoy buscando una solución/respuesta sencilla para esto. Planeo usar esto en un producto más grande para el trabajo y prepararme para enseñar a otros cómo usarlo.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Playground</title>
    <script crossorigin="" src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin="" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <style>
    </style>
</head>

<body>
    <div id="root"></div>
</body>
<script src="./scripts/button.js"></script>
</html>
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El fragmento de código proporcionado es un documento HTML que incluye las bibliotecas de React.js y un marcador de posición de div con el ID “root”. También incluye una etiqueta de script que hace referencia a un archivo button.js que no está incluido en el fragmento.

    Para proporcionar una solución/respuesta simple, aquí tienes una descripción rápida de lo que hace el código:

    • El documento HTML establece la estructura básica de una página web.
    • Las etiquetas meta especifican la codificación de caracteres, la compatibilidad con Internet Explorer y la configuración inicial del viewport.
    • La etiqueta de título establece el título de la página.
    • Las etiquetas de script cargan las versiones de desarrollo de React.js y React-DOM.js desde ubicaciones remotas de CDN (Content Delivery Network).
    • La etiqueta de estilo está vacía, lo que significa que no se incluye CSS personalizado en el fragmento.
    • La etiqueta de div con ID “root” sirve como objetivo para renderizar componentes de React.
    • La etiqueta de script (con una ruta relativa) hace referencia a un archivo button.js, que no se muestra en el fragmento. Podría contener código adicional de React que cree un componente de botón y lo renderice en el div “root”.

    Para usar este código en un proyecto más grande, puedes seguir estos pasos:

    1. Asegúrate de que tu proyecto tenga acceso a Internet y pueda cargar las bibliotecas de React.js remotas desde el CDN.
    2. Crea un nuevo archivo (por ejemplo, index.html) y copia el fragmento de código en él.
    3. Agrega tu propio código de React al archivo button.js (o cualquier otro archivo JS separado) y guárdalo en una carpeta “scripts” (o cualquier otra ubicación relevante).
    4. Enlaza el archivo button.js modificado al archivo index.html ajustando el atributo src de la etiqueta de script.
    5. Abre el archivo index.html en un navegador para ver el resultado.

    Para entrenar a otros en su uso, puedes explicar los conceptos básicos de la estructura HTML y cómo cargar bibliotecas externas y archivos JS en una página web. También puedes proporcionar un ejemplo simple de cómo crear un componente de React y renderizarlo en el div “root”. Asegúrate de cubrir los conceptos principales de React, como componentes, propiedades, estado y sintaxis de JSX. También puedes recomendar recursos adicionales para aprender React y JavaScript en general, como documentación oficial, cursos en línea y foros de la comunidad.

Comments are closed.