react学习笔记-01
1. HTML模板
Jsx是react的语法糖,最终会被编译成js语法。因此需要第三方库browser将jsx转换成js。
由于react 0.14版本之后,将react和react-dom拆分,所以需要分别引入react和react-dom
这是官网的一个demo
<!DOCTYPE html> <html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1 color>Hello, world!</h1>, document.getElementById('example') ); </script> </body> </html>
但是编译之后是这样的:
React.render( React.createElement("h1", {color: "red"}, "Hello, world!"), document.getElementById('example') );
render()方法里面的html代码被转换成了React.createElement.因此阔以使用React.createElement来创建模板,但不推荐。
React.createEleemt(type,[props],[...children]):
type:the type argument can be either a tag name string(such as "div"),or a React Compoment()
jsx语法规则:render方法第一个参数,首写字母如果是小写的就是HTML代码,如果是大写字母就是React组件;
jsx会主动去检查标签是否闭合,如果没有闭合,直接报错。
2.ReactDOM.render()+js
只需要用大括号括起来就可以使用js语法。
var names = ['Alice', 'Emily', 'Kate']; ReactDOM.render( <div> { names.map(function (name) { return <div>Hello, {name}!</div> }) } </div>, document.getElementById('example') );
编译之后变成:
var names = ['Alice', 'Emily', 'Kate']; React.render( React.createElement("div", null, names.map(function (name) { return React.createElement("div", null, "Hello, ", name, "!") }) ), document.getElementById('example') );
还是三个参数,第二个arg为null,第三个参数就是js代码。所以js代码只能放一行表达式,不能有;出现。
比如这样写就是错误的:
React.render( <div> { var a = 1; names.map(function (name) { return <div>Hello, {name}!</div> }) } </div>, document.getElementById('example') );
3.render 数组
arr是个数组,jsx会把arr的所有成员都添加到模板中。只需要用{}把arr括起来,表示js代码即可。
var arr = [ <h1>Hello world!</h1>, <h2>React is awesome</h2>, ]; ReactDOM.render( <div>{arr}</div>, document.getElementById('example') );
编译后结果:
React.render( React.createElement("div", null, [<h1>Hello world!</h1>,<h2>React is awesome</h2>,]), document.getElementById('example') );
react学习笔记-01的更多相关文章
- react学习笔记01
被项目拖了半年的我终于有时间学习react 了 下面是我最近学习的笔记 支持jsx语法 ReactDOM.render( <div> <h1>hello, word</h ...
- 软件测试之loadrunner学习笔记-01事务
loadrunner学习笔记-01事务<转载至网络> 事务又称为Transaction,事务是一个点为了衡量某个action的性能,需要在开始和结束位置插入一个范围,定义这样一个事务. 作 ...
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- React学习笔记--程序调试
React学习笔记 二 程序调试 前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...
- React学习笔记(一)- 入门笔记
React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...
- React学习笔记(七)条件渲染
React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...
- React学习笔记(六)事件处理
React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...
- React学习笔记(五)State&声明周期
React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...
- React学习笔记 - 组件&Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
随机推荐
- Cross platform GUI for creating SSL certs with OpenSSL
Someone said: from : https://micksmix.wordpress.com/2012/08/09/xca-cross-platform-gui-for-creating-s ...
- 【stanford C++】字符串(String)与流(Stream)
字符串(String)与流(Stream) 一.C++中字符串(String) 字符串(String):就是(可能是空的)字符序列. C++中的字符串在概念上和Java中的字符串类似. C++字符串用 ...
- 【Android LibGDX游戏引擎开发教程】第08期:中文字体的显示和绘制(下)
在上一篇的文章中,我们介绍了Hiero这个非常好用工具的使用,但是LIbgdx的BitmapFont不支持多图,常用汉字 3500个,你总不能用hiero自己做吧,那怎么办呢?这其实微软早就解决这个问 ...
- javascript深入之location对象和history对象
浏览器的location 和history对象: 一.location对象: 1>location.reload() 相当于按浏览器上的“刷新”(IE)或“Reload”(Netscape)键. ...
- ASP.Net MVC C#画图 页面调用
/////C# 后台代码 public FileContentResult PieChart() { TransactionStatisticsBLL bll = ...
- C#中的集合类——ArrayList
1. ArrayList与数组 数组的长度不可变,元素的类型单一: ArrayList 实际上相当于一个可变长度的动态数组,由于集合中的元素都是object类型,元素的类型可以有多种了:与数组一样, ...
- Java垃圾回收机制的工作原理
Java垃圾回收机制的工作原理 [博主]高瑞林 [博客地址]http://www.cnblogs.com/grl214 获取更多内容,请关注小编个人微信公众平台: 一.Java中引入垃圾回收机制的作用 ...
- 背水一战 Windows 10 (38) - 控件(布局类): Panel, Canvas, RelativePanel, StackPanel, Grid
[源码下载] 背水一战 Windows 10 (38) - 控件(布局类): Panel, Canvas, RelativePanel, StackPanel, Grid 作者:webabcd 介绍背 ...
- springMVC框架中json处理
1.在项目中导入jackson-core.jar包 2.使用@ResponseBody注解,此注解会自动装换为json 如图: 3.如此,便可以得到json对象
- PostScript学习:另一种缩写为PS的技术
1.前言 PostScript是一种编程语言,直译为"后处理脚本"[相对印刷过程而言],学名为页面描述语言.更为详细的解释见维基百科,以及其翻译版百度百科. 值得一提的是,Post ...