Reaccionar renderizar HTML
El objetivo de React es, en muchos sentidos, representar HTML en una página web.
React muestra HTML en la página web mediante una función llamada
ReactDOM.render().
La función de renderizado
La ReactDOM.render()función toma dos argumentos, código HTML y un elemento HTML.
El propósito de la función es mostrar el código HTML especificado dentro del elemento HTML especificado.
¿Pero renderizar dónde?
Hay otra carpeta en el directorio raíz de su proyecto React, llamada "public". En esta carpeta, hay un index.htmlarchivo.
Notarás un solo <div>
en el cuerpo de este archivo. Aquí es donde se representará nuestra aplicación React.
Ejemplo
Mostrar un párrafo dentro de un elemento con el id de "raíz":
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));El resultado se muestra en el <div id="root">elemento:
<body>
<div id="root"></div>
</body>
Tenga en cuenta que la identificación del elemento no tiene que llamarse "raíz", pero esta es la convención estándar.
¡Obtener la certificación!
$95 INSCRÍBETE
El código HTML
El código HTML de este tutorial utiliza JSX, que le permite escribir etiquetas HTML dentro del código JavaScript:
No se preocupe si la sintaxis no le resulta familiar, aprenderá más sobre JSX en el próximo capítulo.
Ejemplo
Cree una variable que contenga código HTML y muéstrela en el nodo "raíz":
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
ReactDOM.render(myelement, document.getElementById('root'));
El nodo raíz
El nodo raíz es el elemento HTML en el que desea mostrar el resultado.
Es como un contenedor de contenido administrado por React.
NO tiene que ser un <div>elemento y NO tiene que tener id='root':
Ejemplo
El nodo raíz se puede llamar como quieras:
<body>
<header id="sandy"></header>
</body>
Mostrar el resultado en el <header id="sandy">elemento:
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));