翻译至官方文档《Tutorial》http://facebook.github.io/react/docs/tutorial.html
转载请注明出处:http://blog.csdn.net/adousen
推荐阅读React|RakNet博客:http://www.jb51.cc/cata/279591
在入门教程里,我们会创建一个简单却实用的评论盒子来作为我们的例子,你可以把它放进一个博客什么的。它实际上就是Disqus、LiveFyre、Facebook等实时评论的基础实现。
我们要实现的功能有:
此外,还有一些优化特性:
- 优化评论:在评论保存到服务器前,就在列表中将其显示,这样会感觉更快。
- 实时更新:当其它用户做出评论后,评论列表就可以得到实时的更新。
- 支持Markdown格式:用户可以用Markdown格式书写内容。
第一步
在教程中,我们直接使用的是CDN上的Javascript框架文件。
下面,打开任意你喜欢的编辑器,创建一个新的HTML文档:
<!-- template.html --><html> <head><title>Hello React</title><script src="http://fb.me/react-0.12.0.js"></script>"http://fb.me/JSXTransformer-0.12.0.js""http://code.jquery.com/jquery-1.10.0.min.js"</head><body><divid"content"></div>type"text/jsx"> // Your code here</script></body></html>
此后的教程中,我们都将在这里的script标签内编写JavaScript代码。
注意:
此处我们将jQuery包含了进来,但目的只是为了方便编写ajax调用。但这不是在React中所必须做。
你的第一个组件
React所有的一切都是关于模块化、复合化的组件。就我们的评论功能来说,我们将按照下面的组件结构来实现: