https://github.com/follgad/vanilla-jsx
https://github.com/follgad/vanilla-jsx
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/follgad/vanilla-jsx
- Owner: FOLLGAD
- Created: 2021-07-18T22:17:12.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-07-23T19:11:59.000Z (almost 5 years ago)
- Last Synced: 2025-03-16T13:03:59.794Z (over 1 year ago)
- Language: JavaScript
- Size: 4.88 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JSX to JS — Use JSX without react
[https://mikofilas.netlify.app/blog/jsx-without-react](https://mikofilas.netlify.app/blog/jsx-without-react)
## Installation and setup
```bash
$ npm i jsx2js @babel/plugin-transform-react-jsx
```
Edit `babel.config.js` or `.babelrc`:
```js
{
// ...
"plugins": [
// ...
[
"@babel/plugin-transform-react-jsx",
{
"runtime": "automatic",
"importSource": "jsx2js"
}
]
]
}
```
Now you're ready to start writing JSX!
## Example
```jsx
const ExampleComponent = ({
children,
title = 'Default title',
...props
}) => {
return (
{title}
{children}
);
};
const Counter = ({}) => {
let clicks = 0
const clickSpan = 0
const increment = () => {
clicks++
clickSpan.innerText = clicks
}
const button = (
Clicked {clickSpan} times
)
button.addEventListener("click", increment)
return button
}
document.body.append(
Example child
It just works
)
```
Demo here: https://codesandbox.io/s/nostalgic-architecture-kv47z?file=/src/index.jsx