React入门教程(一)——JSX学习篇

为什么要使用React?

——构建随着时间数据不断变化的大规模应用程序

开始学习

主要思想：

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