React component not rendering in simple example

Question

I am expecting to see "Hi", but thought not getting any error, also nothing is being rendered on screen. Please, help!

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

   </head>
   <body> 

      <div id="div1"></div>

         <script type="text/babel">

             function myApp(){
                return <h1>Hi</h1>;
             } 

             var elem = (
                <div>
                <myApp /> 
                </div>
             );

             ReactDOM.render(elem, document.getElementById('div1'));

         </script>
      </div>
   </body>
</html>

score 2 · Accepted Answer · answered Apr 20 '17 at 07:19

You need to use MyApp instead of myApp.

Reason:

If a React Component name starts with a lowercase letter, nothing Renders, and you don't get any error message in the Browser console, because small letters are treated as HTML elements, its a rule that all React components must start with a upper case letter.

Check the working example:

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

   </head>
   <body> 

      <div id="div1"></div>

         <script type="text/babel">

             function MyApp(){
                return <h1>Hi</h1>;
             } 

             var elem = (
                <div>
                <MyApp /> 
                </div>
             );

             ReactDOM.render(elem, document.getElementById('div1'));

         </script>
      </div>
   </body>
</html>

score 1 · Answer 2 · answered Apr 20 '17 at 07:16

1

m of myApp must be uppercase.

Your code should be like this:

function MyApp(){
    return <h1>Hi</h1>;
} 
var elem = (
    <div>
        <MyApp /> 
    </div>

);

answered Apr 20 '17 at 07:16

Ritesh Bansal

3,108
2
16
23

I dont think that will make a difference. Its only semantic not functional issue. – Deadpool Apr 20 '17 at 07:18
It makes a difference. In JSX, lower-case tag names are considered to be HTML tags. However, lower-case tag names with a dot (property accessor) aren't. – Ritesh Bansal Apr 20 '17 at 07:22
You can see here: http://stackoverflow.com/questions/30373343/reactjs-component-names-must-begin-with-capital-letters – Ritesh Bansal Apr 20 '17 at 07:23

React component not rendering in simple example

2 Answers2