DavidBernalGonzalez/Main.js

## index.html
<!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>Document</title>
</head>
<body>
    <!-- Etiqueta sobre la que inyectaremos los elementos-->
    <div id="root"></div>
    <!-- Cargar React. -->
    <!-- Nota: cuando se despliegue, reemplazar "development.js" con "production.min.js". -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

    <!-- Desde aquí cargaremos nuestro/s componente/s de React. -->
    <script src="Main.js"></script>
</body>
</html>

## Main.js
/*Seleccionamos el elemento sobre el que posteriormente
introduciremos los elemnetos que vamos a crear*/
const ROOT = document.querySelector("#root");
// Guardamos ese elemento en el DOM de React
const ROOT_ELEMENT = ReactDOM.createRoot(ROOT);
// Array de objetos
const TECNOLOGIAS = [
	{ name: "HTML", uso: "Front End" },
	{ name: "CSS", uso: "Front End" },
	{ name: "JavaScript", uso: "Back & Front" },
	{ name: "Java", uso: "Back End" },
	{ name: "PHP", uso: "Back End" },
];
//Aquí guardaremos los COMPONENTES
const LI_ITEMS = [];
// Componente de React con JavaScript nativo (sin JSX)
const LI_DE_ARRAY_OBJ = (element) => {
	//Creamos el elemento: ELEMENTO, ATRIBUTOS, CONTENIDO y lo añadimos al array de LI_ITEMS
	LI_ITEMS.push(
		React.createElement("li", { className: "item" }, `${element.name}`)
	);
};

TECNOLOGIAS.forEach(item =>{LI_DE_ARRAY_OBJ(item)});
//Una vez recorrido todos los objetos del array hacemos un render de los
ROOT_ELEMENT.render(LI_ITEMS);
	<!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>Document</title>
	</head>
	<body>
	<!-- Etiqueta sobre la que inyectaremos los elementos-->
	<div id="root"></div>
	<!-- Cargar React. -->
	<!-- Nota: cuando se despliegue, reemplazar "development.js" con "production.min.js". -->
	<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

	<!-- Desde aquí cargaremos nuestro/s componente/s de React. -->
	<script src="Main.js"></script>
	</body>
	</html>
	/*Seleccionamos el elemento sobre el que posteriormente
	introduciremos los elemnetos que vamos a crear*/
	const ROOT = document.querySelector("#root");
	// Guardamos ese elemento en el DOM de React
	const ROOT_ELEMENT = ReactDOM.createRoot(ROOT);
	// Array de objetos
	const TECNOLOGIAS = [
	{ name: "HTML", uso: "Front End" },
	{ name: "CSS", uso: "Front End" },
	{ name: "JavaScript", uso: "Back & Front" },
	{ name: "Java", uso: "Back End" },
	{ name: "PHP", uso: "Back End" },
	];
	//Aquí guardaremos los COMPONENTES
	const LI_ITEMS = [];
	// Componente de React con JavaScript nativo (sin JSX)
	const LI_DE_ARRAY_OBJ = (element) => {
	//Creamos el elemento: ELEMENTO, ATRIBUTOS, CONTENIDO y lo añadimos al array de LI_ITEMS
	LI_ITEMS.push(
	React.createElement("li", { className: "item" }, `${element.name}`)
	);
	};

	TECNOLOGIAS.forEach(item =>{LI_DE_ARRAY_OBJ(item)});
	//Una vez recorrido todos los objetos del array hacemos un render de los
	ROOT_ELEMENT.render(LI_ITEMS);