react学习笔记

React是一个用于构建组件化UI的库,以JavaScript为中心，把"HTML"放到JS里

JSX语法：HTML 语言直接写在 JavaScript 语言之中，不加任何引号

遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析

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

ReactDOM.render(

  <div>

  {

    names.map( (name) => {

      return <div>Hello, {name}!</div>

    })

  }

  </div>,

  document.getElementById('example')

);

ReactDOM.render(template,targetDOM),该方法接收两个参数：第一个是创建的模板，多个dom元素外层需使用一个标签进行包裹，如<div>；第二个参数是插入该模板的目标位置。

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

var HelloMessage = React.createClass({

  render: function() {

    return <h1>Hello {this.props.name}</h1>;

  }

});

ReactDOM.render(

  <HelloMessage name="John" />,

  document.getElementById('example')

);

组件类的第一个字母必须大写，否则会报错

组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取