Hello Reactor

100%

✓ Published0🌍 Public

Last edited Jan 18, 2021

Created on May 14, 2017

This example demonstrates a minimal event-driven communication system built with JavaScript. It shows how two listeners attached to the same `'big bang'` event respond to a dispatched payload, with one listener logging a fixed message and the other printing the passed arguments. The code defines a custom `Reactor` class and an `Event` class, showcasing manual event registration, callback storage, and dispatch logic. The implementation relies on JavaScript's array `forEach` method to invoke all registered callbacks with the spread `...eventArgs` syntax. The data originates from a hardcoded dispatch call passing the values `135`, `'test'`, and `[1, 2, 3]`.

AI-generated description

Similar vizzes

Loading thumbnail…

requirebin sketch

This example demonstrates a simple event-driven messaging system using the Barracks library. It shows how multiple listeners can respond to the same named event, with two separate handlers writing personalized greetings to the document. The code creates a dispatcher instance, registers two 'hello' listeners, and triggers the event with the name 'Loki'. The visualization highlights the sequence of output generated by both listeners when the event fires.

HHypercubed

61% match

Loading thumbnail…

React Listeners

This example displays a large, centered “Hello React!” message using React. The code defines a simple App component that renders a div with the message, and ReactDOM.render mounts it to the root element. It uses the React and ReactDOM production UMD builds from unpkg, along with a bundle.js file, to demonstrate a minimal React setup without additional libraries or data sources.

SSophia Cofone

61% match

Loading thumbnail…

Small tests

This example demonstrates how React event handlers interact with contentEditable elements, rendering a large "Hey!" message that must be clicked or typed into to trigger console logs. The code defines a React class component with `handleClick` and `handleChange` methods bound to `onClick` and `onInput` props, using ReactDOM to mount the app into the root div. It relies on React 16.10.0 and ReactDOM production builds loaded via CDN, showcasing synthetic event handling on an editable HTML element.

Llapotok

60% match

Loading thumbnail…

NO a priori knowledge needed to detect anything about a web page

This example visualizes the distribution of JavaScript event listeners attached to DOM nodes on the BBC and CNN homepages using data from JSON dumps supplied in the gist. It shows which event types occur most frequently and how many listeners are registered per element, with node IDs and tag names labeled directly in the visualization. The React-based interface renders the listener counts using D3’s hierarchical layout and color-coded circles, while node-specific data is processed from the `listenerCount` and `listenersPerNode` objects. The code relies on `d3.hierarchy` and `d3.pack` to generate the bubble chart from the provided JSON files.

NN0taN3rd

59% match

Loading thumbnail…

React Starter 101

This example demonstrates a minimal React application that renders a greeting message and a button, where clicking the button updates the displayed text from "Hage" to "Hige" using React’s `useState` hook. It uses React and ReactDOM from unpkg CDN, and the app is mounted into a `#root` div. The code includes a CSS class for large, centered text and shows basic event handling with an inline `onClick` callback.

DDa1Fu

58% match

Loading thumbnail…

Gist c4276ed96ff4bd575933c7ad390a7a92

This example demonstrates a custom event-dispatch loop using the D3 dispatch module. It creates a `dispatch` object with a `foo` event, registers a handler, and then triggers that event 3,000 times via `dispatch.call`. The handler checks whether the passed argument is `undefined` and prints a message if so. The page displays the total number of times the handler was called. The code relies on `d3_dispatch.dispatch` and the `on`/`call` methods to manage custom event flow, with no external data source.

HHypercubed

58% match

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders two distinct text messages on a single page. It shows a static “Hello World” message using direct DOM manipulation via `document.getElementById` and `textContent`, alongside a larger “Hello React!” message rendered with React and ReactDOM. The code uses React 16.10 and ReactDOM to mount a functional component into a root div, while an HTML pre-element is populated outside React’s component tree. A bundle.js file, referenced in the HTML, is expected to contain the compiled React code.

Sshelbiekim

58% match

Loading thumbnail…

React Starter

This example demonstrates a straightforward interactive message display built with React 16.10. It initially shows the static text “Welcome” and changes that text to “What can I do?” when the user clicks on the message. The application uses the React `useState` hook to manage the displayed string, and it renders the content into the DOM via `ReactDOM.render`. The code relies on the React and ReactDOM production UMD builds loaded from unpkg, with the app logic defined in an `index.js` module bundled into `bundle.js`. No external data source is used; the interaction is purely client-side state handling.

AAaxellD

57% match