Fork of React Starter

100%

Fork of React Starter

✓ Published1🌍 Public

Last edited Aug 25, 2023

Created on Aug 25, 2023

This example demonstrates scroll-driven scaling: a sticky sky-blue box grows from 50% to 100% scale as the page scrolls through a 200vh wrapper. The App component tracks scroll progress via a `window.scrollY` event listener, computes a percentage from the scroll position relative to the wrapper’s total height, and applies the result as an inline `transform: scale()` style. It uses React’s `useState`, `useEffect`, `useRef`, and `useCallback` hooks, with rendering handled by `createRoot`.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React Starter

This example renders a full-screen “Hello React!” message in large, centered type. It demonstrates a minimal React application setup using `createRoot` from `react-dom` to mount the root component into `index.html`. The app imports React 18.2.0 from a UMD bundle, defines a stateless functional component, and renders it into the DOM. There is no data source or chart; the example focuses on boilerplate structure for React-based visualizations.

IIgor Bojković

76% match

Loading thumbnail…

Fork of React Starter

This example renders a full-screen React component that displays the text “Hello React!” in large, centered type. The code uses the React 18 `createRoot` API to mount the application into a root DOM element, with the visual style defined through inline CSS in the HTML. It serves as a minimal starter template demonstrating basic React setup without external data or complex rendering logic.

Aamith-2001

75% match

Loading thumbnail…

Fork of React Starter

This example shows a React application with a fixed left-side navigation menu that stays in place while the page scrolls. The code uses React’s `createRoot` from `react-dom` to render a simple app with a `SideNav` component, which contains links to page sections. The navigation’s styling is defined in a separate CSS file, setting a dark background, fixed width, and full height. The main content area is shifted right with an inline `marginLeft` style to accommodate the sidebar, demonstrating a basic layout pattern with no additional data or interactive behavior beyond the static links.

NNita

74% match

Loading thumbnail…

Fork of React Starter

This example shows a minimal React application that renders the text “Hello React!” in large, centered type. It uses React 16.13.1 and ReactDOM to mount the `App` component into a `#root` div, with a CSS class controlling font size and alignment. The code loads React from a CDN and bundles the JavaScript into `bundle.js`, demonstrating a basic component-based rendering setup.

Mmxd

74% match

Loading thumbnail…

Fork of React Starter

This example displays a large, centered message using React. The app renders a single div element with the text scaled to 13em, demonstrating basic React component structure and styling. Built with React 16.13.1 and ReactDOM, it uses the `useState`, `useCallback`, and `useEffect` hooks along with d3’s `csv` function to fetch and process external data. The code references a CSV URL for data loading, though the actual visualization behavior is not implemented, serving as a minimal starter template.

HHaruki Jay Shimada

74% match

Loading thumbnail…

Fork of React Starter

This example displays a large, centered "Hello React!" message on a plain web page. It renders the text by defining a React component and mounting it to a root `<div>` element using the `ReactDOM.render` method. The implementation imports React and ReactDOM from the `react` and `react-dom` packages, and includes a simple console log statement for debugging. The page loads React through CDN links, and the component’s styling comes from a CSS class setting the font size to 13em.

LLaurent Andriamifidy

74% match

Loading thumbnail…

Fork of React Starter

This example shows a React application that renders the text “Hello Reaaact!” centered on the page, using a large font size. The app is built with React and ReactDOM, with the main component defined as a simple functional component returning a div with a CSS class. The code uses React 16.13.1 from a UMD build via unpkg, and renders the component into the DOM element with the id "root". The styling is applied through an inline CSS rule that sets the font size to 13em.

Sscott306lr

74% match

Loading thumbnail…

Fork of React Starter

This example renders a full-screen "Hello React!" message using React 16 and ReactDOM. It defines a functional App component that returns a div with a 13em font size, then mounts it to the root element. The code uses the production React and ReactDOM UMD builds, styled with inline CSS for centered text.

DDain Park

74% match