reactRender(() => {
const A = props => {
return jsx`<h1>${props.name}</h1>`;
};
const B = () => {
return jsx`<div>
<${A} name="Hello world" />
</div>`;
};
return B();
})
reactRender(() => {
const objeto = { name: "Hola mundo" };
const A = props => {
return jsx`<h1>${props.objeto.name}</h1>`;
};
const B = () => {
return jsx`<${A} objeto=${objeto} />`;
};
return B();
})
reactRender(() => {
const A = () => {
const [state, setState] = useState(0);
return jsx`
<div>
<h1>
${Math.round(state)}
</h1>
<button onClick=${() =>
setState(Math.random() * 100)}>Cambiar valor</button>
</div>`;
};
return A();
})
reactRender(() => {
const B = () => {
useEffect(() => {
console.log("Componente B montado!");
return () => {
console.log("Componente B desmontado!");
};
}, []);
return jsx`<div style=${{
border: '3px solid green'
}}>Componente B</div>`;
};
const A = () => {
const [one, setOne] = useState(1);
const [two, setTwo] = useState(1);
const [three, setThree] = useState(0);
const [show, setShow] = useState(true);
useEffect(() => {
if (three === 0) {
setShow(false);
} else {
setShow(true);
}
}, [three]);
useEffect(() => {
setThree(one * two);
}, [one, two]);
return jsx`
<div>
<h1>
${one}
</h1>
<h1>
${two}
</h1>
<br />
<h1>
${three}
</h1>
<button onClick=${() => {
setOne(Math.round(Math.random() * 5));
}}>Cambiar valor del primero</button>
<button onClick=${() => {
setTwo(Math.round(Math.random() * 5));
}}>Cambiar valor del segundo</button>
<button onClick=${() => setShow(!show)}>${
show ? "Esconder" : "Mostrar"
}</button>
${show && jsx`<${B} />`}
</div>`;
};
return A();
})
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.
