Simple reactjs tutorial code not working and no errors in dev tools

Question

I'm following a simple ReactJS tutorial on udemy and for some reason my code which seems to be the same line for line is not working, nor am I getting any errors in the dev tools in chrome.

Here is my code, but I can't seem to figure out why it's not working. I'm using Brackets as my IDE and am also using chrome.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="https://unpkg.com/[email protected]/dist/react.js"></script>
        <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.20/browser.js"></script>
    </head>
    <body>
        <div id="app">
        </div>
        <script type="text/babel">

        var secondComp2 = React.createClass({

            render: function () {

                return (

                    <div>
                        <h1>{this.props.name}</h1>
                    </div>

                )

            }

        });

        ReactDOM.render(

            <secondComp2 name="hello world" />,
            document.getElementById('app')

        );

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

vrintle · Accepted Answer · 2018-10-08 14:36:28Z

2

React components are always defined in PascalCase. This will solve your problem.

<script type="text/babel">    
        var SecondComp2 = React.createClass({    
            render: function () {    
                return (    
                    <div>
                        <h1>{this.props.name}</h1>
                    </div>    
                );    
            }    
        });    
        ReactDOM.render(    
            <SecondComp2 name="hello world" />,
            document.getElementById('app')    
        );    
</script>

edited Oct 8, 2018 at 14:36

vrintle

5,6263 gold badges19 silver badges47 bronze badges

answered Feb 20, 2017 at 5:12

shahzeb akram

9268 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lightweight Over a year ago

this is correct too but the guy above you was first :-)

shahzeb akram Over a year ago

Happy Coding :)

Mayank Shukla · Accepted Answer · 2017-02-20 04:21:38Z

1

Its a rule that all React components must starts with a upper case letter, because small letters are treated as HTML elements,

So use this: SecondComp2 instead of secondComp2.

Check the working fiddle: https://jsfiddle.net/5nvd3o6t/

edited Feb 20, 2017 at 4:21

answered Feb 20, 2017 at 4:12

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Collectives™ on Stack Overflow

Simple reactjs tutorial code not working and no errors in dev tools

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related