react单页面源码（react 单页应用）
本文目录一览：
如何用reactjs构建一个完整的前端页面
用reactjs构建一个完整的前端页面的步骤：
准备：React 的安装包，建议去官网下载安装
1、使用 React 的网页源码，结构大致如下：
!DOCTYPE htmlhtml head script src="../build/react.js"/script script src="../build/react-dom.js"/script script src="../build/browser.min.js"/script /head body div id="example"/div script type="text/babel" // **用户代码 ** /script /body/html
上面代码有两个地方需要注意。
首先，最后一个 script 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。
其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
2、将 src 子目录的 js 文件进行语法转换，转码后的文件全部放在 build 子目录。
$ babel src --out-dir build
3、渲染转换成html节点，以方便操作dom：
ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
这里以插入hello world为例来说明
ReactDOM.render( h1Hello, world!/h1, document.getElementById('example'));
4、运行结果如下：
我由Angular转向React，为什么
React速度很快
与其它框架相比，React采取了一种特立独行的操作DOM的方式。
它并不直接对DOM进行操作。
它引入了一个叫做虚拟DOM的概念，安插在JavaScript逻辑和实际的DOM之间。
这一概念提高了Web性能。在UI渲染过程中，React通过在虚拟DOM中的微操作来实对现实际DOM的局部更新。
跨浏览器兼容
虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
模块化
为程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
每个组件都可以进行独立的开发和测试，并且它们可以引入其它组件。这等同于提高了代码的可维护性。
单向数据流让事情一目了然
Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。它只是一个概念，而非特定工具的实现。它可以被其它框架吸纳。例如，Alex Rattray有一个很好的Flux实例，在React中使用了Backbone的集合和模型。
纯粹的JavaScript
现代Web应用程序与传统的Web应用有着不同的工作方式。
例如，视图层的更新需要通过用户交互而不需要请求服务器。因此视图和控制器非常依赖彼此。
许多框架使用Handlebars或Mustache等模板引擎来处理视图层。但React相信视图和控制器应该相互依存在一起而不是使用第三方模板引擎，而且，最重要的是，它是纯粹的JavaScript程序。
同构的JavaScript
单页面JS应用程序的最大缺陷在于对搜索引擎的索引有很大限制。React对此有了解决方案。
React可以在服务器上预渲染应用再发送到客户端。它可以从预渲染的静态内容中恢复一样的记录到动态应用程序中。
因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
React与其它框架/库兼容性好
比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。
不幸的是，目前的JavaScript版本并没有提供一个打包和加载的模块。（在未来的ES6版本上将使用System.import来解决这个问题）。
幸运的是，我们有RequireJS和Webpack这些漂亮整洁的替代品。React是由Browserify构建的，如果你想操作图像资源或者编译Less和CoffeeScript，Webpack或许是一个更好的选择。
需要另一个开发框架来配合React吗？
可以使用React来构建用户界面，但是你仍然需要进行AJAX调用，应用数据过滤以及其它Angular已经实现的功能。
如果还需要另一个额外的JavaScript开发框架，为什么不使用Angular？
框架由一系列模块和规则组成。如果我们不需要它的一些模块，甚至想将某些模块替换，该怎么做？
其中一种实现模块化且能更好地进行依赖管理的方法是通过包管理器。
但是，在Angular中怎么进行包管理呢？这还得取决于你，但是得记住，Angular是自成一体的。你很可能需要让第三方包去适配Angular。
另一方面，React仅仅只是JavaScript而已。任何用JavaScript写的的包都不需要用React去封装。
使用npm和Bower这样的包管理器更好。我们可以选择自己的组件和工具集。需要明确的是：这比使用像Angular这样的综合性开发框架更复杂。
就这方面而言，React的好处是鼓励使用npm，npm已经拥有了很多现成的包。你可以从完整的初学者工具包中选择一个开始构建React应用的包。
转向使用React也不是一帆风顺的！
由于Angular是一个应用开发框架，它带来了很多便利。我放弃了一些好的功能比如：封装好的AJAX用于$http服务，$q用于应答服务，ng-show，ng-hide，ng-class和ng-if作为模板的控制语句——所有这一切都让人惊奇。
React不是一个应用开发框架，所以你需要考虑如何处理构建一个应用程序的其它方面。例如，我正在参与一个叫做react-utils的开源项目，它可以帮助React进行更简单便捷的开发。
就目前而言，社区也在积极的贡献一些类似的组件来填补这一方面的空白。React Components就是这样一个非官方的网站，你可以在这儿找到类似的开源组件。
React的信条不鼓励使用双向绑定，这也给处理表单数据和编辑表格数据带来了很多痛苦。
无论如何，当你开始理解Flux数据流和存储，事情就变得简单、清晰和简单。
React是新生的。这需要一些时间让它周边社区发展。在另一方面，Angular已经非常流行了，且有大量的可用扩展（例如 AngularUI和Restangular）。
虽然React的社区刚起步，但是发展得非常迅速。像React Bootstrap这样的扩展就是一个很好的证明。早晚会拥有更多更丰富的组件，这只是一个时间问题。
总结
如果喜欢Angular的方式，在一开始你可能会不喜欢React。主要是因为它是单向数据流且缺乏开发应用程序的一些功能。最终很多事情还是需要自己来考虑。
然而当开始习惯了Flux的开发模式和React的设计理念，我相信你会看到它的美。
Facebook和Instagram都在使用React(因为他们在领导这个项目)。
GitHub最新的源码编辑器Atom就是用React构建的。
雅虎邮箱也正在使用React重构。
React已经被大量的应用程序和科技公司所关注。
如何做一个react的单页面webapp
手机不好使啊-_-||1函数声明functionreinitIframe(){variframe=document.getElementById("ifm1");//ifare=id为ifm1的节点try{//try{}catch{}有错误会通过catch语句抛出，无误执行try内部代码varbHeight=iframe.contentWindow.document.body.scrollHeight;vardHeight=iframe.contentWindow.document.documentElement.scrollHeight//手机不好用，但是怎么看bheight和dheight赋了相同值啊？这两句是赋值，等号右边表示iframe内部窗口高度varheight=Math.max(bHeight,dHeight);//比较两个变量大小，将大的赋值给heightiframe.height=height;//height赋值给iframe}catch(ex){}//前面提到的错误抛出}window.setInterval("reinitIframe()",200);上面那个方法每200毫秒刷新一次话说加分吧手机不易啊-_-||
如何在react中加入js源码
直接写 react 只是有他的结构要求，而代码很大部分都是直接用原生JS进行数据操作
