React.js variable

Question

When I use a variable starting with a small letter, the page is showing nothing. If I change the variable name to start with uppercase (HelloWorld) the page is showing the content.

<script type="text/jsx">
 var helloWorld = React.createClass({
    render : function () {
                return (
                    <div>
                    <h1>Hello World</h1>
                    </div>
                    );
    }
 });

 React.render(<helloWorld/> , document.body);
</script>

Can anyone tell me why this is happening?

score 5 · Accepted Answer · edited Jul 22 '15 at 17:55

As of React v0.12., upper-case components are the React convention for distinguishing between components and HTML tags.

From the React documentation under the HTML Tags vs. React Components header:

To render a React Component, just create a local variable that starts with an upper-case letter:
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.getElementById('example'));
React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.

React.js variable

1 Answers1