react 初识

react

使用jsx语法，组件化开发模式，方便使用，性能高，支持服务端渲染。

 

react 的基本使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入-->
        <script src="js/react.js"></script>
        <script src="js/react-dom.js"></script>
        <script src="js/browser.min.js"></script>
    </head>
    <body>
        <div id="app">
            <div>
                
            </div>
        </div>
    </body>
</html>
<script type="text/babel">
    //凡是使用JSX的地方，都要加上 type="text/babel"
    let Hello = React.createClass({   //创建组件类  组建类第一个字母必须大写
        render(){
            return(   //模板
                <div>      //只能包含一个顶层标签，否则会报错
                    <h2>123</h2>　　　
                    <p>{1+2}</p>　　　　
                    //可以使用js代码，但必须要将代码写在{}中，通过browser.js将JSX语法转化为javascript语法
                </div>                
            )
        }
    });
    
    ReactDOM.render(//将模板转为 HTML语言，并插入指定的 DOM节点，即将模板添加到指定的容器中
        <Hello/>,
        document.getElementById("app")
    );
</script>

 

posted on 2018-07-30 22:20  H...ong  阅读(110)  评论(0)    收藏  举报

导航