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>

Mayank Shukla · Accepted Answer · 2017-04-20 07:19:03Z

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>

Ritesh Bansal · Accepted Answer · 2017-04-20 07:16:11Z

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, 2017 at 7:16

Ritesh Bansal

3,2482 gold badges18 silver badges23 bronze badges

3 Comments

Deadpool Over a year ago

I dont think that will make a difference. Its only semantic not functional issue.

Ritesh Bansal Over a year ago

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 Over a year ago

You can see here: stackoverflow.com/questions/30373343/…

Collectives™ on Stack Overflow

React component not rendering in simple example

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related