React入门教程(一)——JSX学习篇
2016-05-16 11:24
483 查看
为什么要使用React?
——构建随着时间数据不断变化的大规模应用程序
开始学习
主要思想:
1.仅仅只要表达出你的应用程序在任一时间点应该长的样子,然后当底层的数据变了,Recat会自动处理所有用户界面的更新。类似于,用户点击刷新按钮,只更新变化的部分。
2.构建可用组件:通过
React 你唯一要做的事情就是构建组件。得益于其良好的封装性,组件使代码复用、测试和关注分离(separation of concerns)更加简单。
JSX基本语法
JSX
的基本语法规则:遇到 HTML 标签(以
HTML 规则解析;遇到代码块(以
使用JSX,组件的结构和组件之间的关系看上去更加清晰。
示例如下:
也就是说,我们写一个XML标签,实质上就是在调用
createElement
API说明:
这个方法的第一个参数可以是一个字符串,表示是一个HTML标准内的元素,或者是一个ReactClass类型的对象,表示我们之前封装好的自定义组件。第二个参数是一个对象,或者说是字典也可以,它保存了这个元素的所有固有属性(即传入后基本不会改变的值)。从第三个参数开始,之后的参数都被认作是元素的子元素。
JSX转化
JSX转化器
要把带有JSX语法的代码转化为纯Javascript代码,有多种方式,对于内联与HTML中的代码或者是未经过转化的外部文件,在
HTML标签与React组件对比
React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
(1)要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。
例:
var
myDivElement
=
<div
className="foo"
/>;
React.render(myDivElement,
document.body);
(2)渲染组件
React
允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类
var
MyComponent
=
React.createClass({/*...*/});
var
myElement
=
<MyComponent
someProperty={true}
/>;
React.render(myElement,
document.body);
注:
所有组件都必须有自己的render方法用于输出组件;组件名的第一个字母必须大写否则会报错。
不过需要注意的是
DOM中一样,用
还有一点是,在创建HTML标准内的元素时,JSX转化器会丢弃那些非标准的属性,如果一定要添加自定义属性,那么需要在这些自定义属性之前添加
(3)命名空间式组件
比如开发组件的时候,一个组件有多个子组件,你希望这些子组件可以作为其父组件的属性,那么可以像这样用:
这样你只需将子组件的
传播属性:
如果提前就知道了组件的属性的话,写起来很容易。例如component组件有两个动态的属性foo和bar:
延时属性:
相当于传播属性中的示例。
JSX陷阱
(1)style属性:
在React中写行内样式时,要这样写,不能采用引号的书写方式
(2)HTML转义
有一些内容是用户输入的富文本,从后台取到数据后展示在页面上,希望展示相应的样式
结果页面直接输出内容了:
React默认会进行HTML的转义,避免XSS攻击,如果要不转义,可以这么写:
参考资料:
http://www.css88.com/archives/5632 http://reactjs.cn/react/docs/getting-started.html
——构建随着时间数据不断变化的大规模应用程序
开始学习
主要思想:
1.仅仅只要表达出你的应用程序在任一时间点应该长的样子,然后当底层的数据变了,Recat会自动处理所有用户界面的更新。类似于,用户点击刷新按钮,只更新变化的部分。
2.构建可用组件:通过
React 你唯一要做的事情就是构建组件。得益于其良好的封装性,组件使代码复用、测试和关注分离(separation of concerns)更加简单。
JSX基本语法
JSX
的基本语法规则:遇到 HTML 标签(以
<开头),就用
HTML 规则解析;遇到代码块(以
{开头);
使用JSX,组件的结构和组件之间的关系看上去更加清晰。
示例如下:
也就是说,我们写一个XML标签,实质上就是在调用
React.createElement这个方法,并返回一个
ReactElement对象。
createElement
API说明:
这个方法的第一个参数可以是一个字符串,表示是一个HTML标准内的元素,或者是一个ReactClass类型的对象,表示我们之前封装好的自定义组件。第二个参数是一个对象,或者说是字典也可以,它保存了这个元素的所有固有属性(即传入后基本不会改变的值)。从第三个参数开始,之后的参数都被认作是元素的子元素。
JSX转化
JSX转化器
要把带有JSX语法的代码转化为纯Javascript代码,有多种方式,对于内联与HTML中的代码或者是未经过转化的外部文件,在
script标签中要加上
type="text/jsx",并引入
JSXTransformer.js文件即可,不过这种方式并不建议在生产环境使用,建议的方法是在代码上线前就将代码转换好,可以使用
npm全局安装
react-tools:
HTML标签与React组件对比
React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
(1)要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。
例:
var
myDivElement
=
<div
className="foo"
/>;
React.render(myDivElement,
document.body);
(2)渲染组件
React
允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类
var
MyComponent
=
React.createClass({/*...*/});
var
myElement
=
<MyComponent
someProperty={true}
/>;
React.render(myElement,
document.body);
注:
所有组件都必须有自己的render方法用于输出组件;组件名的第一个字母必须大写否则会报错。
不过需要注意的是
class和
for这两个属性,JSX语法最终是要被转换为纯Javascript的,所以要和在Javascript
DOM中一样,用
className和
htmlFor。
还有一点是,在创建HTML标准内的元素时,JSX转化器会丢弃那些非标准的属性,如果一定要添加自定义属性,那么需要在这些自定义属性之前添加
data-前缀。
(3)命名空间式组件
比如开发组件的时候,一个组件有多个子组件,你希望这些子组件可以作为其父组件的属性,那么可以像这样用:
这样你只需将子组件的
ReactClass作为其父组件的属性:
传播属性:
如果提前就知道了组件的属性的话,写起来很容易。例如component组件有两个动态的属性foo和bar:
延时属性:
相当于传播属性中的示例。
JSX陷阱
(1)style属性:
在React中写行内样式时,要这样写,不能采用引号的书写方式
(2)HTML转义
有一些内容是用户输入的富文本,从后台取到数据后展示在页面上,希望展示相应的样式
结果页面直接输出内容了:
React默认会进行HTML的转义,避免XSS攻击,如果要不转义,可以这么写:
参考资料:
http://www.css88.com/archives/5632 http://reactjs.cn/react/docs/getting-started.html
相关文章推荐
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- HTML5调用摄像头实例
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- 通过Mootools 1.2来操纵HTML DOM元素
- jQuery Html控件基本操作(日常收集整理)
- WEB标准网页布局中尽量不要使用的HTML标签
- Flash 与 html 的一些实用技巧
- html工作中表格<tbody>标签的使用技巧
- HTML 向 XHTML1.0 兼容性指导
- C#自写的一个HTML解析类(类似XElement语法)
- 没有文件大小限制并免费的PDF到HTML转换工具
- 三种禁用FileSystemObject组件的方法
- JavaScript与HTML结合的基本使用方法整理
- css实现气泡框效果(实例加图解)
- 用vbs列出机器上所有能调用的组件
- html链接与文本标签们
- html活用软字符连接符
- 浅谈html中id和name的区别实例代码