React necesita una raiz para poder empezar a trabajar. Es decir, en donde comenzar a renderizar todos los componentes que uno crea. Esa es un elemento dentro del HTML de la pagina con la que estamos trabajando. Digamos que tenemos el siguiente HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
En este caso utilizaremos el div con el id root para poder renderizar los componentes que vayamos creando. Para eso tenemos que seleccionar el elemento y convertirlo en nuestra raiz. Para eso tenemos que crear nuestro main.jsx. Es probable que a esta altura no sepas que es jsx pero por ahora tenemos que trabajar con eso. No hace falta que lo crees ademas, porque Vite lo hace por vos;
import React from 'react'
import ReactDOM from 'react-dom/client'
//Capturar el elemento que sera nuestra raiz
const id=document.querySelector(#root);
//Crear nuestro root de React
const reactRoot=ReactDOM.createRoot(id);
Con esto ya tenemos creado nuestra raiz de React y ahora podemos empezar a renderizar los elementos que querramos con la propiedad render.
reactRoot.render(
"Hola. Esta es tu primer texto renderizado en React"
)
Genial. Lograste crear un texto renderizado en React por primera vez. ¿Como haces si queres renderizar elementos HTML? No de la siguiente manera, porque esto creara un string
reactRoot.render(
"<button>Boton</button>"
)
Tampoco podes hacerlo sin comillas porque JavaScript lo entendera como una variable. Para eso tenemos que crear JSX. Acá le vamos a dedicar una pagina particular