Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Aug 7, 2024

Created on Aug 6, 2024

This example demonstrates a basic React application rendering a static SVG graphic. It shows a large pink circle with purple outlines and two smaller purple circles, accompanied by an “Hello JSX” heading. The code uses React and ReactDOM from CDN, along with JSX syntax in `index.js`. The SVG element is hardcoded in `index.html`, while React renders the header into the `#root` div, and the CSS sets the page margin to zero with hidden overflow.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

This example demonstrates a minimal React application that renders static SVG shapes, including a large purple circle with a white stroke and a smaller white circle, on a dark gray background. The code uses React 16.7 and ReactDOM 18.3.1 to mount an empty `App` component to the `#root` element. The SVG elements are defined directly in the HTML file, while `bundle.js` contains the JavaScript logic. The visualization relies on SVG markup rather than any data-driven library, focusing on basic layout and styling.

Ttegangreenart@gmail.com

91% 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

91% match

Loading thumbnail…

Fork of Hello HTML

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.

MMatheus Coelho

91% match

Loading thumbnail…

Fork of HTML Starter

This example uses React to render three static SVG circles on a 960×500 canvas, composing a simple face-like illustration. The code loads React and ReactDOM from UMD bundles via unpkg, then uses JSX to define SVG elements with attributes like `cx`, `cy`, and `r` for positioning and sizing. The HTML page includes a `<style>` block (currently empty) and a `bundle.js` script reference, though no dynamic behavior or data is demonstrated—the visualization is purely declarative and static.

EEnes Gök

91% match

Loading thumbnail…

Fork of HTML Starter

This example displays a simple SVG face composed of a large orange circle with two smaller black circles for eyes. It demonstrates a minimal HTML page structure that loads React and ReactDOM from unpkg CDN links, and uses JavaScript to log the React object. The styling comes from an external CSS file, while the visual itself is hardcoded directly in the page’s markup as SVG elements. This serves as a basic template for integrating React with SVG graphics.

Sstan.philipsen@kraken.com

91% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal React application that renders a simple “hello” heading to the DOM. The code uses React and ReactDOM from unpkg, with `ReactDOM.render` targeting a root element. Although an SVG with circles is present in the HTML, it is commented out, so only the heading appears. The page uses inline CSS to reset margins and hide overflow.

AAbdessalem Lagraf

90% match

Loading thumbnail…

Fork of Hello HTML

This example demonstrates a minimal React application that renders static SVG shapes—an orange circle with two smaller black circles—directly in an HTML page. It shows how React can be used to produce SVG output without any interactive behavior or data processing. The code imports React and ReactDOM, then embeds the SVG markup directly within the JSX structure. Using the UMD builds of React 18 and ReactDOM 16 from unpkg, it renders the graphic at a fixed 960×500 viewport size.

Yyosri.hammadi@gmail.com

90% match

Loading thumbnail…

Fork of HTML Starter

This example displays a simple static SVG scene: a large yellow circle centered on a 960x500 canvas, with a smaller black circle positioned near its upper edge. The code uses React 17 loaded from unpkg, logging the React object to the console. Rendering is done through raw SVG elements defined directly in the HTML, with basic CSS resetting the body margin. No interactivity or data-driven logic is present.

Sss-cmd

90% match