React JSX on html - html

Question

I try to insert react on simple HTML file. There is an official example on https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project but I don't understand how to render a JSX-encoded component and how to insert a component into another component :
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return "You liked this.";
}
// Display a "Like" <button>
return <button onClick={() => this.setState({ liked: true })}>Like</button>;
}
}
const domContainer = document.querySelector("#like_button_container");
ReactDOM.render(LikeButton, domContainer);

Answer 1

So you've likely already followed the directions to import React and ReactDOM into your HTML:
<!-- depends where it's hosted -->
<script src="react.min.js"></script>
<script src="reactdom.min.js"></script>
Then you add your custom JS to the HTML as well:
<!-- this goes right before the closing body tag -->
<script src="custom-like-button.js"></script>
And lastly you put an HTML element where you want the component to render and make sure it has an id that matches the querySelector at the end of the React example:
<div id="custom-like-button"></div>
As for nested components, you can nest them inside the return of the top-level component (the one that's being injected into the DOM)
class MyComponent extends React.Component {
render() {
return <LikeButton />
}
}
class LikeButton extends React.Component {
render () {
return <button onClick={() => this.setState({ liked: true })}>Like</button>;
}
}
// goes inside <div id="my-component"></div> in html
const domContainer = document.querySelector("#my-component");
ReactDOM.render(MyComponent, domContainer);