React JS快速入门教程

翻译至官方文档《Tutorial》http://facebook.github.io/react/docs/tutorial.html@H_301_3@@H_301_3@

转载请注明出处：http://blog.csdn.net/adousen@H_301_3@

推荐阅读React|RakNet@H_301_3@博客：http://www.jb51.cc/cata/279591

在入门教程里，我们会创建一个简单却实用的评论盒子来作为我们的例子，你可以把它放进一个博客什么的。它实际上就是Disqus、LiveFyre、Facebook等实时评论的基础实现。
我们要实现的功能有：

浏览所有的评论
提交一个评论的表单
为你自定义的后端提供一个钩子

此外，还有一些优化特性：

显示

实时更新：当其它用户做出评论后，评论列表就可以得到实时的更新。
支持Markdown格式：用户可以用Markdown格式书写内容。

第一步

在教程中，我们直接使用的是CDN上的Javascript框架文件。
下面，打开任意你喜欢的编辑器，创建一个新的HTML文档：

 
 
  
   
    
      
     
      
     
      
     
      
     
      
     
      
     
      
     
      
     
      
     
      
     
      
     
   
 
 
<!-- template.html -->@H_301_3@@H_301_3@<html>@H_301_3@ @H_301_3@@H_301_3@<head>@H_301_3@@H_301_3@<title>@H_301_3@@H_301_3@Hello React@H_301_3@@H_301_3@</title>@H_301_3@@H_301_3@<script@H_301_3@@H_301_3@ @H_301_3@@H_301_3@src@H_301_3@@H_301_3@=@H_301_3@@H_301_3@"http://fb.me/react-0.12.0.js"@H_301_3@@H_301_3@></script>@H_301_3@@H_301_3@"http://fb.me/JSXTransformer-0.12.0.js"@H_301_3@@H_301_3@"http://code.jquery.com/jquery-1.10.0.min.js"@H_301_3@@H_301_3@</head>@H_301_3@@H_301_3@<body>@H_301_3@@H_301_3@<div@H_301_3@@H_301_3@id@H_301_3@@H_301_3@"content"@H_301_3@@H_301_3@></div>@H_301_3@@H_301_3@type@H_301_3@@H_301_3@"text/jsx"@H_301_3@@H_301_3@>@H_301_3@@H_301_3@ @H_301_3@@H_301_3@// Your code here@H_301_3@@H_301_3@</script>@H_301_3@@H_301_3@</body>@H_301_3@@H_301_3@</html>@H_301_3@

此后的教程中，我们都将在这里的script标签内编写JavaScript代码。

注意@H_301_3@：
此处我们将jQuery包含了进来，但目的只是为了方便编写ajax调用。但这不是在React中所必须做。

你的第一个组件

React所有的一切都是关于模块化、复合化的组件。就我们的评论功能来说，我们将按照下面的组件结构来实现：

React JS快速入门教程

第一步

你的第一个组件

JSX 语法

接下来做什么

组建组件

组件属性

使用props

添加 Markdowen语法支持

连接数据模型

从服务器读取

反应state

更新state

添加新的评论

事件Events

Refs

在props中定义回调函数

优化：优化更新

祝贺你！

猜你在找的React相关文章