add documentation around rendering

Author: scurker

readme.md

@@ -13,7 +13,8 @@
 4. [Components With Children](#components-with-children)
 5. [Higher Order Components (HOC)](#higher-order-components-hoc)
 6. [Extending HTML Attributes](#extending-html-attributes)
-7. [Custom Elements / Web Components](#custom-elements--web-components)
+7. [Rendering](#rendering)
+8. [Custom Elements / Web Components](#custom-elements--web-components)
 
 ## Setup
 
@@ -310,6 +311,27 @@ export default class ComponentWithHtmlAttributes extends Component<JSX.HtmlAttri
 <ComponentWithHtmlAttributes foo="bar" /> // throws error, invalid html attribute
 ```
 
+## Rendering
+
+Rendering components requires an `Element`. The second argument will append your component to your node:
+
+```jsx
+import { h, render } from 'preact';
+import MyComponent from './MyComponent';
+
+render(<MyComponent />, document.body as Element);
+```
+
+Additionally, you can choose to replace a specific node by specifying a third argument:
+
+```jsx
+import { h, render } from 'preact';
+import MyComponent from './MyComponent';
+
+const node: Element = document.getElementById('root') as Element;
+render(<MyComponent />, node, node.firstElementChild as Element);
+```
+
 ## Custom Elements / Web Components
 
 With vanilla JSX in preact, you can create any element with whatever name you want and it'll get transpiled to `h('my-element-name', ...)`. However Typescript is more opinionated and will complain if an imported component or HTML element does not exist with that name. Normally, this is what you would want with Preact components but custom elements may or may not be imported into your JSX files.