解决方法如下：
复制代码
varanimals=[''dog'',''cat'',''pig''];
ReactDOM.render(
{
animals.map(function(animal,key){
return{animal}
})
}
,
document.getElementById(''example'')
);
复制代码
警告的意思是最好给循环产生的child添加一个key。这样就可以接触警告了。运行结果如下：
这里面你也许还会遇到另外一个问题，那就是用的SublimeText，然后太浏览器打开的时候提示：
browser.min.js:3XMLHttpRequestcannotloadfile:///Users///React/MyReactDemo/helloworld/src/helloworld.js.
Crossoriginrequestsareonlysupportedforprotocolschemes:
http,data,chrome,chrome-extension,https,chrome-extension-resource.
其实是因为我们将js单独拉出来文件导致的，但是你会发现如果使用Safari浏览器是没有这个问题的。在这里找到了答案：
复制代码
startupchromewith--disable-web-security
OnWindows:
chrome.exe--disable-web-security
OnMac:
open/Applications/Google\Chrome.app/--args--disable-web-security
复制代码
因为Chrome浏览器不支持本地ajax访问。
你也可以构建本地服务器进行访问，比如我使用的intellJIDEA，直接就是在本地构建了一个本地服务，此时访问地址为：
http://localhost:63342/MyReactDemo/helloworld/src/helloworld.html
而没有构建本地服务的时候访问地址为：
file:///Users/zhanggui/zhanggui/React/MyReactDemo/helloworld/src/helloworld.html
3、组件化
因为React使用的是JSX，所以它允许将代码封装成组件（component），然后像普通的HTML标签一样插入。
复制代码
React.createClass方法就是用于生成一个组件类，比如：
varZGButton=React.createClass({
render:function(){
return
}
});
ReactDOM.render(
,
document.getElementById(''example'')
);
复制代码
运行结果如下：
上面的ZGButton就是一个组件类，模板插入
，会自动生成一个该组件的实例。
所有组件类都必须有自己的render方法，用于输出组件。
现在代码这样写：
复制代码
varzGButton=React.createClass({
render:function(){
return
}
});
ReactDOM.render(
Button,
document.getElementById(''example'')
);
复制代码
也就是将组件类的第一个字符小写，然后在引用的时候发现现在是双标签了（代码自动填充的时候出现），而且name失效。因此我们在开发组件的时候一定要将第一个首字符大写，否则将不会达到你想要的效果。
4、this.props.children
this.props对象的属性和组件的属性一一对应，但是有个children除外，它表示的是组件的所有子节点：
复制代码
varStudents=React.createClass({
render:function(){
return(
{
React.Children.map(this.props.children,function(child){
return- {child}
})
}
);
}
});
ReactDOM.render(
zhangsan
lisi
,
document.getElementById(''example'')
);
复制代码
此时输出的结果为：
5、PropTypes
组件就类似与我们OC开发或者Java开发中的类，类可以进行属性添加，组件也可以。
组件的属性可以接受任意值，字符串、对象、函数都行。这里面有一个propTypes，可以用来限定提供的属性是否满足要求：
复制代码
varStudent=React.createClass({
propTypes:{
myName:React.PropTypes.string.isRequired,
},
render:function(){
return
{this.props.myName}
}
});
varmyNameStr="React";
ReactDOM.render(
,
document.getElementById(''example'')
);
复制代码
这里面的propTypes里面的是对属性的限制，比如这里必须是string类型，值是必须的。我们还可以去设置默认属性值：
复制代码
varStudent=React.createClass({
getDefaultProps:function(){
return{
myName:"DefaultReact"
}
},
propTypes:{
myName:React.PropTypes.string.isRequired,
},
render:function(){
return
{this.props.myName}
}
});
复制代码
这里面的getDefaultProps就类似与我们在开发iOS或者Java的时候对声明属性的时候进行赋初始化值。
6、VirtualDOM
组件并不是真实的DOM节点，而是存在于内存中的一种数据结构，叫做虚拟DOM，只有插入文档的时候才会变成真实的DOM。根据React的设计，当重新渲染组件的时候，会通多diff寻找到变更的DOM节点，再把这个修改更新到浏览器实际的DOM节点上，所以实际上并不是渲染整个DOM数，这个VirtualDOM是一个纯粹的JS数据结构，性能比原生DOM快很多。这里面我们可以用通过ref属性来获取真实的DOM属性：
复制代码
varMyComponment=React.createClass({
render:function(){
return(
);
},
handleClick:function(){
//alert(this.refs.myTextInput);
this.refs.myTextInput.focus();
}
});
ReactDOM.render(
,
document.getElementById(''example'')
);
复制代码
这里需要注意的是，因为我们使用的是真实的DOM对象，所以一定要确保DOM插入文档之后才能够使用。
7、this.state
我们可以通过this.state来拿到组件的状态：
复制代码
varLinkButton=React.createClass({
getInitialState:function(){
return{linked:false};
},
handleClick:function(){
this.setState({linked:!this.state.linked});
},
render:function(){
vartext=this.state.linked?''linked'':''notlinked'';
return(
You{text}this.Clicktotoggle
);
}
});
ReactDOM.render(
,
document.getElementById(''example'')
);
复制代码
这里面我设置了一个linked的状态（是否连接）,这里通过this.state拿到当前状态，通过this.setState来设置状态。
8、表单
表单填写是用户和组件的互动：
复制代码
varForm=React.createClass({
getInitialState:function(){
return{value:''Hello''};
},
handleChange:function(event){
this.setState({value:event.target.value});
},
render:function(){
varvalue=this.state.value;
return(
);
}
});
ReactDOM.render(
,
document.getElementById(''example'')
);
复制代码
9、ComponentLifecycle
组件有三个主要的生命周期：
Mounting:组件插入到DOM
Updating:组件被重新渲染，如果DOM需要更新
Unmounting:从DOM中删除组件
React为每个状态都提供了两种处理函数，will函数在进入状态之前调用，did在进入状态之后调用。详情可参见这里。
复制代码
varMyButton=React.createClass({
componentDidMount:function(){
alert("已经装载");
},
componentWillMount:function(){
alert("将要装载");
},
componentWillUpdate:function(){
alert("将要更新");
},
componentDidUpdate:function(){
alert("已经更新");
},
componentWillUnmount:function(){
alert("将要移除");
},
render:function(){
return(
);
},
});
varLoadButton=React.createClass({
loadMyButton:function(){
ReactDOM.render(
,
document.getElementById(''myBTN'')
);
},
removeMyButton:function(){
varresult=ReactDOM.unmountComponentAtNode(document.getElementById(''myBTN''));
console.log(result);
},
render:function(){
return(
卸载MyButton
装载MyButton
这里是mybuttowww.baiyuewang.netnquyu
