react 入门（一） 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Basic Example</title>
    <!-- react.js是react的核心库-->
    <script src="./build/react.js" charset="utf-8"></script>
    <!-- react-dom.js提供与dom有关的功能-->
    <script src="./build/react-dom.js" charset="utf-8"></script>
    <!-- browser.min.js将JSX语法转换成javascript语法，然后才能在浏览器上执行-->
    <script src="./build/browser.min.js" charset="utf-8"></script>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script>-->

</head>
<body>
<!-- react渲染的模板内容会插入到这个DOM节点中，作为一个容器-->
<div id="container">
</div>
</body>
<!-- 在react开发中，使用JSX，跟JavaScript语法不兼容，在使用JSX的地方，药设置type="text/babel"-->
<!-- babel转换编译器，ES6转换成可以在浏览器中运行的代码-->
<script type="text/babel">
    /*此处编辑react代码*/
    /*
    001.渲染一行标题
    ReactDOM.render()
    React的最基本方法，用于将模板转换成html语言，渲染DOM，并插入到相应的DOM节点中
    3个参数
    第一个参数：模板的渲染内容
    第二个参数：这段模板需要插入的DOM节点 一般是ID为container的div节点
    第三个参数：渲染后的回馈 一般不用
    */
    /*
    ReactDOM.render(
        <h1>basic react native</h1>,
        document.getElementById("container")
    );
    */
    /*
    002.JSX语法（语法糖）
    第一：JSX必须借助React环境运行
    第二：JSX标签骑士就是HTML标签，只不过我们在JavaScript中书写这些标签的时候，不使用""括起来，可以像XML一样书写
    第三：JSX语法能够更直观看到DOM结构，不能直接在浏览器上运行，需要转换成JavaScript代码才能执行
    第四：如何在JSX中运行JavaScript代码——使用{}括起来 {表达式}

    */
    /*JSX语法
    ReactDOM.render(
        <h1>basic react native</h1>,
        document.getElementById("container")
    );
    */

    /*转换成JavaScript代码
    注意：React.createElement("h1",null,"basic react native"),三参数分别是标签、属性、内容
    ReactDOM.render(
        React.createElement("h1",null,"basic react native"),
        document.getElementById("container")
    );
    */
    /*在JSX中运行JavaScript代码——用{}括起来
    var text = "basic react native 变量";
    ReactDOM.render(
        <h1>{text}</h1>,
        document.getElementById("container")
    );
    */
</script>
</html>

 

posted @ 2017-11-05 20:45  我将枕中记忆抹去任岁月浮光掠影  阅读(142)  评论(0)  编辑  收藏  举报