Ruby's Louvre

每天学习一点点算法

导航

直接在浏览器运行jsx及高版本的js代码 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script type='text/javascript' src="./dist/React.js"></script>
    <style>
        .aaa {
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
        class A extends React.Component {
            constructor() {
                super()
                 this.state = {
                    aaa: 111
                }
            }
            click() {
                console.log('click') 
                this.setState({
                    aaa: this.state.aaa + 1
                })
            }
            componentDidMount() {
                console.log('componentDidMount')
                 this.click()
            }
            componentDidUpdate() {
                console.log('componentDidUpdate')
            }
            render() {
                return React.createElement('div', {
                    id: 'id',
                    style: {
                        height: this.state.aaa
                    },
                    onClick: this.click.bind(this),
                    className: 'aaa'
                }, this.state.aaa)
            }
        }
        var a 
        window.onload = function () {
            a = React.render(<A />, document.body) 
            console.log(a)
        }
    </script>
</head>

<body>
    <div>这个默认会被清掉</div>


</body>

</html>

你如果将babel改成国内的

    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

变成

<script src="https://cdn.bootcss.com/babel-standalone/6.24.0/babel.js"></script>

什么react, react-dom, redux, react-redux都可以在 http://www.bootcdn.cn/ 上找到

posted on 2017-05-11 15:04  司徒正美  阅读(1721)  评论(0)  编辑  收藏  举报