w3c React Render
w3c React.props
{
const elem = html`<div></div>`;
class Car extends React.Component { // without constructor
render() {
return htm`<h2>I am a ${this.props.brand}!</h1>`;
}
}
const myelement = htm`<${Car} brand="Ford"/>`;
ReactDOM.render(myelement, elem);
return elem;
}
{
const root = html`<div id="root"></div>`;
class Car extends React.Component {
render() {
return htm`<h2>I am a ${this.props.brand}!</h2>`;
}
}
class Garage extends React.Component {
render() { // pass data from Garage to Car
return htm`
<div>
<h1>Who lives in my garage?</h1>
<${Car} brand="Ford" />
</div>
`;
}
}
ReactDOM.render(htm`<${Garage} />`, root);
return root;
}
{
const root = html`<div></div>`;
class Car extends React.Component {
render() {
return htm`<h2>I am a ${this.props.brand}!</h2>`;
}
}
class Garage extends React.Component {
render() {
const brandName = "Ford"; // must be defined inside render()
return htm`
<div>
<h1>Who lives in my garage?</h1>
<${Car} brand=${brandName} />
</div>
`;
}
}
ReactDOM.render(htm`<${Garage} />`, root);
return root;
}
{
const root = html`<div></div>`;
class Car extends React.Component {
render() {
// return htm`<h2>I am a ${this.props.brand.name}!</h2>`; // brandObj is assigned to this.props.brand
return htm`<h2>I am a ${this.props.brand}!</h2>`; // brandObj is assigned to this.props.brand
}
}
class Garage extends React.Component {
render() {
const brandObj = {name: "Ford"}; // must be defined inside render()
return htm`
<div>
<h1>Who lives in my garage?</h1>
<!-- <${Car} brand=${brandObj} // comment out /> -->
<${Car} brand=${brandObj.name} />
</div>
`;
}
}
ReactDOM.render(htm`<${Garage} />`, root);
return root;
}
{
const elem = html`<div></div>`;
class Car extends React.Component { // with constructor, passing props is a must
constructor(props) {
super(props);
}
render() {
return htm`<h2>I am a Car of ${this.props.model}!</h2>`;
}
}
ReactDOM.render(htm`<${Car} model="Mustang"/>`, elem);
return elem;
}
import {htm, React, ReactDOM, none_doc, hide_display} from "@embracelife/tutorial-utilities"
{
const elem = html`<div></div>`;
ReactDOM.render(htm`<${App} page="All" />`, elem);
return elem;
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = { todos: [] };
}
addTodo() {
const { todos = [] } = this.state;
this.setState({ todos: todos.concat(`Item ${todos.length}`) });
}
render() {
const { todos } = this.state;
const { page } = this.props;
return htm`
<div class="app">
<${Header} name="ToDo's (${page})" />
<ul>
${todos.map(
todo => htm`
<li>${todo}</li>
`
)}
</ul>
<button onClick=${() => this.addTodo()}>Add Todo</button>
<${Footer}>footer content here<//>
</div>
`;
}
}
Header = ({ name }) => htm`<h1>${name} List</h1>`
md`Unlike the fork parent, I keep htm as html, so that I can still use the html builtin.`
// htm = import('https://unpkg.com/htm@2?module').then(r => r.default.bind(React.createElement))
// r = require.alias({
// react: "react@16/umd/react.development.js",
// "react-dom": "react-dom@16/umd/react-dom.development.js"
// })
// React = r("react")
// ReactDOM = r("react-dom")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.