Having difficulties rendering my code using React.js for my portfolio. I am attempting to showcase my projects with images and p tags containing project titles and my role. Additionally, I would like the React elements to be clickable, directing users to the project links. Unsure of what is causing issues in my code.
import React from 'react';
import ReactDOM from 'react-dom';
import './styles.css';
'use strict';
function Project(props) {
return React.createElement("div", {
className: "workbox"
}, React.createElement("img", {
src: props.img
}), React.createElement("p", null, props.title),
React.createElement("p", null, props.role));
}
var app = React.createElement("div", null,
React.createElement("a", {href: "moonlight.html"}, React.createElement(Project, {img: "images/moonlight.png",
title: "Moonlight Website Concept", role: "UI Designer"})),
React.createElement("a", {href: "dailyui.html"}, React.createElement(Project, {img: "images/dailyui.png",
title: "DailyUI Challenge", role: "UI Designer"})),
React.createElement("a", {href: "poetry.html"}, React.createElement(Project, {img: "images/theartofchoice.png",
title: "Poetry",role: "Writer"})));
ReactDOM.render(app, document.querySelector('#app'));
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/react-with-addons.js"></script>
<script src="https://unpkg.com/react-dom.js"></script>
<script src="https://unpkg.com/babel.min.js"></script>
<script src="scripts.js" type="text/babel"></script>
</head>
<body>
<div id="showcontainer">
<div id=app>
</div>
</div>
</body>
</html>