<div id="root">
</div>
class FeactDOMComponent {
constructor(element) {
this._currentElement = element;
}
mountComponent(container) {
const domElement = document.createElement(this._currentElement.type);
const textNode = document.createTextNode(this._currentElement.props.children);
domElement.appendChild(textNode);
container.appendChild(domElement);
this._hostNode = domElement;
return domElement;
}
}
const Feact = {
createElement(type, props, children) {
const element = {
type,
props: props || {}
};
if (children) {
element.props.children = children;
}
return element;
},
render(element, container) {
const componentInstance = new FeactDOMComponent(element);
return componentInstance.mountComponent(container);
}
};
Feact.render(
Feact.createElement('h1', null, 'hello Feact!'),
document.getElementById('root')
);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.