andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Apply new format to snippets and template

Browse Source
This commit is contained in:
Angelos Chalaris
2020-09-15 16:28:04 +03:00
parent 040efd4380
commit 53c16dbf65
401 changed files with 969 additions and 950 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
snippets/renderElement.md
View File

@@ -5,11 +5,11 @@ tags: browser,recursion,advanced
Renders the given DOM tree in the specified DOM element.
Destructure the first argument into `type` and `props`, use `type` to determine if the given element is a text element.
Based on the element's `type`, use either `Document.createTextNode()` or `Document.createElement()` to create the DOM element.
Use `Object.keys(props`, adding attributes to the DOM element and setting event listeners, as necessary.
Use recursion to render `props.children`, if any.
Finally, use `Node.appendChild()` to append the DOM element to the specified `container`.
- Destructure the first argument into `type` and `props`, use `type` to determine if the given element is a text element.
- Based on the element's `type`, use either `Document.createTextNode()` or `Document.createElement()` to create the DOM element.
- Use `Object.keys(props`, adding attributes to the DOM element and setting event listeners, as necessary.
- Use recursion to render `props.children`, if any.
- Finally, use `Node.appendChild()` to append the DOM element to the specified `container`.
```js
const renderElement = ({ type, props = {} }, container) => {