https://github.com/codefromanywhere/reactify.js
Do React kinda things in vanilla JS + HTML
https://github.com/codefromanywhere/reactify.js
html
Last synced: 10 months ago
JSON representation
Do React kinda things in vanilla JS + HTML
- Host: GitHub
- URL: https://github.com/codefromanywhere/reactify.js
- Owner: CodeFromAnywhere
- Created: 2024-08-04T13:40:14.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-08T09:00:19.000Z (over 1 year ago)
- Last Synced: 2024-11-28T21:05:03.236Z (about 1 year ago)
- Topics: html
- Language: HTML
- Homepage: https://reactify-js.vercel.app
- Size: 38.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Reactify.js
Reactify.js simplfies raw HTML + JS development by adding the ability to use react-like states.
Examples:
- Counter [code](public/demo/counter.html) [result](https://reactify-js.vercel.app/demo/counter.html)
- Todo Manager [code](public/demo/todo.html) [result](https://reactify-js.vercel.app/demo/todo.html)
- Persistent Media Viewer with IndexedDB [code](public/demo/media-viewer.html) [result](https://reactify-js.vercel.app/demo/media-viewer.html)
- Blog website (multi page) [code](public/demo/blog/index.html) [result](https://reactify-js.vercel.app/demo/blog/)
Instructions:
- Works using raw HTML, CSS, and JS
- Ensure you load in a function called `renderRoot()` into your HTML
- Use `
reactify(renderRoot)` somewhere after that.
- You can add additional render-roots if it suits you by changing the render function name and using another id, e.g. `renderMenu()` and `reactify(renderMenu)`
- Unlike React, you don't need any build-tools or runtime.
- For more details: See [source code](public/index.js) (it's simple!)
Disclaimer:
- All your hooks need to be used at the root level! This also mean your states are available everywhere as they're defined at the root level, so choose your naming wisely! Naming collisions are fairly likely this way, especially on bigger projects. Ensure to either use `var` or be sure not to collide your naming.
Tips:
- Recommended VSCode plugin: [leet-html](https://marketplace.visualstudio.com/items?itemName=EldarGerfanov.leet-html)
- Take an example and use Claude.ai to generate something new in the same way.
- Divide your project into multiple pages if you run into naming collisions
- Use a VSCode plugin for naming collisions (haven't found one yet)