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

Community Help
1

Outside Observable notebook it seems ReactJS is something everyone talks about and I am tempted to learn some of it. But the latest html 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!

2

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), but for relatively simple things you can stick to using html, like @jashkenas does with his inputs notebook.

3 Likes
3

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!

1 Like
4

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():

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:

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

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.

1 Like