https://github.com/anthonydmays/frameworkless-react

A demo using React without a framework in pure JS
https://github.com/anthonydmays/frameworkless-react

html javascript react reactjs

Last synced: 18 days ago
JSON representation

A demo using React without a framework in pure JS

• Host: GitHub
• URL: https://github.com/anthonydmays/frameworkless-react
• Owner: anthonydmays
• License: gpl-3.0
• Created: 2024-12-19T06:29:23.000Z (21 days ago)
• Default Branch: main
• Last Pushed: 2024-12-19T06:43:49.000Z (21 days ago)
• Last Synced: 2024-12-19T07:27:53.548Z (21 days ago)
• Topics: html, javascript, react, reactjs
• Language: JavaScript
• Homepage: https://anthonydmays.github.io/frameworkless-react/
• Size: 0 Bytes
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![pages-build-deployment](https://github.com/anthonydmays/frameworkless-react/actions/workflows/pages/pages-build-deployment/badge.svg)](https://github.com/anthonydmays/frameworkless-react/actions/workflows/pages/pages-build-deployment)

# Framework-less React Demo

## Author

Anthony D. Mays (@anthonydmays) - [YouTube](https://youtube.com/@anthonydmays) | [Twitter](https://twitter.com/anthonydmays) | [LinkedIn](https://linkedin.com/in/anthonydmays) | [Github](https://github.com/anthonydmays)

## Purpose

This demo shows how to import the React library from NPM via the JSPM server and build components without any compilation or framework. Though not ideal for production apps, it can be useful for rapid prototyping or for enhancing simple static sites that can be easily deployed.

Learn how I did it by checking out my short [on YouTube](https://youtube.com/shorts/G2-HIgIUbhY?feature=share).

## Tools used

* [React](https://react.dev)

* [HTM](https://github.com/developit/htm)

* [lit-html (VS Code extension)](https://marketplace.visualstudio.com/items?itemName=bierner.lit-html)

* [JSPM Generator](https://generator.jspm.io/)

* [Tailwind CSS](https://tailwindcss.com/)

## TODO

- [ ] Add example component with embedded CSS stylesheet

- [ ] Experiment with Shadow DOM

## More Resources

* [Using React without JSX == no build (dev.to)](https://dev.to/dperrymorrow/using-react-without-jsx-no-build-14gg) by David Morrow

* [React, JSX, ES module imports (dynamic too) in browser without Webpack (Medium)](https://medium.com/@chrislewisdev/react-without-npm-babel-or-webpack-1e9a6049714) by Kirill Konshin