React基础(一)

NO.1 ReactDom.render

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

ReactDom.render(
  <Name />,
  document.getElementById('app')
  );

上面代码的含义是将Name这个组件插入ID为app的元素中。

NO.2 JSX语法

将HTML语言直接写入带JS语言之中，这就是JSX语法

var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);

JSX的语法规则是如果遇到HTML的标签，就用HTML的规则解析，如果遇到代码块，就用JS的规则解析。

JSX允许直接在模板中插入JS变量，如果变量是一个数组，则会展开这个数组的所有成员查看

var arr = [
    <h1>Hello world!</h1>,
    <h2>React is awesome</h2>,
     ];
     ReactDOM.render(
    <div>{arr}</div>,
    document.getElementById('example')
     );

NO.3 组件（component）

新建一个name.js,把他封装成为一个组件，内容如下：

'use strict';
import React from "react";
class Name extends React.Component {
render () {
  return (
    <div>
      hello~
    </div>
    );
  }
}
export { Name as default };

Name就是一个组件类，模板插入<Name />，会自动生成Name的一个实例，有三点必须注意：
1.所有组件中必须有自己的render方法，用于输出组件；
2.组件类的第一个字母必须大写，否则会报错；
3.组件只能包含一个顶层标签，否则会报错；例如，如果将return里面的内容改成:

  return (
    <div>
      hello~
    </div>
    <div>
      youngi~
    </div>
    );

然后webpack会返回报错信息:
Adjacent JSX elements must be wrapped in an enclosing tag (11:4)

组件的用法和原生的HTML的用法一致，可以加入任意属性，比如<Name name="youngi"/>，有一点值得注意的是，class和for这两个属性应该写为className和htmlFor

ReactDom.render(
  <Name name="youngi" />,
  document.getElementById('app')
  );

那么在组件中，想要获取这个属性就可以用this.props.name读取：

class Name extends React.Component {
render () {
  return (
    <div>
      hello~<div>{this.props.name}</div>
    </div>
    );
  }
}

NO.4 this.props.children

这个是个特例，这个代表的意思不是去找this.props的children属性，而是去找这个组件的所有子节点

这里需要注意， this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。

React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。

render: function() {
    return (
      <ol>
      {
        React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
        })
      }
      </ol>
    );
  }

NO.5 PropTypes

这个属性是组件类的属性，而不是组件的属性，这个PropTypes可以用来验证从组件传来的属性是否合法。例如：

import React from 'react';
import ReactDom from 'react-dom';
import Name from './name';

var name = 123

ReactDom.render(
  <Name name= {name} />,
  document.getElementById('app')
  );

如上代码显示，Name组件的name属性的类型为number类型，而不是字符串，那么在组件类中，对这个属性进行验证：

class Name extends React.Component {
render () {
  return (
    <div>
      hello~<div>{this.props.name}</div>
    </div>
    );
  }
}
Name.propTypes = { name: React.PropTypes.string.isRequired };

进行验证后，验证不通过的话，会在控制台上报错

Invalid prop `name` of type `number` supplied to `Name`, expected `string`.

NO.6 defaultProps 设置组件的默认值

class Name extends React.Component {
render () {
  return (
    <div>
      hello~<div>{this.props.name}</div>
    </div>
    );
  }
}

Name.defaultProps = { name: "youngi" };