https://github.com/elloramir/reactopus
An uncomplicated React environment. Single library file for transpiling in runtime
https://github.com/elloramir/reactopus
jsx react transpiler
Last synced: 2 months ago
JSON representation
An uncomplicated React environment. Single library file for transpiling in runtime
- Host: GitHub
- URL: https://github.com/elloramir/reactopus
- Owner: elloramir
- License: mit
- Created: 2024-12-28T03:03:32.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-01-03T02:30:30.000Z (4 months ago)
- Last Synced: 2025-01-03T03:28:40.095Z (4 months ago)
- Topics: jsx, react, transpiler
- Language: JavaScript
- Homepage:
- Size: 212 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### What is this and why?
I’ve created a simple environment to use React with just one library, addressing the frustration many face. React feels complicated for newcomers, not due to difficulty but because setting it up is chaotic. Originally an internal Facebook project, React wasn’t designed for public use and still carries that baggage. My solution simplifies React’s setup, making it approachable and almost like "vanilla" JavaScript.
### How can we achieve this?
1. Eliminate Babel: We need to transpile code ourselves, as Babel is bloated and unnecessarily large for this purpose.
2. Add module syntax support: This is essential for organizing and modularizing JSX applications effectively.
3. Extract JSX from script tags: We need a mechanism to handle inline JSX or external sources specified with src attributes.
```html
const App = () => (
<h1>Hello World</h1>
);
// Create root component
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
```
### Work in progress
- [ ] Exactly reproduce the behavior of imports in ES6, which includes: "name not exported", and no "deafult export", etc...
- [ ] AST unused node types
- [ ] Reduce bundle size