Hello HTML!

100%

✓ Published0🌍 Public

Last edited Dec 6, 2021

Created on Dec 6, 2021

This example demonstrates a minimal React application rendering a single yellow circle with a black outline as an SVG graphic. The code imports React and ReactDOM directly from UNPKG-hosted CDN libraries, defines a functional component that returns SVG markup, and mounts it into the page’s root element. It also includes a local ES6 module (`myMessage.js`) exporting a string, though that string is not displayed. The visualization serves as a simple introduction to combining React with SVG for declarative drawing.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello HTML

This example displays a simple yellow circle with two black eyes on a plain SVG canvas, accompanied by the text “hello” in the page header. It demonstrates the minimal setup for a React-based visualization. The code imports React via a UMD script from unpkg and renders static SVG shapes directly in the HTML body, showing how to combine React, CSS, and JavaScript without any additional libraries or data processing.

GGabrielle-Ar

91% match

Loading thumbnail…

Hello HTML

A React application renders a single yellow circle with a black outline at the center of an SVG canvas. The circle is positioned using fixed width and height dimensions of 960 by 500 pixels, with its center calculated from those values. ReactDOM renders the App component into a root div, while the SVG element defines the circle's radius, fill, stroke, and stroke-width attributes directly. The example demonstrates minimal setup using React 17 and SVG without any external data or interaction.

KKasidisGit

90% match

Loading thumbnail…

Hello HTML

This example displays a minimal HTML page implemented with React 17 and ReactDOM, rendering an SVG visualization. The code demonstrates a basic setup where React creates and manages SVG elements, with a commented-out yellow circle serving as a reference for the expected output. Using the `react` and `react-dom` UMD builds from unpkg, the page initializes a React root and logs ReactDOM to the console. The SVG rendering approach highlights how React integrates with standard web technologies for simple graphical displays.

Jjackson9413

90% match

Loading thumbnail…

Hello HTML

This example shows a static yellow circle with a black outline and two smaller unfilled circles, resembling a simple face, rendered directly in SVG. It demonstrates minimal HTML and React integration: the page loads React and ReactDOM from a CDN, then draws the SVG shapes inline, while a separate script logs the React object to the console. The code includes an unused React component that renders “Hello JSX” via `ReactDOM.render`, though it is not displayed on the page.

Ffuatio

90% match

Loading thumbnail…

Hello HTML Svg

This example shows a simple React application that renders a yellow circle with a black outline inside an SVG canvas, accompanied by two smaller unfilled circles. It demonstrates how to combine React with SVG elements using ReactDOM.render() to mount the component. The code imports React and ReactDOM from UMD builds, defines a functional component that returns SVG markup with hardcoded attributes like cx, cy, r, and stroke-width, and inserts it into a root div. The rendering approach relies on React’s declarative JSX syntax to describe the SVG shapes.

VVAIBHAV PAL

90% match

Loading thumbnail…

Hello html

This example renders a simple, static SVG scene of a yellow circle with a black outline and two smaller unfilled circles representing eyes. The React-based application uses JavaScript to define dimensions and stroke properties, passing them into the SVG element. The code loads React and ReactDOM from CDN and renders the graphic into a root div, demonstrating a minimal setup for SVG visualization with React.

Ssukhmani0117

90% match

Loading thumbnail…

Hello HTML

A minimal React page displays a large yellow circle with a black stroke over an SVG canvas, accompanied by two smaller black circles positioned inside it. The components are drawn directly in the SVG markup, while React and ReactDOM are loaded from CDN scripts. The page also includes a broken script tag and a YouTube embed link in its README, though these do not affect the rendered output. The visualization demonstrates basic SVG shapes within an HTML document without any interactive behavior or data binding.

Aagreenyy

89% match

Loading thumbnail…

Hello HTML

A single yellow circle with a thick black stroke fills the center of an SVG canvas. Built with React 18.2, the component renders a 960×500 pixel viewport using hard-coded coordinates and radius values from the `App` function. The page imports React and ReactDOM via CDN and mounts the SVG to a root div, while an embedded YouTube video demonstrates the setup. The example shows the minimal structure needed to combine React’s declarative rendering with SVG for basic data visualization shapes.

Nnofferdahl

88% match