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>
    <link rel="stylesheet" href="style.css">
</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"},
	{ name: "CSS", uso: "Front"},
	{ name: "JavaScript", uso: "Front"},
	{ name: "Java", uso: "Back" },
	{ name: "PHP", uso: "Back" },
];
// Mostrará una imagen en función de si el elemento es
const ADD_IMG = (info) =>{
    let imgSrc = '', specificClassName = '';;

    if(info==='Front'){
        imgSrc = 'https://img.icons8.com/external-filled-outline-lima-studio/64/000000/external-front-coding-filled-outline-lima-studio.png';
        specificClassName = 'front';
    } else if(info==='Back'){
        imgSrc = 'https://img.icons8.com/external-filled-outline-geotatah/64/000000/external-back-socio-technical-system-filled-outline-filled-outline-geotatah.png';
        specificClassName = 'back'
    }

    return React.createElement(
			"img",
			{ src: imgSrc, className: specificClassName },
			null
		);
}
//Aquí guardaremos los COMPONENTES
const ELEMENTS = [];
// 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

		ELEMENTS.push(
			React.createElement(
				"div", {className: 'container' },
				[
					React.createElement("ul", {}, [
                        // Con un array podemos meter varios elementos dentro del componente
						React.createElement("li", {}, element.name),
						ADD_IMG(element.uso),
						React.createElement(
							"li", {className: 'uso'}, element.uso
						),
					]),
				]
			)
		);

};

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

## style.css
body{
    text-align: center;
}

.container{
    border: solid 1px black;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    width: 150px;
    text-align: center;
    margin-bottom: 20px;
}

.container ul{
    list-style-type: none;
        padding: 0px;
        margin: 0px;
}

.uso{
    text-decoration: underline;
}

.front{
    text-decoration: underline;
    color: greenyellow;
}
.back{
    text-decoration: underline;
    color: salmon;
}
	<!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>
	<link rel="stylesheet" href="style.css">
	</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"},
	{ name: "CSS", uso: "Front"},
	{ name: "JavaScript", uso: "Front"},
	{ name: "Java", uso: "Back" },
	{ name: "PHP", uso: "Back" },
	];
	// Mostrará una imagen en función de si el elemento es
	const ADD_IMG = (info) =>{
	let imgSrc = '', specificClassName = '';;

	if(info==='Front'){
	imgSrc = 'https://img.icons8.com/external-filled-outline-lima-studio/64/000000/external-front-coding-filled-outline-lima-studio.png';
	specificClassName = 'front';
	} else if(info==='Back'){
	imgSrc = 'https://img.icons8.com/external-filled-outline-geotatah/64/000000/external-back-socio-technical-system-filled-outline-filled-outline-geotatah.png';
	specificClassName = 'back'
	}

	return React.createElement(
	"img",
	{ src: imgSrc, className: specificClassName },
	null
	);
	}
	//Aquí guardaremos los COMPONENTES
	const ELEMENTS = [];
	// 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

	ELEMENTS.push(
	React.createElement(
	"div", {className: 'container' },
	[
	React.createElement("ul", {}, [
	// Con un array podemos meter varios elementos dentro del componente
	React.createElement("li", {}, element.name),
	ADD_IMG(element.uso),
	React.createElement(
	"li", {className: 'uso'}, element.uso
	),
	]),
	]
	)
	);

	};

	TECNOLOGIAS.forEach(item =>{LI_DE_ARRAY_OBJ(item)});
	//Una vez recorrido todos los objetos del array hacemos un render de los
	ROOT_ELEMENT.render(ELEMENTS);
	body{
	text-align: center;
	}

	.container{
	border: solid 1px black;
	border-radius: 25px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	-ms-border-radius: 25px;
	-o-border-radius: 25px;
	width: 150px;
	text-align: center;
	margin-bottom: 20px;
	}

	.container ul{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	}

	.uso{
	text-decoration: underline;
	}

	.front{
	text-decoration: underline;
	color: greenyellow;
	}
	.back{
	text-decoration: underline;
	color: salmon;
	}