For some reason, when I write just ReactDOM.rener and prescribe tags there, for example h1, then react works, but not through components. I connected both the jsx compiler and babel and in the type I wrote them

var app = React.createClass({ render: function() { return ( < h2 > sdfdf < /h2> ) } }); ReactDOM.render( < app / > , document.getElementById('result')); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <div id="result"></div>

    2 answers 2

    The name of the component should be written with a capital letter, also the name of the component should be corrected in ReactDOM

    • corrected, still does not work. I connected it as well as a separate js file and in index.html. checked on codepen, everything works. I connected all dependencies, the code of the component is capitalized but does not work at all, even the alert does not work, when I remove type = "text / babel", the alert works, in the console it says that the extra "<" before the tag in the component, I even removed the tags all the same it writes. jsx transform did not find, the react all through npm makes no download link on the chapters page in general I don’t know what the joke has already tried, everything in js fiddle also works - Sher
    • If he swears at the bracket symbol "<", then in most cases he does not understand jsx. See the complete code example with fixes - Alex Slobodyansky

    The problem was connecting babel.

      var App = React.createClass({ render: function() { return ( <h1>Hello World</h1> )} }); ReactDOM.render(<App />, document.getElementById('result') ); 
     <script crossorigin src="https://unpkg.com/react@15/dist/react.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <div id="result"></div> 

     https://jsfiddle.net/4sk1deko/