Published
Edited
Sep 7, 2020
2 stars
{
const Application = ({name}) => htm`<div>Hello, ${name}!</div>`;
return React.render(htm`<${Application} name="world" />`)
}
{
const Application = ({className}) => htm`<span class='${className}'>Olà</span>`;
const StyledApplication = styled(Application)`
color: red;
font-weight: bold;
border: 1px solid #666;
padding: 4px;
margin: 4px;
`;
return React.render(htm`<${StyledApplication}/>`);
}
StyledApplication = styled.div`
padding: 8px;
color:orange;
font-family: monospace;
font-size: 16px;
background-color: #444;
`;
{
const Application = ({name}) => htm`<div>Hello, ${name}!</div>`;
return React.render(
htm`
<${StyledApplication}>
<${Application} name="world" />
</>
`);
}
{
const InputForm = ({defaultValue}) =>
htm `
<form>
<label>Name:<input type="text" name="name" value=${defaultValue}/></label>
<input type="button" value="Update"/>
</form>`;
const Application = ({name}) =>
htm`
<${InputForm} defaultValue=${name}/>
<div>Hello, ${name}!</div>
`;
return React.render(htm`<${StyledApplication}><${Application} name="world" /></>`)
}
{
const useState = React.useState;
const InputForm = ({defaultValue, onValueUpdate}) => {
const [value, setValue] = useState(defaultValue);
const handleSubmit = (event) => {
event.preventDefault();
onValueUpdate(value);
};
const handleChange = (event) => setValue(event.target.value);
return htm`
<form onSubmit=${handleSubmit}>
<label>Name:<input type="text" value=${value} onChange=${handleChange}/></label>
<input type="submit" value="Update"/>
</form>
`};
const Application = ({defaultName}) => {
const [name, setName] = useState(defaultName);
const onValueUpdate = (value) => { setName(value); }
return htm`
<${InputForm} defaultValue='${defaultName}' onValueUpdate=${onValueUpdate}/>
<div>Hello, ${name}!</div>
`
};
return React.render(htm`<${StyledApplication}><${Application} defaultName="world" /></>`)
}
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.
