مرحبا شباب 
من زمان معملتش ورشات…
حصريا على Coretabs
هذه ورشة سريعة لعمل VDOM هتخلينا نفهم كيف بتشتغل
مشاهدة ممتعة
مرحبا شباب
1 Like
السلام عليكم
شكرا على هذه الورشة والشرح المبسط والأكثر من رائع
أعجبتني فكرة بناء vdom صغنن كما قلت 
فأردت بدوري المشاركة في هذه الورشة ولو أنني لم اضف شيئا، فقط كتفاعل طبقت الفكرة لغاية المرحلة التي وصلت اليها في هذا الفيديو لكن بطريقة مختلفة js class-based 
style.css
.green {
color: green
}
.red {
color: red
}
.link {
text-decoration: none;
color: mediumorchid;
}
script.js
class H {
constructor(tag, props, children) {
this.tag = tag
this.props = props
this.children = children
this.el = document.createElement(this.tag)
}
setAttributes() {
if (this.props) {
for (const key in this.props) {
if (Object.hasOwnProperty.call(this.props, key)) {
const value = this.props[key]
this.el.setAttribute(key, value)
}
}
}
}
mount(container) {
if (this.children) {
if (typeof this.children === 'string') {
this.el.innerHTML = this.children
} else {
this.children.map(child => {
child.mount(this.el)
})
}
}
this.setAttributes()
return container.appendChild(this.el)
}
}
// Get the main container
const container = document.querySelector('#app')
// Example 1
const vnode = new H('div', {class: 'green'}, 'Hi')
// Example 2
const vnodeWithChildren = new H('div', {class: 'green'}, [
new H('span', {class: 'red'}, 'I am span, '),
new H('a', {href: 'https://google.com'}, 'Take me to google'),
])
// Example 3
const vnodeWithChildren2 = new H('div', {class: 'green'}, [
new H('span', {class: 'red'}, 'I am span, '),
new H(
'a',
{
href: 'https://cortabs.net',
target: '_BLANK',
class: 'link',
id: 'coretabs'
},
'Take me to cortabs'
),
new H('span', {id: 'imoj'}, ' 😀'),
])
vnode.mount(container)
vnodeWithChildren.mount(container)
vnodeWithChildren2.mount(container)
1 Like
