Fork of Hello HTML

100%

Fork of Hello HTML

✓ Published0🌍 Public

Last edited Jun 18, 2024

Created on Jun 18, 2024

This example demonstrates a minimal React setup that renders both a static SVG graphic and a dynamic JSX element. It shows a yellow circle with two smaller circles, drawn directly in the SVG markup alongside an `<h1>` tag that says "Hello JSX". The code imports React and ReactDOM, logs the ReactDOM object to the console, and uses `ReactDOM.render()` to mount a functional component into the `#root` div. The SVG is hardcoded in the HTML, while the React component handles text rendering.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

This example shows a static SVG scene of a yellow circle with two smaller black circles, rendered alongside a React-generated "Hello JSX" heading. The code combines a hand-written SVG directly in the HTML with a React component mounted via `ReactDOM.render`. It uses the React 17 UMD production builds from unpkg, with the SVG coordinates and styling defined inline, while the React app only produces a simple text element. No data or interaction is present; the visualization demonstrates how to embed SVG markup within a React-powered page.

Llohuza

93% match

Loading thumbnail…

Fork of Hello HTML

This example shows a static SVG scene of a yellow circle with black outline and two smaller circles, alongside a React-rendered heading. The page loads React 18 and ReactDOM 17 via UMD scripts, then uses `ReactDOM.render` to insert JSX into a root div. The SVG circles are drawn directly in the HTML, with hardcoded coordinates and styles. The code demonstrates basic SVG markup combined with React’s declarative rendering, though the SVG elements are not generated through React components.

PPGC-2557

93% match

Loading thumbnail…

Fork of Hello HTML

This example displays a simple yellow circle with two smaller black circles—a schematic face—rendered as static SVG elements on a 960x500 canvas. It pairs this hand-authored SVG with a React app that logs the React library to the console and attempts to render a "Hello JSX" heading via `ReactDOM.render`, though the component returns nothing. The code loads React 18.2.0 from a CDN and uses plain SVG circle elements, not D3 or other visualization libraries, highlighting a minimal integration of React with SVG markup.

HHannah Heejeong Lim

93% match

Loading thumbnail…

Fork of Hello HTML

This example combines a React-rendered “Hello JSX” heading with a static SVG face drawn directly in HTML. The SVG contains three circles—a large yellow outline and two smaller black eyes—created with basic shape elements. React 16.9.0 and ReactDOM render the JSX component into a root div, while the SVG sits outside the React tree, using fixed coordinates and no data binding. The page demonstrates a minimal integration of React with hand-coded SVG markup.

Ccasclark

93% match

Loading thumbnail…

Fork of Hello HTML

This example uses React and ReactDOM to render a static SVG scene of a yellow circle with a black outline and two smaller black circles positioned as eyes, creating a simple face. The SVG elements are defined directly within a React component and mounted into the DOM via ReactDOM's `render` method. The code also logs the React and ReactDOM objects to the console. The visualization relies on SVG's basic shape primitives (`circle` with `r`, `cx`, and `cy` attributes) and does not incorporate any external data or interaction.

KKay Nguyen

93% match

Loading thumbnail…

Fork of Hello HTML

This example displays a static yellow circle centered on a 960 by 500 SVG canvas, with a React-based root element positioned above it. The page loads React 16.7.0 and ReactDOM from unpkg, then uses `createRoot` from ReactDOM to mount a JavaScript component into the `#root` div. The SVG circle is rendered directly in the HTML markup, independent of the React component. The visualization demonstrates a minimal setup for combining React’s component model with raw SVG rendering in a single page.

Jjethrodancel

92% match

Loading thumbnail…

Fork of Hello HTML

A static SVG face, rendered from hardcoded circle elements in the index.html body, displays a yellow head with a black outline and two black eye circles. A React root element exists on the same page, though its JavaScript contains a typo—calling `ReactDOM.reder` instead of `ReactDOM.render`—so the JSX `<h1>Hello JSX</h1>` does not mount. The example pairs plain SVG markup with the React 18 UMD libraries loaded via CDN, but the drawing itself does not rely on the framework. The SVG uses explicit pixel coordinates for its shapes.

NNekosink

92% match

Loading thumbnail…

Fork of Hello HTML

This example renders a simple static scene with React and SVG, displaying a yellow circle with two smaller black circles inside it. The code loads React and ReactDOM from a CDN and uses JSX syntax in an accompanying `index.js` file, although the drawing itself is plain SVG markup embedded in `index.html`. The page includes a console log statement and a linked YouTube video preview, while the script at the bottom defines a React component that renders a header. The visualization demonstrates basic SVG shape creation without any data binding or interaction.

VVenu

91% match