Skip to content

Instantly share code, notes, and snippets.

💜
Testing statuses

Mikael Brevik mikaelbr

💜
Testing statuses
Block or report user

Report or block mikaelbr

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View own-jsx-8.js
function createElement(tag, props, ...children) {
// Create a new html node element.
const el = document.createElement(tag);
// just take the first child for now
el.textContent = children[0];
return el;
}
const h1 = <h1>Hello, World</h1>;
//> <h1>Hello, World</h1>
View own-jsx-7.js
function createElement(tag, props, ...children) {
// Return something
}
View own-jsx-6.js
const list = createElement(
"ul",
null,
createElement("li", null, "Peter"),
createElement("li", null, "Paul"),
createElement("li", null, "Mary")
);
View own-jsx-6.js
// ...
"babel": {
"plugins": [
["@babel/plugin-transform-react-jsx",
{
"pragma": "createElement"
}]
]
}
// ...
View own-jsx-5.js
function createElement(tag, props, ...children) {
// Return something
}
View own-jsx-4.js
const list = (
<ul>
<li>Peter</li>
<li>Paul</li>
<li>Mary</li>
</ul>
);
// Outputs
const list = React.createElement(
"ul",
View own-jsx-3.js
const h1 = <h1 id="myId">Hello, World</h1>;
// Outputs
const h1 = React.createElement(
"h1",
{
id: "myId"
},
"Hello, World"
);
View own-jsx-2.js
const h1 = React.createElement("h1", null, "Hello, World");
View own-jsx-2.js
const h1 = <h1>Hello, World</h1>;
@mikaelbr
mikaelbr / own-jsx-1.js
Created Oct 8, 2019
Code for blogpost "Using JSX for your own lightweight declarative library"
View own-jsx-1.js
{
"name": "jsx-demo",
"version": "1.0.0",
"main": "index.js",
"scripts": {
// Using the babel CLI specify our single file (could be pattern)
// and output in dist directory
"build": "babel index.js -d dist"
},
"devDependencies": {
You can’t perform that action at this time.