下载 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工程的更多相关文章

  1. 创建React工程：React工程模板

    这是本人初学React做的学习笔记;讲的不是很深,只算是简单的进行介绍. 这是一个小系列.都是在同一个模板中搭建的,但是代码是不能正常执行的. >>index.js <!DOCTYP ...

  2. Eclipse创建Maven工程报错

    问题 用Eclipse创建maven工程的时候,总是会报错,例如提示: Unable to create project from archetype [org.apache.maven.archet ...

  3. MyEclipse创建Maven工程

    先要在MyEclipse中对Maven进行设置:

  4. Vivado SDK 2014.2 创建新工程后，BSP版本不对的解决办法

    问题描述如下: 1. 使用Vivado SDK 2014.2已经创建了工程,但是此时,hdf文件增加了外设,需要重新创建工程以更新SDK中的外设描述: 2. 使用新的hdf创建工程后,发现system ...

  5. 关于Xcode6创建的工程在Xcode5打开

    Xcode6创建的工程在Xcode5打开- 4.0只显示3.5大小的问题 只需要在工程里添加Default-568h@2x.png,即可以解决

  6. windows下无法创建django工程的问题

    环境:python2.7  django1.7 安装好django后,将C:\Python27\Lib\site-packages\Django-1.7.7-py2.7.egg\django\bin; ...

  7. 在VS2015 RC打开CTP中创建的工程

    VS2015终于出了RC了!小伙伴们快来安装试用吧,地址在这里,还有新的Windows 10开发工具哦,要不然是开发不了Universal Windows App的,安装前记得卸载CTP版本. 新的R ...

  8. iOS创建子工程

    实际开发中,我们可能会同时开发好几个端,比如楼主目前开发的家教平台,需要老师端,家长端,助教端三个端.有很多工具方法,或者封装的自定义控件都是可以复用的.我们就可以把公用的代码抽取出去,新建一个工程, ...

  9. Myeclipse中创建Maven工程的时候没有 webapp-javaee6

    1. http://mvnrepository.com/artifact/org.codehaus.mojo.archetypes/webapp-javaee6/1.5 中有描述

随机推荐

  1. 【283】ArcMap 中河流字体设置

    左斜字体的设置 1.  右键属性设置如下,将字体角度如下设置,并点击改变样式的按钮 2. 首先设置颜色如下,然后设置加粗斜体,最后勾选 CJK character orientation 的复选框 C ...

  2. quartz在web.xml的配置

    第一步:下载所需的Jar包 commons-beanutils.ja.commons-collections.jar.commons-logging.jar.commons-digester.jar. ...

  3. Dubbo简单介绍及其和zookeeper的关系

    何为Dubbo ​ Dubbox 是一个分布式服务框架,其前身是阿里巴巴开源项目Dubbo ,被国内电商及互联网项目中使用,后期阿里巴巴停止了该项目的维护,当当网便在Dubbo基础上进行优化,并继续维 ...

  4. 【HDU4303】Hourai Jeweled

    题意 有一棵n个结点的树,每个结点都有一个值,没一条边都有一个颜色.如果某条路径上,相邻的边颜色不同,那么把这路径上所有的点的值加起来. 输出所有符合条件的路径上值的和. n<=300000. ...

  5. 安装gdb insight(6.8.1)

    如果之前安装过6.8或其它版本,请先删除以下目录 rm -rf /usr/local/insight rm -rf /usr/share/tcltk 如果之前设置过环境变量,也请删除 unset TC ...

  6. JS中的两种刷新方法以及区别和适用范围

    在项目中有一个人信息修改的页面,但是修改后显示的却是修改之前的内容,分析问题后发现查询语句写在了修改语句之前,有些某些需要又必须这么写,但是修改信息后先却显示之前的信息也太不科学了. 所以我就想用js ...

  7. MySQL - pt-query-digest的下载与使用

    对于脚本文件,是可以执行的,我们不用安装.所以,但是这个脚本文件没有执行的权限,所以,我们首先赋予这个脚本文件的可执行的权限. 再次查看文件的信息后. 已经有了执行的权限了. 运行脚本的时候,可要注意 ...

  8. PCL 常用小知识

    时间计算 pcl中计算程序运行时间有很多函数,其中利用控制台的时间计算 首先必须包含头文件 #include <pcl/console/time.h> #include <pcl/c ...

  9. Solidity string to uint

    oraclize result以string格式返回,solidity没有uint(string)这样的强制转换功能,如果要解析其中的数字,可以用oraclize提供的parseInt方法: prag ...

  10. Hyperledger子项目

    Hyperledger由五个子项目构成: • BlockChain Explorer 展⽰和查询区块链块.事务和相关数据的 Web应⽤ • Fabric 区块链技术的⼀个实现(主要项目) • STL ...