创建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 中有描述
随机推荐
- Centos 6.5 python 2.6.6 升级到 2.7
1.查看python的版本 [root@localhost ~]# python -V Python 2.6.6 2.安装python 2.7.3 [root@localhost ~]# yum in ...
- SSM框架整合（Spring+SrpingMVC+Mybatis） 简单案例
简介: SSM框架是Spring,SpringMVC 和Mybatis框架的整合,是标准的MVC模式,将整个系统划分为表现层,controller层,service层,dao层四层. Spring实现 ...
- 【NOIP2008】传纸条
[描述] Description 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就 ...
- SQL SERVER FOR XML PATH合并字符串
两种方式,效率立竿见影 ------------------------------------------------ SET STATISTICS TIME ON DECLARE @OrderSt ...
- Docker学习笔记_创建和使用Centos容器
实验:创建和使用Centos容器 步骤: 1.搜索 sudo docker search cen ...
- C/C++代码覆盖率工具gcov、lcov
gcov是一个可用于C/C++的代码覆盖工具,是gcc的内建工具.下面介绍一下如何利用gcov来收集代码覆盖信息. 想要用gcov收集代码覆盖信息,需要在gcc编译代码的时候加上这2个选项 “-fpr ...
- Ubuntu 源使用帮助
地址 https://mirrors.ustc.edu.cn/ubuntu/ 说明 Ubuntu 软件源 收录架构 AMD64 (x86_64), Intel x86 其他架构请参考 Ubuntu P ...
- c语言实践 给三个数输出最大的那个数
我是怎么想的,我前面学过两个数比大小,比如有三个数,a b c,先比较a和b的大小,然后用那个较大的和c比较就得出最大的那个了.这个求三个数比大小的问题最后变化成 了两个数比大小了. int main ...
- jqgrid扩展 获取表单数据
$.fn.GetPostData = function () { var data = {}; var k = false; $(this).find(".datacontrol" ...
- 快速入手Web幻灯片制作
在线幻灯片 使用markdown可以快速的写出优美的文档,接下来我介绍一些简单的语法,快速的用浏览器制作幻灯片. 最基本使用格式 <!DOCTYPE html> <html> ...