React类未渲染

Question

The react class myComponent is not rendering inside the element example1 .

what I am able to get in console is

You are using the in-browser JSX transformer. Be sure to precompile your JSX for production - http://facebook.github.io/react/docs/tooling-integration.html#jsx

code

    <script type="text/jsx">
            var myComponent = React.createClass({
              render: function() {
                return (
                    <h2>{this.props.name} wants to eat {this.props.food}</h2>
                );
              }
            });

React.render(
        <div>
            <myComponent food="fruits" name="Raj1"/>
            <myComponent food="Veggies" name="Raj2"/>
            <myComponent food="Chicken" name="Raj3"/>
            <myComponent food="Burger" name="Raj4"/>
        </div>, 
            document.getElementById('example1'));
    </script>

Answer 1

You must capitalize your react classes

var MyComponent = React.createClass({
    render: function() {
          return (
             <h2>{this.props.name} wants to eat {this.props.food}</h2>
        );
     }
 });

working fiddle example