https://github.com/hjfitz/vdom

Basic virtual dom with state and props
https://github.com/hjfitz/vdom

preact react state vdom virtual-dom

Last synced: 19 days ago
JSON representation

Basic virtual dom with state and props

• Host: GitHub
• URL: https://github.com/hjfitz/vdom
• Owner: hjfitz
• Created: 2020-12-29T16:56:47.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2023-06-21T07:47:05.000Z (over 1 year ago)
• Last Synced: 2024-11-14T10:40:46.105Z (3 months ago)
• Topics: preact, react, state, vdom, virtual-dom
• Language: JavaScript
• Homepage:
• Size: 113 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vdom

I wanted to see if I could write my own react, to understand the framework. I did just that.

This is a highly un-tested, highly experimental dom-hybrid react-esque framework. 

## Usage

If you actually did want to play with this framework, it works as follows:

**Create and render an element**

```jsx

// yes, this needs a better name

import {render, h} from 'hareact'

// this should theoretically be friendly with jsx

const para = h('p', { class: 'bg-red' }, 'hello, world')

const body = h('main', {}, h(para))

document.addEventListener('DOMContentLoaded', () => {

  const entryPoint = document.getElementById('entry')

  render(h(body), entryPoint)

}

```

**Use stateful elements**

```jsx

import {h} from 'hareact'

// we get 3 'hooks'. Two for managing state and one for mounting

export const clock = (_, {setState, state, onMount}) => {

  onMount(() => {

    setInterval(() => setState(new Date()), 1e3)

  })

  return h('p', {}, 'The time is: ' state)

}

```