创建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工程的更多相关文章
- 创建React工程：React工程模板
这是本人初学React做的学习笔记;讲的不是很深,只算是简单的进行介绍. 这是一个小系列.都是在同一个模板中搭建的,但是代码是不能正常执行的. >>index.js <!DOCTYP ...
- Eclipse创建Maven工程报错
问题 用Eclipse创建maven工程的时候,总是会报错,例如提示: Unable to create project from archetype [org.apache.maven.archet ...
- MyEclipse创建Maven工程
先要在MyEclipse中对Maven进行设置:
- Vivado SDK 2014.2 创建新工程后，BSP版本不对的解决办法
问题描述如下: 1. 使用Vivado SDK 2014.2已经创建了工程,但是此时,hdf文件增加了外设,需要重新创建工程以更新SDK中的外设描述: 2. 使用新的hdf创建工程后,发现system ...
- 关于Xcode6创建的工程在Xcode5打开
Xcode6创建的工程在Xcode5打开- 4.0只显示3.5大小的问题 只需要在工程里添加Default-568h@2x.png,即可以解决
- windows下无法创建django工程的问题
环境:python2.7 django1.7 安装好django后,将C:\Python27\Lib\site-packages\Django-1.7.7-py2.7.egg\django\bin; ...
- 在VS2015 RC打开CTP中创建的工程
VS2015终于出了RC了!小伙伴们快来安装试用吧,地址在这里,还有新的Windows 10开发工具哦,要不然是开发不了Universal Windows App的,安装前记得卸载CTP版本. 新的R ...
- iOS创建子工程
实际开发中,我们可能会同时开发好几个端,比如楼主目前开发的家教平台,需要老师端,家长端,助教端三个端.有很多工具方法,或者封装的自定义控件都是可以复用的.我们就可以把公用的代码抽取出去,新建一个工程, ...
- Myeclipse中创建Maven工程的时候没有 webapp-javaee6
1. http://mvnrepository.com/artifact/org.codehaus.mojo.archetypes/webapp-javaee6/1.5 中有描述
随机推荐
- 服务器发送邮件出现Could not connect to SMTP host错误 解决办法
服务器发送邮件出现Could not connect to SMTP host错误 解决办法 功夫不负有心人,最后了解到,除了google的smtp服务器收到请求“smtp”会接受,其他服务器比如qq ...
- SpringMVC简单的文件上传
引入依赖包: <!-- 文件上传的依赖 --> <dependency> <groupId>commons-fileupload</groupId> & ...
- 值得一做》关于一道DP+SPFA的题 BZOJ1003 (BZOJ第一页计划) (normal-)
这是一道数据范围和评测时间水的可怕的题,只是思路有点难想,BUT假如你的思路清晰,完全了解怎么该做,那就算你写一个反LLL和反SLE都能A,如此水的一道题,你不心动吗? 下面贴出题目 Descript ...
- Ros学习——移动机器人Ros导航详解及源码解析
1 执行过程 1.运行仿真机器人fake_turtlebot.launch:加载机器人模型——启动机器人仿真器——发布机器人状态 2.运行amcl节点fake_amcl.launch:加载地图节点ma ...
- 公共技术点之 Java 反射 Reflection
本文摘录地址: http://codekk.com/open-source-project-analysis/detail/Android/Mr.Simple/%E5%85%AC%E5%85%B1%E ...
- suse配置dhcp服务器
Suse dhcp服务器安装在安装系统时勾选 Suse dhcp 默认配置文件 /etc/dhcpd.conf Suse dhcp 启动程序 /etc/init.d/dhcpd restart 配置 ...
- 面试题:JVM类加载机制详解（一）JVM类加载过程 背1
首先Throws(抛出)几个自己学习过程中一直疑惑的问题: 1.什么是类加载?什么时候进行类加载? 2.什么是类初始化?什么时候进行类初始化? 3.什么时候会为变量分配内存? 4.什么时候会为变量赋默 ...
- keepalived配置
keepalived配置 之前已经安装完成,接下来我们配置keepalived. 假设我的ip地址如下: server1:192.168.0.150 server2:192.168.0.157 vip ...
- App测试从入门到精通之兼容性和回归测试
兼容性测试需要考虑的APP测试点 1.不同网络环境下的兼容性测试 2.不同手机操作系统兼容性测试 3.不同应用软件的兼容性测试 4.不同的容量大小的SIM卡之间的互相兼容测试 5.当安装杀毒软件时,应 ...
- 编写高质量代码改善C#程序的157个建议——建议49：在Dispose模式中应提取一个受保护的虚方法
建议49:在Dispose模式中应提取一个受保护的虚方法 在标准的Dispose模式中,真正的IDisposable接口的Dispose方法并没有做实际的清理工作,它其实是调用了下面的这个带bool参 ...