class HelloWorld extends React.Component {
render() {
return jsx`<h1>Hello from React!</h1>`
}
}
class OuterComponent extends React.Component {
render() {
return jsxi({InnerComponent})`
<div style={{ backgroundColor: 'skyblue' }}>
<h1 > Hi from Outer Component! </h1>
<InnerComponent say="Foo Bar"/>
<InnerComponent say="Hi Guys"/>
</div>
`
}
}
class InnerComponent extends React.Component {
render() {
return jsxi({ props: this.props })`
<h1 style={{ backgroundColor:'gray', color:'pink', width:500, height: 100 }}>
Hi from Inner Component! My parent said { props.say }
</h1>`
}
}
class StateComponent 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>
`
}
}
class EventComponent extends React.Component {
constructor() {
super();
this.state = {
counter:0
}
}
handleClick() {
this.setState({ counter: this.state.counter + 1 })
}
render() {
return jsxi({ state: this.state, handleClick:this.handleClick.bind(this) })`
<div>
<h1> Counter: { state.counter } </h1>
<button onClick={ handleClick }>Increment Counter!</button>
</div>
`
}
}
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.
