React

Setup

To use components with React, add the component tag via React’s render and call Component.render() when the React component has mounted:

componentDidMount () {
Component.render()
},
render () {
return <component data-key="mladl" data-load="md-mi"></component>
}

Because React does not handle “custom” attributes like key and load, use data-key and data-load instead. React also requires you to use quotation marks (") for attributes.

You can use Component.render() by itself or with a callback or promise. See the section on Component.render for more.

Example

Rendering multiple components

You can render multiple components the same way as a single component. However, React does require that its internal render function returns a single element. So to render multiple Component IO components in a single React component, you can wrap them in a common element such as a <div>, like so:

render () {
return (
<div>
<component data-key="mladl" data-load="md-mi"></component>
<component data-key="ekaob" data-load="b"></component>
<component data-key="aldlk" data-load="md"></component>
</div>
)
}

Re-rendering

You can call Component.render() as often as you’d like in your React component (or elsewhere). This method will not lead to an API call every time; if a component has already been fetched once, Component.render() will use that data instead of making another API call.

See the section on Component.render for more.