开发者学堂课程【React前端开发入门与实战：一步一步搭建 React- 应用 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/365/detail/4360
一步一步搭建 React- 应用
内容介绍：
一、 react 官方评论的应用
二、 CommentBox
三、 方法 v
四、 数据分离
五、评论表单
六、重新渲染
一、 react 官方评论的应用
一步步搭建一个评论应用
Comments 列表里，有作者，评论内容
还可以在下图中的方框中输入作者和内容，并点击发送，就会上传成功。
这就是一个展示和修改例子的结合，是会涉及关于评论的列表，怎么提交表单还有和后端结合的功能
二、CommentBox
（1） 首先做一个系统分析的模块
一个简单的应用他就是一个组件 Box，它可以分解为三个类一个是列表 List，每一个列表中又会分为许多行，一行就会形成一个类，然后表单 From 也是一个类
关于组件分解
·顶层 CommentBox；
·评论列表 CommentList；
·单条评论 Comment；
·评论表单 CommentFrom；
下图中就是一个类，他就只有一个 div 就是 hello world
代码为：
var CommentBox =React.createClass ({
render:function(){
return(
< div className=” commentBox ">
Hello, world! I am a CommentBox .
</div>
);
}
});
React, render(
< CommentBox />,
document. getElementById ("container')
);
运行结果为：Hello, world! I am a CommentBox
（2） 把一个类分成三个类
var CommentList =React.createClass ({
render:function(){
return(
< div className=” commentList ">
Hello, world! I am a CommentList .
</div>
);
}
});
var CommentFrom =React.createClass ({
render:function(){
return(
< div className=” commentFrom ">
Hello, world! I am a CommentFrom .
</div>
运行后结果为：
Comments
Hello, world! I am a CommentList.
Hello, world! I am a CommentFrom.
（3） 进一步细化，实现 list
将 list 中评论条在生成一个类
var Conment= React.createclass ({
render:function() {
return(
<div className= "comment">
< h2 className = " commentAuthor ">
{this, props, author}
</h2>
{this. props. children}
</div>
);
}
});
var ComnentList=React.createClass ({
render;function(){
return(
<div className= "commentList">
<Comment author="作者1">评论1</Comment>
<Comment author="作我Z">评论2</Comment>
</div>
）
}
运行结果为：
列表中有两个实例，这些都是同一类，作者名和内容，接触到的是假的，是由属性传过去的 。
三、 使用 DOM 库 MARKED
var Comment=React.create Class({
render:function(){
var rawMarkup=marked(this.props. children.toString(), {sanitize:true});
return(
<div className="comment">
<h2 className =" commentAuthor ">
{this.props.author}
</h2>
<span dangerrouslySetInnerHTML = {{ __html:raw Markup}}/>
</div>
);
});
var CommentList =React.createClass ({
render:function(){
return(
<div className="comment List">
<Comment author="作者1">评论1</Comment
<Comment author="作者2">*评论2*</Comment>
运行结果如图：
四、数据分离并从服务器取得数据
var data= {
{author：”作者1”,text:”评论1”}，
{ author：”作者2”,text:”评论2”}
}
var Comment=React.create Class({
render:function(){
render:function(){
return(
<div className="comment List">
<Comment author="作者1">评论1</Comment
<Comment author="作者2">*评论2*</Comment>
</div>
);
}
});
url:this.props.url,
data:{
json:JSON.encode({
data:[
{
author:’作者1’，
text：’评论1,’+Date.now()
},
{
author:’作者2’，
text：’评论2,’+Date.now()
五、评论表单
<div className="comment">
< h2 className ="commentAuthor">
{this.props.author}
</h2>
<span dangerouslySetInnerHTML ={{_
var database=[
{
author;'作者1',
text;”评论1,'+Date. now()
}
{
author;'作者2',
text;”评论2,'+Date. now()
}
实现后的结果为：
框内的初始状态为空，可以在框内输入内容进行发布，输入一个值，这个状态就会被记录下来
六、重新渲染
代码如下：
var Comment=React.createClass ({
render:function(){
var rawMarkup=marked(this.props.children.toString(),{sanitize:true});
var database=[
{
author;'作者1',
text;”评论1,'+Date. now()
author;'作者2',
text;”评论2,'+Date. now()
render:function (){
});
运行后效果为：
