React code to insert HTML doesn't seem to work

user_12858062 0
Viewed 285

I'm new to React and I don't really to know how to make it work. I'm simply trying to add this simple code in my HTML but it doesn't seem to work, I have no idea why

Here is my code 

const element = React.createElement;
class Menu extends React.Component {
  render() {
    return <h1>Hello World! < /h1>
  }
}
const domContainer = document.querySelector('#menu_js');
ReactDOM.render(element(Menu), domContainer);
reactjs render class html javascript
2 Answers

Do you want to do it without JSX? Without JSX means you don't need Babel etc.

I am assuming this, only because of the fact you set up a function for React.createElement.

If so you can do this:

const element = React.createElement;
class Menu extends React.Component {
  render() {
    return element('h1',null,'Hello World!');
  }
}
const domContainer = document.querySelector('#menu_js');
ReactDOM.render(element(Menu), domContainer);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="menu_js"></div>

OR- if you want to use JSX

Then you can do it like this (just enable Babel):

const element = React.createElement;
class Menu extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}
const domContainer = document.querySelector('#menu_js');
ReactDOM.render(element(Menu), domContainer);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="menu_js"></div>

P.S. I am working on a library that allows you to create react elements without JSX and with a "d3-like" syntax. (https://github.com/Alex-ley/react-kopplung)

If you are interested, your example could look like this:

const element = React.createElement;
class Menu extends React.Component {
  render() {
    const returnObj = new ReactKopplung();    
    returnObj
      .setRoot('h1') /* Or .setRoot('<>') for a fragment */
        .setText('hello world!');
            
    return returnObj.rootNode().render();
  }
}
const domContainer = document.querySelector('#menu_js');
ReactDOM.render(element(Menu), domContainer);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Alex-ley/react-kopplung@v.0.1.0/ReactKopplung.js"></script>
<div id="menu_js"></div>

user_97925940

You don't need a whole class in order to render a simple element:

const Menu = React.createElement('h1', {}, 'Hello World!');

ReactDOM.render(Menu, document.getElementById('menu_js'));
Admin1
Related