Fork of React Starter 1

100%

Fork of React Starter 1

✓ Published0🌍 Public

Last edited Jan 18, 2022

Created on Jan 18, 2022

This example shows a minimal static graphic with a blue circle and rectangle positioned inside an SVG container. The page uses React to render a simple "Hello React!" message, while the SVG shapes are hardcoded directly in the HTML. The code relies on ReactDOM to mount the React component and plain SVG elements (circle and rect) for the drawing, with no dynamic data or interaction.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React Starter

This example demonstrates a basic React application rendered alongside a static SVG graphic. The React component, built with `ReactDOM.render`, displays a simple "Hello React!" message, while the SVG contains a black line and a short path element drawn with stroke styling. The code combines the React library with hardcoded SVG markup, using JSX to define the component and standard SVG attributes for the geometric shapes. It serves as a minimal starter template for integrating React with custom SVG visualizations.

AadnaneAkk

89% match

Loading thumbnail…

Fork of HTML Starter

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.

Hhannah.keatley@gmail.com

87% match

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal web page that renders a single SVG circle with a fixed radius, centered by default. The page includes a large text message and a script that logs the React object to the console. The code uses HTML for structure, CSS for styling, and JavaScript to load React via a CDN and verify its presence, though no interactive visualization or dynamic data is demonstrated. The SVG element contains a static circle, and the React library is loaded but not utilized for rendering.

RRobert Carsten

87% match

Loading thumbnail…

Fork of HTML Starter

This example combines React and SVG to display a simple static visualization of a yellow circle with two smaller circles positioned inside it. The page renders a basic React component that outputs the text “Hello Data” alongside the SVG shapes drawn directly in the HTML markup. React 18 handles the component rendering, while CSS resets the body margins and hides overflow. The visualization does not include any interactive or data-driven behavior, serving as a minimal starter template for integrating React with SVG graphics.

PPRINCE KUMAR

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

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

86% match

Loading thumbnail…

Fork of Fork of React Starter

This example displays the text "Hello React!" centered on the page, with a static SVG ellipse below it that uses a radial gradient transitioning from transparent yellow to semi-transparent red. The visualization combines React 16.13.1 for rendering the DOM message via `ReactDOM.render`, while the SVG element defines its gradient using `<radialGradient>` and `<stop>` elements. No interactive behavior or data binding is present; the SVG is purely declarative markup embedded directly in the HTML file.

FFrictionlessman

86% match

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal React application rendering a fixed yellow circle with a black border in an SVG, alongside a separate React-rendered text element. The page uses ReactDOM’s `render` method to mount a component that displays the text “PILOSATASSA” into a `div` with id `root`. The SVG circle is hardcoded directly in the HTML, with dimensions and styling specified via SVG attributes. The code demonstrates a basic integration of React with static SVG markup, without dynamic data or interactivity.

Aamiguet3

86% match