react 创建组件

时间:2020-05-01
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="test1"></div>

<div id="test2"></div>

<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<script src="js/prop-types.js"></script>

<script type="text/babel">
    // 创建组件,构造函数
    function MyComponent1() {
        return <h1>hello react</h1>;
    }

    // 创建组件,类
    class MyComponent2 extends React.Component {
        render() {
            return <h2>hello react</h2>;
        }
    }

    // 渲染虚拟dom
    ReactDOM.render(<MyComponent1/>, document.getElementById('test1'));
    ReactDOM.render(<MyComponent2/>, document.getElementById('test2'));
</script>
</body>
</html>