2-react-Reactar Render HTML
El objetivo de React es en muchos sentidos renderizar HTML en una página web.
Reacta hace HTML a la página web mediante el uso de una función llamada createRoot() y su método render().
La función de la bota de creación
El createRoot()función toma una argumento, un elemento HTML.
El propósito de la función es definir el elemento HTML donde se debe mostrar un componente de React.
El método de renderizar
El render() A continuación, se llama al método para definir el componente de React que debe renderizar.
Pero renderizar dónde?
Hay otra carpeta en el directorio raíz de su proyecto React, llamado "púbólico". En esta carpeta, hay un Archivo index.html.
Notarás un sencillo. <div> en el cuerpo de este archivo. Aquí es donde nuestra aplicación React se entregará.
Mostrar un párrafo dentro de un elemento con el identificador de "root":
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<p>Hello</p>);
El resultado se muestra en el <div id="root">elemento:
<body>
<div id="root"></div>
</body>
Tenga en cuenta que el elemento id no tiene que ser llamado "raíz", pero esta es la convención estándar.
El código HTML
El código HTML en este tutorial utiliza JSX que le permite escribir etiquetas HTML Dentro del código de JavaScript:
No se preocupe si la sintaxis no está familiarizada, aprenderá más sobre JSX en el próximo capítulo.
Crear una variable que contenga código HTML y mostrarlo en el nodo de "raíz":
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(myelement);
El nodo raíz
El nodo raíz es el elemento HTML donde desea mostrar el resultado. Es como un contenedor para contenido gestionado por React. NO tiene que ser un <div>elemento y lo hace NO tienes que tienen el id='root':
El nodo raíz puede llamarse como quieras:
<body>
<header id="sandy"></header>
</body>
Mostrar el resultado en el <header id="sandy">elemento:
const container = document.getElementById('sandy');
const root = ReactDOM.createRoot(container);
root.render(<p>Hallo</p>);
Comentarios
Publicar un comentario