react重点.docx

开始学习本教程会尽量简单。上述讨论提及的页面是一个 HTML 文件，它包含在服务器源码包中，我们先看看这个文件。使用你最喜欢的编辑器打开?public/index.html?，然后会看见这些内容（可能会有一些小的差异，后面我们会添加一个额外的?script?标签）：!-- index.html --!DOCTYPE htmlhtmlheadmetacharset=utf-8/titleReact Tutorial/titlescript src=/ajax/libs/react/0.14.0/react.js/scriptscript src=/ajax/libs/react/0.14.0/react-dom.js/scriptscript src=/ajax/libs/babel-core/5.8.23/browser.min.js/scriptscript src=/ajax/libs/jquery/2.1.1/jquery.min.js/script/headbodydivid=content/divscript type=text/babelsrc=scripts/example.js/scriptscript type=text/babel// To get started with this tutorial running your own code, simply remove// the script tag loading scripts/example.js and start writing code here./script/body/html在本教程的剩下部分，我们会在这个 script 标签中编写我们的 JavaScript 代码。我们没有任何高端的页面自动加载刷新工具，所以在修改了代码之后，需要手动刷新浏览器来查看变化。下面，启动服务器，在浏览器中打开?http://localhost:3000?。在没对源码进行修改的前提下，第一次打开这个 URL 会看到我们计划构建的应用的一个最终样子。当你准备好开始往下学习的时候，只需要删掉上述代码中的?script?标签就可以了。注意：因为我们想简化 ajax 请求代码，所以在这里引入 jQuery，但是 React 并不依赖于 jQuery 。你的第一个组件React 中全是模块化、可组装的组件。对于我们的评论框例子，我们将有如下的组件结构：- CommentBox - CommentList - Comment - CommentForm让我们构造?CommentBox?组件，它只是一个简单的?div?：// tutorial1.jsvarCommentBox=React.createClass({render:function(){return(divclassName=commentBoxHello,world!IamaCommentBox./div);}});ReactDOM.render(CommentBox/,document.getElementById(content));注意，原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头。JSX语法首先你注意到 JavaScript 代码中 XML 式的语法语句。我们有一个简单的预编译器，用于将这种语法糖转换成纯 JavaScript 代码：// tutorial1-raw.jsvarCommentBox=React.createClass({displayName:CommentBox,render:function(){return(React.createElement(div,{className:commentBox},Hello, world! I am a CommentBox.));}});ReactDOM.render(React.createElement(CommentBox,null),document.getElementById(content));JSX 语法是可选的，但是我们发现 JSX 语句比纯 JavaScript 用起来更容易。更多内容请阅读《 JSX 语法介绍》。发生了什么我们通过 JavaScript 对象传递一些方法到?React.createClass()?来创建一个新的 React 组件。其中最重要的方法是?render?，该方法返回一棵 React 组件树，这棵树最终将会渲染成 HTML 。这里的?div?标签不是真正的 DOM 节点；他们是 React?div?组件的实例。你可以认为这些标签就是一些标记或者数据， React 知道如何处理它们。React 是安全的。我们不生成 HTML 字符串，因此默认阻止