1. 下载 main.jsBundle 包
    curl http://localhost:8081/index.ios.bundle -o main.jsbundle
  2.  
  3. <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello React</title>
  4.  
  5.     <!--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>
  6.  
  7. </head>
  8.  
  9. <body>
    <!--React渲染的内容会插到这个DOM节点中, 作为一个容器-->
    <div id="divc"></div>
  10.  
  11. </body>
  12.  
  13. <!--在React开发中,使用JSX开发,跟js不兼容, 在使用jsx的地方,要设置type=text/babel-->
    <!--babel是一个转换编译器,ES6可以转换成ES5,从而使浏览器兼容-->
    <script type="text/babel">
  14.  
  15. //    <!--在此处编写React代码-->
  16.  
  17. //需求: 渲染一行标题
        /*
        * ReactDOM.render()
        * React中的最基本的方法,用于将末班装换成html语言 , 渲染DOM, 并插入指定的DOM中
        *
        * 3个参数
        * 第一个:模板的渲染内容,html形式
        * 第二个:终端模板需要插入的DOM节点(本程序中,是id为container的div节点)
        * 第三个:渲染后的回调,一般不用
        *
        * */
  18.  
  19.     ReactDOM.render(
                <h1>Hello 小朋友</h1>,
                document.getElementById("divc")
  20.  
  21.     );
  22.  
  23.     /*
        * JSX 入门
        *
        * JSX 不是一门新的语言, 是个语法(语法糖)
        * 1.jsx必须借助React环境运行
        * 2.jsx标签就是html标签,只不过在javaScript中书写这些标签的时候,不用使用""括起来, 直接像 xml 一样书写
        *
        *
        *
        * */
  24.  
  25.     // 3.转换:jsx语法能够让我们更直观的看到组件的 DOM 结构, 但是补鞥直接在浏览器上运行的, 最终会转换成javaScript代码在浏览器运行
  26.  
  27.     React.render(
             react.createElement("h1",null,"Hello React"),
              document.getElementById("dddd")
        );
        //4.在jsx中运行javascript代码
        //使用{} 括起来,{表达式}
        var text = "小小";
        ReactDOM.render(
                <h1>{text}</h1>,
                document.getElementById("dddd")
  28.  
  29.     );
  30.  
  31.     //5.例如:属性, 设置样式,事件绑定等等...
  32.  
  33. </script>
  34.  
  35. </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. 用Python+Django在Eclipse环境下开发web网站

    一.创建一个项目如果这是你第一次使用Django,那么你必须进行一些初始设置.也就是通过自动生成代码来建立一个Django项目--一个Django项目的设置集,包含了数据库配置.Django详细选项设 ...

  2. javascript使用技巧总结,不断更新...

    1.使用a标签来获得当前页面相对地址的绝对地址 function getAbsoluteUrl(url){ var a; if(!a) a = document.createElement('a'); ...

  3. box-shadow 内阴影

    1.盒子阴影样式单词:box-shadow 2.语法 代表边框间距靠左0 靠上0 和1px阴影范围 阴影颜色为黑色(#000),有inset 代表框内阴影 ,不带inset 代表框外阴影. 注意:bo ...

  4. Linux yum失败解决

    Linux yum失败解决 问题: 在CentOS 5.5中需要使用yum安装程序,出现错误: There was a problem importing one of the Python modu ...

  5. linux Shell中常用的条件判断

    linux Shell中常用的条件判断 -b file            若文件存在且是一个块特殊文件,则为真 -c file            若文件存在且是一个字符特殊文件,则为真 -d ...

  6. Linux oprofile命令

    一.简介 oProfile是Linux平台上的一个功能强大的性能分析工具,支持两种采样(sampling)方式:基于事件的采样(eventbased)和基于时间的采样(timebased),它可以工作 ...

  7. 不用EL表达式---实现product页面显示

    产品页面显示 静态页面如下: <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  8. atom markdown报错：AssertionError: html-pdf: Failed to load PhantomJS module.

    今天安装markdown-pdf之后运行的时候报错: AssertionError: html-pdf: Failed to load PhantomJS module. You have to se ...

  9. 【Java学习01】：win7环境安装JDK

    最近开始学习java,从第一步做起吧.win7中安装jdk非常简单,大牛勿喷. 1.下载JDK并执行安装. 访问网站www.java.com,选择win7版本的JDK下载.下载后双击安装(比较慢,耐心 ...

  10. Spring MVC：Model、View、ModelAndView

    个人理解:View为服务器上的某个文件容器,可以为JSP,FTL等动态页面文件,甚至是媒体文件等等,单单是一个文件.Model的作用是存储动态页面属性,动态页面文件即View可以在Model中获取动态 ...