React组件学习踩坑

1.自定义JavaScript 函数组件 组件名 必须大写，否则会渲染失败！

//无法正常渲染
/*function welcome(props) {
    return <p>hello,{props.name}!</p>;
};
function app(props) {
    return (
        <div>
            <p>this is {props.app}</p>
            <welcome name='first' />
            <welcome name='second' />
            <welcome name='third' />
        </div>
    );
};
ReactDOM.render(<app app="test" />, document.getElementById('root'));*/
//正常渲染
function Welcome(props) {
    return <p>hello,{props.name}!</p>;
};
function App(props) {
    return (
        <div>
            <p>this is {props.app}</p>
            <Welcome name='first' />
            <Welcome name='second' />
            <Welcome name='third' />
        </div>
    );
};
ReactDOM.render(<App app="test" />, document.getElementById('root'));