业余学习react 学习记录

http://www.ruanyifeng.com/blog/2015/03/react (阮一峰 react 学习)

　1.搭建环境：npm 使用 React

　npm install -g cnpm --registry=https://registry.npm.taobao.org

$ cnpm install -g create-react-app          --全局安装create-react-app模块
$ create-react-app my-app
$ cd my-app/      　 　　　　　　　　　　　　　 --"my-app" :项目名
$ npm start 　　　　　　　　　　　　　　　　　　 --  webpack 命名 运行

2. 命名行：

npm start ； npm run build ; npm test ; npm run eject ;

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

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

　4.JSX 语法

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

5.组件  ：组件类的第一个字母必须大写，组件类只能包含一个顶层标签，否则也会报错

  var HelloMessage=React.createClass({
      /*组件类都必须有自己的render方法，用于输出组件*/
      render:function () {
        return <h1>{this.props.name}</h1>;
      }
    });

    ReactDOM.render(
      /*变量 HelloMessage 就是一个组件类*/
      <HelloMessage name='JOIN'/>,
      document.getElementById('example1')
    )

6.this.props.children （它表示组件的所有子节点）、

 

7.验证组件MyTitle 属性PropTypes

  var MyTitle = React.createClass({
    propTypes: {
      /*title屬性是字符串且必須的*/
      title: React.PropTypes.string.isRequired,
    }, 
    render: function() {
       return <h1> {this.props.title} </h1>;
     }
  });

8.this.state