React.js write components directly in HTML

Question

I\'m very new to React.js but exploring it I expected something that I\'m not able to do.

Say that I have a component:

var SampleComponent = React.cr         


        

Answer 1

No, using React.render() is the "only way" to do it.

You might be expecting something along the likes of Webcomponents where you can define you custom elements and put those in your HTML but that's not the way React works (yet perhaps).

There is however a library called x-react where you can register those types of elements, but still it's JavaScript powered and not straight up HTML.

Answer 2

In a typical app you would have a high-level controller-view component mounted to the DOM this way, but that component would contain a hierarchy of child components in its render method to build up the structure of your interface. This is the idea of composable views which is an advantage of react. These child components can be used directly within the jsx of the parents' render methods in the same way you had hoped, so you really only have to call React.render once on the top-level component.