Published
Edited
Jan 15, 2021
2 forks
Importers
9 stars
class HelloWorld extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 0,
greeting: "Hello World!",
}
}
async componentDidMount() {
while(true) {
await wait(500);
this.setState({ counter: this.state.counter + 1 });
}
}
render() {
const { greeting, counter } = this.state;
const rainbow = [ "#FF0000", "#FF7F00", "#FFFF00", "#00FF00", "#0000FF", "#7A00E5", "#D300C9" ];
const rainbowGreeting = greeting.split("")
.map( (v,k) => `<span style={{ color: "${rainbow[(k + counter) % rainbow.length]}" }}>${v}</span>` )
.reduce( (ag,v) => ag + v, "");
return jsx`
<h1>${rainbowGreeting}</h1>
`
}
}
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.
