A software developer working on tools for API integrations. Interests: running, reading, music
render(e(Greatings, { name, color }))
Greatings = ({ name, color }) => e('h1', { style: { color }}, 'Hello ', name, '!')
render(e(StateProvider, { state: { name, color }}, ({ name, color }, setState) => Fragment(
e('h1', {}, 'Advanced component in ', e('span', { style: { color }}, name), '!'),
e('label', {}, 'name: '),
e('input', { type: 'text', value: name, onChange: e => setState({ name: e.target.value})}),
e('br'),
e('label', {}, 'color: '),
e('input', { type: 'text', value: color, onChange: e => setState({ color: e.target.value})}),
e('br'),
e('br'),
)))
renderJSX('global', { GreatingJSX, color, name })`
<global.GreatingJSX color={global.color} name={global.name} />
`
GreatingJSX = jsx`({ color, name }) => (
<h1 style={{ color }}>
Hello {name} with jsx!
</h1>
)`
renderJSX('global', { StateProvider, state: {color, name }})`
<global.StateProvider state={global.state}>
{({color, name }, setState) => (
<React.Fragment>
<h1>Advanced component in <span style={{color}}>{name}</span>!</h1>
<label>name: </label>
<input value={name} onChange={e => setState({ name: e.target.value})} />
<br />
<label>color: </label>
<input value={color} onChange={e => setState({ color: e.target.value})} />
<br />
<br />
</React.Fragment>
)}
</global.StateProvider>
`
react = require("https://unpkg.com/react@16.2.0/umd/react.production.min.js")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
