React学习随笔

　　跟随阮一峰的React入门学习，把里面的代码down下来，然后一个个demo去尝试，修改

demo1－React.render

　　1 ReactDOM.render() 方法 接受两个入门参数，第一个是需要插入的节点，第二个插入的父节点

demo2 -JSX

　　1 JSX的基本语法 遇到｛以js语法解析，<以html语法解析

　　2 html的数组会被遍历生成html 如下，会被正确执行，生成两个div　　　　　　

ReactDOM.render(
        <div>
        {
          // names.map(function(name){
          //   return <div>Hi, {name}</div>
          // })
          [<div>wiki</div>,<div>jack</div>]
        }
        </div>,
        document.getElementById(‘example‘)
      );

　　3 将里面的数组改成<div>wiki</div><div>jack</div>，会直接报错，也不支持return这样的语句

　　4 即然数组可以，那试试对象－将里面的数据改成{div: ‘wiki‘} Invariant Violation: Objects are not valid as a React child (found: object with keys {div}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.  翻译一下吧：{div}这样的object不能作为React的child，必须使用数组或者React构造方法生成的对象。

 demo4 - 组件，上面的使用React的构建对象的方法，

　　1 React.createClass 提供了上面构造方法，可以理解成new 一个ReactChild这样的类，需要实现render这个接口，没有实现的话 Uncaught Error: Invariant Violation: createClass(...): Class specification must implement a `render` method.

　　2 通过<ClassName> 这样的html标签式的调用，同时定义标签上面的属性，会自动带到ClassName.props属性里面，再看看属性里面能不能插入对象属性

var HelloMessage = React.createClass({
        render: function() {
          return <h1>Hello {this.props.arr[0]} {this.props.ob.key}</h1>;
        }
      });

      ReactDOM.render(
        <HelloMessage name="John" arr={[‘a1‘, ‘a2‘]} ob={{key: ‘value‘}} />,
        document.getElementById(‘example‘)
      );

经过上面代码验证，props属性里面是可以保存对象属性的

　　　3 html标签里面class要写成className， for要写成htmlFor，这个试了下，代码不会生效，但是控制台会有error的提醒

　　　4 上面列出来的代码会变成4个span标签，现在看是会根据html的标签里的空格进行分隔，{}里面的空格不会被分割－－有待后续了解原因

demo5－pros.children－－闭合标签内部的元素

　　1 一般pros属性和自定义标签的属性一一对应，children属性，遍历this.pros, 如果是html标签  Each child in an array or iterator should have a unique "key" prop. Check the render method of `NotesList`. See https://fb.me/react-warning-keys for more information,大概是缺少data-reactid这个唯一的属性，如果是array数组，依旧有上面的error提示，好吧，改成React.Children.map(this.props.children,function(){.. })方法，如果是{key:‘world‘}，无论上面哪种遍历都会报错，对象不能ReactElment

demo5 -propTypes --验证pros对象内属性的类型和合法性

　　1 用控制台查看一下React.proTypes属性，图列在这里了，有什么需要可以去查API或者直接到控制台看方法

　　2 有React自带的，那自然有自定义的验证方法

React学习随笔

原文：http://www.cnblogs.com/sheldonzf/p/5050965.html