创建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 中有描述
随机推荐
- 【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 5 Octave Tutorial—5.4 绘制数据图
5.4 绘制数据图 参考视频: 5 - 4 - Plotting Data (10 min) 5.4.1 绘制曲线 1.画一个sin曲线 >> t = [:0.01:0.98]; > ...
- 正确理解Python函数是第一类对象
正确理解 Python函数,能够帮助我们更好地理解 Python 装饰器.匿名函数(lambda).函数式编程等高阶技术. 函数(Function)作为程序语言中不可或缺的一部分,太稀松平常了.但函数 ...
- Apache与Tomcat联系及区别
Apache与Tomcat都是Apache开源组织开发的用于处理HTTP服务的项目,两者都是免费的,都可以做为独立的Web服务器运行.Apache是Web服务器而Tomcat是Java应用服务器. A ...
- resin3.X那些事之resin.conf
[经验总结]resin那些事之resin.conf ----by johnson 话说与resin打交道很久了,却从未系统了解过.resin一听火了,说:你老兄当真与我打交道很久了?工具.流程如此发达 ...
- PHP内核介绍及扩展开发指南—Extensions 的编写
Extensions 的编写 理解了这些运行机制以后,本章着手介绍Extensions 的编写,但凡写程序的人都知道hello world,那好,就从hello world开始. 1.1Hello W ...
- SpringBoot15 sell01 项目创建、MySQL数据库连接、日志配置、开发热部署、商品信息模块
项目软件版本说明: jdk: 1.8 springboot: 2.0.1 mysql: 5.7 1 项目创建 创建一个SpringBoot项目即可,创建是勾选 web jpa mysql 这三个依赖就 ...
- ROS naviagtion analysis: costmap_2d--CostmapLayer
博客转自:https://blog.csdn.net/u013158492/article/details/50493220 这个类是为ObstacleLayer StaticLayer voxelL ...
- p5155 [USACO18DEC]Balance Beam
传送门 分析 https://www.luogu.org/blog/22112/solution-p5155 代码 #include<bits/stdc++.h> using namesp ...
- Luogu 4254 [JSOI2008]Blue Mary开公司
BZOJ 1568 学习了一波李超线段树. 大佬blog 这个东西专门用来维护插入一条线段和区间/单点的最大/最小值. 插入的时候讨论: 1.如果当前结点上没有线段,那么直接插入. 2.如果当前结点上 ...
- C#中GUID的生成格式(Guid.ToString方法 )
GUID 是微软对UUID这个标准的实现.UUID是由开放软件基金会(OSF)定义的.UUID还有其它各种实现,不止GUID一种 public string ToString( string ...