Ways to incorporate React.js into HTML for showcasing a portfolio

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>

Answer №1

  1. Make sure to execute
    ReactDOM.render(app, document.querySelector('#app'));
    only after the <div id=app> has been loaded. Place your <script> tags at the bottom of the body:
...
  <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c2e393d3f281c6d697268726d">[email protected]</a>/dist/react-with-addons.js"></script>
  <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="582a3d393b2c753c373518696d766c7669">[email protected]</a>/dist/react-dom.js"></script>
  <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9cbc8cbccc584daddc8c7cdc8c5c6c7cce99f8798908799">[email protected]</a>/babel.min.js"></script>
  <script src="scripts.js"></script>
</body>
  1. Eliminate the import statements.
    For HTML pages that use React via <script> tags, there is no need for the import statements. The import syntax is designed for Javascript modules, which require a server and additional configuration.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Every DIV is filled with HTML and CSS

My navigation bar currently has icons placed at the center of a DIV, but I would like to fill up the entire DIV without any spaces left on the sides. The HTML code for the DIV containing the icons is as follows: <nav class="navbar navbar-expand navbar ...

Executing a Function Prior to onClick Event of a Link Element in Next.js

While working on a slider/carousel, I encountered an issue. Each photo in the slider should be draggable back and forth, with a click taking the user to a product page. I am using next.js with react-flickity-component for this purpose. Please note that thi ...

Position an element to the right inside its parent container with varying width in Internet Explorer 7 or earlier

I am trying to align a button to the right edge of a table inside a container-div that has no set width. The goal is to have the button float on the right side of the table, lining up with its right edge. While my current approach works in most browsers, i ...

Display personalized error messages using jQuery and PHP

I implemented an Ajax autocomplete feature on an input field within a form using jQuery. Here are the ajax settings I have set up: $.ajax({ type: "POST", url: myUrl, data: $("#id__form").serialize(), success: function(data){ ...

Creating custom shortcuts with Storybook possible?

I have been attempting to create aliases for the storybook, but despite searching for a solution on the website, I still can't seem to get it to work. The existing aliases in my original webpack.config.js file are not being cached, and I'm encoun ...

What strategies can I implement to stop Iframes from disrupting the browser's history when interacting with them?

In my particular situation, I utilize Iframes to display Grafana on my page, which showcases beautiful and user-friendly graphs. After examining, I noticed that interactions like zooming in or out on the graph using mouse clicks trigger a type of refresh ...

The AngularJS element fails to display on the screen

I am currently learning AngularJS and I am struggling to understand how components are linked to the view in the tutorial. I have created a component that is quite similar: angular.module('phonecatApp').component('nameList', { temp ...

setting the width of <input> fields to automatically adjust

Curious about CSS. I was under the impression that setting width:auto for a display:block element would make it 'fill available space'. However, when applied to an <input> element, this doesn't seem to hold true. For instance: <b ...

Enhance your images with Jquery thumbnail zoom feature

I am in the process of creating color swatches for clothing items, using them as a reference point. http://jquery.malsup.com/cycle/pager7.html Take a look at the thumbnails on the webpage mentioned above. My goal is to display these thumbnails without re ...

Issue with displaying InputLabel in Material-UI FormControl

https://i.stack.imgur.com/pJznX.jpg The image shows that my label is positioned behind the outline, and I'm uncertain as to why. I did not apply any specific style other than setting a minWidth property, yet it appears broken with the label hiding be ...

Target specifically the onhover div element using JQuery and trigger the smooth sliding down effect with the SlideDown() function

Is it possible to create a unique JQuery slidedown() function that will only be applied to the div where the mouse is hovering? I have managed to make it work by giving each div a separate class, but when I name them all the same, it triggers the slide do ...

Transform an array into an object with assigned key names

How can we transform the following array: [2019,2020,2021] into the format: { 0: {year:2019}, 1: {year:2020}, 2: {year:2021} } ...

Do not include API/login endpoints in the router configuration for routing

I am currently working on a React App where I have set up proxy requests to Django. In Django, I have integrated allauth for social app login management. However, my app is an SPA using react-router. Whenever I have a link such as /accounts/github/login, ...

What is the best way to retrieve metadata and open graph information from a link?

I am currently working on developing a sharing feature that allows users to paste links and share them with their friends. My goal is to extract information such as title, description, and images when a user pastes a link, similar to how Facebook or Linked ...

Objects in Three.js Sparkling from Afar

Currently, I am tackling a project that involves working with scenes containing objects ranging from 10 to 1000000 in size. A recurring issue I have encountered is that when dealing with the larger end of this size spectrum, the objects seem to 'shimm ...

Javascript callback function

Greetings everyone! I've developed a simple nodesjs server using express. The server includes a login page where users enter their credentials to be checked against an Sqlite3 DB. My concern lies in the fact that the callback function only executes on ...

The error handler in AngularJS $http service is always left wanting for a call

Here's the code snippet I'm currently using: $http .post('/api/login', $scope.user) .success(function (data, status, headers, config) { // code }) .error(function (data, status, headers, config) { // code }); It seems to be functi ...

Exploring the Fundamentals of XSS

Currently, my technology stack consists of Symfony2, Twig, and Doctrine. When it comes to securing my website, I am particularly concerned about preventing XSS attacks. However, despite taking precautions, I'm not sure what more I can do. Persisten ...

Move to the right with floating using Angular Material

I am dealing with a situation in which I have an md-card-content element. Inside it, there is a div and another md-card-content element. The challenge I am facing is that I want to move the contents of the inner md-card-content to the right. I tried usin ...

Display a pdf stream within a fresh window

I have a PDF document generated on the server that I need to display on the client side. The code on the server looks like this: ByteArrayOutputStream baos = generatePDF(); response.setContentType("application/pdf"); response.setHeader("Content-Dispositio ...