react基础语法,一元素渲染和基础语法规则

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <!-- 生产环境中不建议使用 -->
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>

    <body>
        <div >

        </div>
        <script type="text/babel">
            //1. React实例
            /*如果我们需要使用 JSX,则 <script> 标签的 type 属性需要设置为 text/babel;
            Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。
            通过将 Babel 和 babel-sublime 包(package)一同使用可以让源码的语法渲染上升到一个全新的水平。*/
            ReactDOM.render(
            <h1>Hello, world!</h1>, 
            document.getElementById('app')
            );
            //2.更新元素渲染
            /*React 元素都是不可变的。当元素被创建之后,你是无法改变其内容或属性的。
            目前更新界面的唯一办法是创建一个新的元素,然后将它传入 ReactDOM.render() 方法*/
            function addEle() {
              const element = (
                <div>
                  <h1>第一次渲染!</h1>
                  <h2>现在是 {new Date().toLocaleTimeString()}.</h2>
                </div>
              );
              ReactDOM.render(
                element,
                document.getElementById('app')
              );
            }
            setInterval(addEle, 500);
            //封装下vvvvvvv  toLocaleTimeString()方法根据本地时间把 Date对象的时间部分转换为字符串;
function Setdom(props) { return ( <div> <h1>第二次渲染!</h1> <h2>现在是 {props.date.toLocaleTimeString()}.</h2> </div> ); }
function newEle() { ReactDOM.render( <Setdom date={new Date()} />, document.getElementById('app') ); } setInterval(newEle, 1000);
//React.Component的 ES6 类,该类封装了要展示的元素,需要注意的是在 render()方法中,需要使用 this.props替换 props: class EsDom extends React.Component { render() { return ( <div> <h1>第三次渲染!</h1> <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2> </div> ); } }
function esAddDom() { ReactDOM.render( <EsDom date={new Date()} />, document.getElementById('app') ); } setInterval(esAddDom, 2500); </script> </body> </html>