创建React工程

下载 main.jsBundle 包
curl http://localhost:8081/index.ios.bundle -o main.jsbundle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello React</title>

    <!--React 的核心库-->
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <!--提供与DOM相关的功能-->
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <!--可以将 ES6 代码转为 ES5 代码,防止不兼容-->
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

</head>

<body>
<!--React渲染的内容会插到这个DOM节点中, 作为一个容器-->
<div id="divc"></div>

</body>

<!--在React开发中,使用JSX开发,跟js不兼容, 在使用jsx的地方,要设置type=text/babel-->
<!--babel是一个转换编译器,ES6可以转换成ES5,从而使浏览器兼容-->
<script type="text/babel">

//    <!--在此处编写React代码-->

//需求: 渲染一行标题
    /*
    * ReactDOM.render()
    * React中的最基本的方法,用于将末班装换成html语言 , 渲染DOM, 并插入指定的DOM中
    *
    * 3个参数
    * 第一个:模板的渲染内容,html形式
    * 第二个:终端模板需要插入的DOM节点(本程序中,是id为container的div节点)
    * 第三个:渲染后的回调,一般不用
    *
    * */

    ReactDOM.render(
            <h1>Hello 小朋友</h1>,
            document.getElementById("divc")

    );

    /*
    * JSX 入门
    *
    * JSX 不是一门新的语言, 是个语法(语法糖)
    * 1.jsx必须借助React环境运行
    * 2.jsx标签就是html标签,只不过在javaScript中书写这些标签的时候,不用使用""括起来, 直接像 xml 一样书写
    *
    *
    *
    * */

    // 3.转换:jsx语法能够让我们更直观的看到组件的 DOM 结构, 但是补鞥直接在浏览器上运行的, 最终会转换成javaScript代码在浏览器运行

    React.render(
         react.createElement("h1",null,"Hello React"),
          document.getElementById("dddd")
    );
    //4.在jsx中运行javascript代码
    //使用{} 括起来,{表达式}
    var text = "小小";
    ReactDOM.render(
            <h1>{text}</h1>,
            document.getElementById("dddd")

    );

    //5.例如:属性, 设置样式,事件绑定等等...

</script>

</html>
巴特西

创建React工程

最新文章

热门文章
