React快速入门(二)

将 commentBox 抽象为一个类,那么代码可以优化为:

注意:原生HTML标签,用小写字母开头; 而自定义的React类名要以大写字母开头。

也可以写成如下形式:

React 的代码会涉及到 JSX的语法,可以自行查阅。

React组件的创建过程

React.createClass() 会创建一个全新的React组件。其中,最为关键的方法就是 render,它会返回一棵 React 组件树,而这一组件树最终会被渲染为页面上的HTML代码。
这里的HTML标签都不是真正的DOM节点,而是虚拟的节点,React会对其做处理。比如,这里的div不是常规的DOM节点,而是React的div组件的一个实例。React不生成HTML字符串,因此默认阻止了XSS攻击

ReactDOM.render() 方法,来对组件进行实例化,并将其注入到指定的DOM元素中。

ReactDOM模块提供了一些与DOM相关的方法;
React模块包含了其他的核心工具,比如: React Native

HTML 组件就是普通的 React 组件,就和你定义的组件一样,只不过有一处不同。
JSX 编译器会自动重写 HTML 标签为 React.createElement(tagName) 表达式,其它什么都不做。这是为了避免全局命名空间污染。

组件可以通过 this.props.authorthis.props.children 来访问属性。

支持Markdown语法

添加marked支持,需要增加一个marked.min.js

<script src="http://cdn.bootcss.com/marked/0.3.5/marked.min.js"></script>

sanitize:true: 输出的是正常的html标签
sanitize:false: 输出的是经过转义的html标签