https://github.com/follgad/vanilla-jsx

https://github.com/follgad/vanilla-jsx

Last synced: 26 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/follgad/vanilla-jsx
• Owner: FOLLGAD
• Created: 2021-07-18T22:17:12.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-07-23T19:11:59.000Z (over 3 years ago)
• Last Synced: 2024-11-28T22:33:57.509Z (about 1 month 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