# when to use : the latest html vs the combination of React, ReactDOM and htm

**URL:** <https://talk.observablehq.com/t/when-to-use-the-latest-html-vs-the-combination-of-react-reactdom-and-htm/2649>\
**Category:** Help\
**Created:** [December 14, 2019, 2:12pm UTC](https://talk.observablehq.com/t/when-to-use-the-latest-html-vs-the-combination-of-react-reactdom-and-htm/2649 "2019-12-14T14:12:54Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![EmbraceLife](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/embracelife/32/2248_2.png) [@EmbraceLife](https://talk.observablehq.com/u/EmbraceLife)\
**Post date:** [December 14, 2019, 2:12pm UTC](https://talk.observablehq.com/t/when-to-use-the-latest-html-vs-the-combination-of-react-reactdom-and-htm/2649/1 "2019-12-14T14:12:54Z")

</div>

Outside Observable notebook it seems ReactJS is something everyone talks about and I am tempted to learn some of it. But [the latest `html`](https://observablehq.com/@observablehq/htl) is simple to use and extremely powerful, it makes me question the necessity of learning React given Observable notebook is available.

So, I wonder are there use cases we should use React, ReactDOM and htm over html? If so, what are those use cases, could you give me some examples?

Thanks a lot!

---

<div class="post-metadata">

**Author:** ![j-f1](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/j-f1/32/368_2.png) [@j-f1](https://talk.observablehq.com/u/j-f1)\
**Post date:** [December 14, 2019, 4:15pm UTC](https://talk.observablehq.com/t/when-to-use-the-latest-html-vs-the-combination-of-react-reactdom-and-htm/2649/2 "2019-12-14T16:15:02Z")

</div>

It depends on what you need. If you want to create complex controls with internal state, then React is probably your best bet (check out my React bindings: [https://observablehq.com/@j-f1/react](https://observablehq.com/@j-f1/react)), but for relatively simple things you can stick to using `html`, like @jashkenas does [with his `inputs` notebook](https://observablehq.com/@jashkenas/inputs).

---

<div class="post-metadata">

**Author:** ![EmbraceLife](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/embracelife/32/2248_2.png) [@EmbraceLife](https://talk.observablehq.com/u/EmbraceLife)\
**Post date:** [December 15, 2019, 5:42pm UTC](https://talk.observablehq.com/t/when-to-use-the-latest-html-vs-the-combination-of-react-reactdom-and-htm/2649/3 "2019-12-15T17:42:35Z")

</div>

Thanks @j-f1 , your reply is very helpful.

I liked your notebooks and believe they are great stuff to learn and use, but have not been able to study them in detail, as I am still very new to React. At the moment I am trying to convert React tutorial into Obs notebooks. Maybe when I finish the tutorial, I may be equipped enough to study your notebook.

Meanwhile, I wonder whether you could write a notebook to teach beginners like me to understand how to use your notebooks on React?

Thanks!

---

<div class="post-metadata">

**Author:** ![j-f1](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/j-f1/32/368_2.png) [@j-f1](https://talk.observablehq.com/u/j-f1)\
**Post date:** [December 15, 2019, 6:15pm UTC](https://talk.observablehq.com/t/when-to-use-the-latest-html-vs-the-combination-of-react-reactdom-and-htm/2649/4 "2019-12-15T18:15:23Z")

</div>

That’s very reasonable! I recommend you use the real React API when you’re learning so you can better get used to the way you’ll write React code in most real world cases. My notebook just provides some helpful tools to make using React easier and more seamless.

To switch regular React code to my notebook helper, extract each component to a cell and wrap it in `component()`:

```auto
function Example({ props, go, here }) {
  return jsx`...`
}
// becomes:
Example = component(({ props, go, here }) => {
  return jsx`...`
}, 'Example') // the second parameter here is optional but makes things
              // easier to debug

```

Then, in the cell, where you call `ReactDOM.render`, you should switch to the `render` helper:

```auto
{
  const root = html`<div></div>`
  ReactDOM.render(jsx`...`, root)
  return root
}
// becomes:
render(() => jsx`...`)

```

---

<div class="post-metadata">

**Author:** ![EmbraceLife](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/embracelife/32/2248_2.png) [@EmbraceLife](https://talk.observablehq.com/u/EmbraceLife)\
**Post date:** [December 16, 2019, 5:14am UTC](https://talk.observablehq.com/t/when-to-use-the-latest-html-vs-the-combination-of-react-reactdom-and-htm/2649/5 "2019-12-16T05:14:26Z")

</div>

> [@j-f1](#):
>
> My notebook just provides some helpful tools to make using React easier and more seamless.

Thanks a lot! @j-f1

The two code blocks above are very helpful! Also thanks for the advice on using the real React API. I will fork your notebook for my next React tutorial notebook.
