1 | Composi
|
2 | =======
|
3 |
|
4 | Contents
|
5 | --------
|
6 | - [Components](./components.md)
|
7 | - [JSX](./jsx.md)
|
8 | - [Hyperx](./hyperx.md)
|
9 | - [Hyperscript](./hyperscript.md)
|
10 | - Mount and Render
|
11 | - [State](./state.md)
|
12 | - [Lifecycle Methods](./lifecycle.md)
|
13 | - [Events](./events.md)
|
14 | - [Styles](./styles.md)
|
15 | - [Unmount](./unmount.md)
|
16 | - [Installation](../README.md)
|
17 | - [Third Party Libraries](./third-party.md)
|
18 | - [Functional Components](./functional-components.md)
|
19 | - [Deployment](./deployment.md)
|
20 |
|
21 | mount
|
22 | -----
|
23 |
|
24 | This function is used to inject a function component into the DOM. It takes two arguments: the tag to convert to nodes and the element in which to inject the tag. The container can be indicated with a valid CSS selector, or an actualy DOM node. The `mount` function always returns a reference to the element injected into the DOM. You can use this as an argument to the `render` function so that it can update the already mounted component.
|
25 |
|
26 | If no second argument for a component container is supplied, `mount` will inject the component into the body element.
|
27 |
|
28 | Here are some examples of using `mount`:
|
29 |
|
30 | ```javascript
|
31 | import {h, mount} from 'composi'
|
32 |
|
33 | // Define a functional component:
|
34 | function Header({message}) {
|
35 | return (
|
36 | <nav>
|
37 | <h1>{message}</h1>
|
38 | </nav>
|
39 | )
|
40 | }
|
41 |
|
42 | // Mount the functional component in the document's header element:
|
43 | mount(<Header message="Hello, World!" />, "header")
|
44 | ```
|
45 |
|
46 | render
|
47 | ------
|
48 |
|
49 | Functional components are the best way to create components that are simple yet powerful. The `mount` function makes it easy to inject them into the DOM. But many times you may need to update the component when props or data change. For that you use the `render` function. To use it, you will need to import it into your code:
|
50 |
|
51 | ```javascript
|
52 | import {h, mount, render} from 'composi'
|
53 |
|
54 | ```
|
55 | `render` takes two parameters:
|
56 |
|
57 | 1. tag - the element to create and insert into the DOM
|
58 | 2. element - the element in the DOM that the tag will update
|
59 |
|
60 | Define a Function to Return Markup
|
61 | ----------------------------------
|
62 |
|
63 | ```javascript
|
64 | import {h, mount, render} from 'composi'
|
65 |
|
66 | const fruits = ['Apples', 'Oranges', 'Bananas']
|
67 |
|
68 | // Define function that returns JSX:
|
69 | function createList({fruits}) {
|
70 | return (
|
71 | <div>
|
72 | <p>
|
73 | <input type='text'/>
|
74 | <button>Add</button>
|
75 | </p>
|
76 | <ul>
|
77 | {
|
78 | fruits.map(fruit => <li>{fruit}</li>)
|
79 | }
|
80 | </ul>
|
81 | </div>
|
82 | )
|
83 | }
|
84 |
|
85 | // Insert the list into the document body:
|
86 | const list = mount(<List fruits={fruits}/>, 'body')
|
87 |
|
88 | // Define event object:
|
89 | const listEvents = {
|
90 | // Define event handler:
|
91 | handleEvent(e) {
|
92 | e.target.nodeName === 'BUTTON' && this.addItem()
|
93 | },
|
94 | // Store reference to form input:
|
95 | input : document.querySelector('input')
|
96 | // Define method to add item and update list:
|
97 | addItem() {
|
98 | const value = this.document.value
|
99 | if (value) {
|
100 | fruits.push(value)
|
101 | // Update the list component with "render".
|
102 | // Pass in mounted component reference as second argument:
|
103 | render(<List fruits={fruits}/>, list)
|
104 | // Clear input value:
|
105 | input.value = ''
|
106 | } else {
|
107 | alert('Please provide a value before submitting.')
|
108 | }
|
109 | }
|
110 | }
|
111 | ```
|
112 |
|
113 | In the above example, each subsequent call of the `render` function will update the DOM tree structure with new data. Technically, if we wanted to modify the order of the list items, we would want to render them with a key.
|
114 |
|
115 |
|
116 | Summary
|
117 | -------
|
118 |
|
119 | Both `mount` and `render` are similar in purpose to [`ReactDOM.render`](https://facebook.github.io/react/docs/react-dom.html#render). The main difference is that Composi separates mounting from updating. These means the two function have difference arguments. `mount` expects a second argument for where to inject the component, whereas `render` expects a second argument of the DOM tree to update. If your components need local state, class components might be a better choice. Or not. It depends on you specific needs and your design choices. If you do not like ES6 classes, you can stick with just `mount` and `render` for creating functional components. |
\ | No newline at end of file |