react入门——阮一峰笔记

1. ReactDOM.render() JSX语法标签渲染

render是React的基本方法，用于将模板转为HTML语言，并插入指定DOM节点。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

HTML语言直接写在javascript语言之中，不加任何引号，这就是JSX语法。遇到"<"符号解析为HTML标签，遇到"{}"符号解析为javascript代码。如下：

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);

// 运行结果：
// hello，Alice！
// hello，Emily！
// hello，Kate！

// 加入一个数组内是标签,则JSX会将它的成员依次添加到模板中
var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

// 运行结果：
// Hello world!
// React is awesome

2.组件

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类.

• 变量HelloMessage是一个组件类,模板插入生成一个组件类的实例(注意:组件定义得到类, 应用时得到实例).
• 所有组件类都必须有自己的render方法,用于输出组件
  注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错

var HelloMessage = React.createClass({
  render: function() {
  	// 实例取组件类的属性,利用this.props.name读取
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  // 给组件加入了一个name属性
  // 也可以添加 className,等价于class
  // htmlFor 对应于 for
  <HelloMessage name="John" />,
  document.getElementById('example')
);