Skip to main content
Log in
E

encylin

@encylin·8 public vizzes

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders a static text message, “Hello React!”, centered on the page. It shows the basic structure for integrating React into a web page using a root DOM element and a separate JavaScript bundle. The code imports React and ReactDOM, defines a simple functional component, and mounts it via `ReactDOM.render`. The page loads React and ReactDOM from CDN links, with the app logic compiled into `bundle.js`.

Feb 22, 2020
Loading thumbnail…

Cars Report

This example displays a static list of car records, including make, model, year, and price, rendered as plain text in a React application. The data is defined in a `cars.js` module as a JSON string and parsed into a JavaScript array. The visualization uses React 16.10, loaded via UMD scripts, to mount components, while `index.js` updates a separate `pre` element by setting its `textContent` to a message variable. No charting or simulation library is used; the output is purely textual and non-interactive.

Feb 22, 2020
Loading thumbnail…

Cars Report

This example displays a car inventory report with make, model, year, and price for five vehicles, rendered as static text. Built with React 16.10, it parses the embedded JSON array in `cars.js` using `JSON.parse` and imports it into the main component. The page also includes a separate `<pre>` element whose text content is set via the DOM API `textContent` from `index.js`, while `index.html` loads React and ReactDOM from unpkg CDNs. The visualization is purely textual, with no charts or interactive elements.

Feb 22, 2020
Loading thumbnail…

Cars Report

This example displays a static HTML page titled “Cars Report” that parses a hard-coded JSON array of five car records (make, model, year, price) and renders it using React 16.10. The main view shows a large fixed “Hello!” message and a smaller “hi” text element, both set via direct DOM manipulation. The code uses React’s production UMD build, `JSON.parse` on embedded data, and exports the parsed `cars` array from a separate module, though no chart or table is generated from the data. The visualization relies on plain text elements rather than any d3 or canvas APIs.

Feb 22, 2020
Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders the text "Hello React!" centered on the page. It uses React 16.10.0 and ReactDOM to mount a functional component into a div with the ID "root". The component returns a simple div with a CSS class that sets a large font size and text alignment. The page loads the compiled bundle.js file, which contains the transpiled JavaScript code, and relies on the UMD builds of React and ReactDOM from a CDN.

Feb 22, 2020
Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” in enormous type at the center of the page, demonstrating the minimal structure required for a web page. It uses a plain `index.html` file with inline CSS that sets the body’s `text-align` to center and `font-size` to 13em. No JavaScript frameworks or libraries are involved; the page relies solely on native HTML and CSS rendering. It serves as a baseline for comparing with the linked React starter template.

Feb 22, 2020
Loading thumbnail…

React Starter

This example displays the text “Hello React!” centered on the page, serving as a minimal demonstration of React rendering. It uses React 16.10.0 and ReactDOM to mount a functional component into a `div#root` element, with styling applied through a CSS class. The code imports `React` and `ReactDOM` directly and calls `ReactDOM.render` to display the component, relying on the production builds of React and ReactDOM loaded via CDN links in the HTML file.

Feb 22, 2020
Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders a static text message, “Hello React!”, centered on the page. It shows the basic structure for integrating React into a web page using a root DOM element and a separate JavaScript bundle. The code imports React and ReactDOM, defines a simple functional component, and mounts it via `ReactDOM.render`. The page loads React and ReactDOM from CDN links, with the app logic compiled into `bundle.js`.

Feb 22, 2020