Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/romagny13/vdom-demo
Create vdom (with JSX)
https://github.com/romagny13/vdom-demo
demo jsx vdom
Last synced: 17 days ago
JSON representation
Create vdom (with JSX)
- Host: GitHub
- URL: https://github.com/romagny13/vdom-demo
- Owner: romagny13
- Created: 2017-03-14T19:01:38.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-15T01:34:48.000Z (almost 8 years ago)
- Last Synced: 2024-11-30T20:13:30.480Z (3 months ago)
- Topics: demo, jsx, vdom
- Language: JavaScript
- Size: 27.3 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# VDOM Demo
JSX => VDOM => DOM
Or without JSX use a (custom) html parser with templates
## Installation
```
npm i babel-plugin-transform-react-jsx -D
```
babel
```
npm i babel-cli babel-preset-latest -D
```
## Configuration
.babelrc
```js
{
"plugins": ["transform-react-jsx"]
}
```
+ comment
Example transpile with method "h"
```js
/** @jsx h */
const vnode = (
JSX => VDOM => DOM
My sample text
console.log('click', event)}>Clic!
);
```
Or
```js
{
"plugins": [
["transform-react-jsx", {
"pragma": "h" // default pragma is React.createElement
}]
]
}
```
+ example
```js
// JSX
const vnode = (
JSX => VDOM => DOM
My sample text
console.log('click', event)}>Clic!
);
```
## Build
Add a NPM Script
```
"scripts": {
"build": "babel --presets latest -d dist/ src/"
},
```
## Transpilation
```
npm run build
```
```js
// transpiled to =>
var vnode = h(
"div",
{ "class": "container" },
h(
"h1",
{ style: "color:#444" },
"JSX => VDOM => DOM"
),
h("img", { src: "profile.png" }),
h(
"p",
null,
"My sample ",
h(
"strong",
null,
"text"
)
),
h(
"button",
{ onClick: function onClick(event) {
return console.log('click', event);
} },
"Clic!"
)
);
```