React.js官方案例-评论区的实现

前言

今天花点时间学习了下React.js,主要资源当然是官网,地址是React.js

下载安装

进入官网后点击Download React v15.3.2,这也是截止发文时期的最新版,安装其实就是引用的过程,首先需要引入3个主要的js

<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>

react.js是框架的主文件,react-dom.js是框架操作dom相关的文件,browser.min.js是转换JSX语法的,那么什么是JSX呢?JSX是Javascript 的XML扩展,具体可以百度一下啦
我们看到官方还引入了2个js文件

<script src="js/jquery.min.js"></script>
<script src="js/remarkable.min.js"></script>

一个是jquery,用于实现评论功能的ajax,一个是用于支持markdown的js
然后将react相关js代码写在comments.js中,使用如下方式引入:

<script src="js/comments.js" type="text/babel"></script>

这个引入有点不同,script默认type是text/javascript,但这里是text/babel,这里是因为我们的comments.js中使用了JSX语法,使用这个type以便browser解析

Hello World

任何一门语言,我们都要写出个Hello World,这个框架也不例外,我们在html中先构建一个dom

<div id="content"></div>

然后在comments.js中写react相关代码

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

这个代码的意思就是将h1渲染到id为content的容器中
截止到这里,算是入了个门,接下来可以前往https://facebook.github.io/react/docs/tutorial.html学习如何从零开始实现一个评论列表了,虽然是英文,但是很容易看懂,每步都写得很清楚,下一步与上一步代码的区别也有特别标注,祝君成功!下面可以下载我的学习代码,最后附个图:

qq%e6%88%aa%e5%9b%be20161008161855

结束语

在写到表单submit的时候,我有点疑惑,不过后来弄清楚了,

官方先是在form内定义

<form className="commentForm" onSubmit={this.handleSubmit}>
这个是将commentForm的handleSubmit方法绑定到onSubmit事件上
然后handleSubmit接收输入框数据并处理,输入不为空的时候调用了props.onCommentSubmit方法,这个方法在

<CommentForm onCommentSubmit={this.handleCommentSubmit}/>

这其实已经跑进CommentBox的领域了,因此CommentBox的handleCommentSubmit事件才是真正执行了表单submit的ajax方法,因此在handleCommentSubmit的ajax中,url写的this.props.url其实是在这里:

/*渲染至页面*/
ReactDOM.render(
    <CommentBox url="../React/data/comments.json" pollInterval={2000}/>,
    document.getElementById('content')
);

这里我们加载了外部json来替代服务器,但真实场景下,list和submit的url应该是属于同一接口,所以官方通过这么一波跳转来实现。

自行下载方法本地服务器下演示看看吧,有需要的情况下。老司机就算了…

共有 0 条评论

Top