摘要：但多页应用不用考虑新旧页面的变化，一个多页应用每一页都会重新建立。下面咱们围绕一个单页应用的，来细说。如果没有这两个库，我们是没法创建应用的。结束语本篇文章大概讲了怎么创建一个单页应用，让大家了解一下。
好久没写文章了，今天来分享一篇 关于 react 的 helloWord 。如果你也是刚开始学习react，或者已经久仰 react 并开始着手学习，那或许这篇文章能给你一点启发。
文章围绕一个小案例来学习 -- 创建一个简单的单页应用
一、了解什么是单页应用，什么是多页应用
1、以前你做的或看到的网站可能包含多个多带带的网页，主页一个导航，点开打开另一个网页，这就是传统的多页应用。多页应用有什么优缺点呢？
首先对用户的体验不是很好，销毁一个网页，再重新打开另一个网页。其次数据的传递也不是很便利，利用cookie和服务端来保存用户数据是一种普遍的处理方式，但是 不 方 便 。但多页应用不用考虑新旧页面的变化，一个多页应用每一页都会重新建立。
2、单页应用（SAP），单页应用不需要重新加载整个页面，单页应用可以对整个页面进行区块化划分，加载和卸载某一块区块。在单页应用中，我们的大部分时间会花在保持数据与 UI 同步上。
那单页应用有什么缺陷吗？有地，不如单页应用回频繁的操作dom ，对节点的删除和添加，这样加大了浏览器对性能的要求。
二、react的出现
首先单页应用无疑来说对用户的体验更加友好的，那么站在用户的角度，我们只要解决单页应用的缺陷不就两全其美了。
Facebook (和 Instagram) 觉得该解决这些问题了。在经历了足够的单页应用实践后，他们发布了一个叫做 React 的库。
react 并不关心UI 开始是什么状态，只关心UI的最终状态。因为 DOM 操作是真的很慢，所以React不会直接 修改 DOM，而是修改内存中的虚拟 DOM，React在每次需要渲染时，会先比较当前DOM内容和待渲染内容的差异，然后再决定如何最优地更新DOM。
或许你听说过 MVC MVP MVVC 等一些设计模式，你可以吧 react 当中 V 层，也就是 view 层，专门来负责 ui 的处理，react 把页面的各个功能分成一小块（俗称组件），更新页面的时候只更新改动过的组件即可。
三、开始进入正题。
下面咱们围绕一个 单页应用的demo ，来细说 react 。
思路是这样的 ，先讲解一下 react 的一些新知识和概念 -- 上代码 -- 对代码进行解释 -- 总结
1、依赖库
第一行引入 核心 React 库，第二行引入 React DOM 库。如果没有这两个库，我们是没法创建 React 应用的。
Web 应用（以及浏览器显示的其它一切）是由 HTML、CSS 和 JavaScript 组成的：所以，我们还需要在两个 script 标记下添加对 Babel JavaScript 编译器的引用：
Babel 可以做很多很酷的事情，但是我们关心的是将 JSX 变成 JavaScript 的能力。 JSX 下面解释。
添加
ReactRouter 为由 React 创建的单页应用提供了路由能力.因为在原始的多页应用中，地址栏 url 是实时对应你访问页面的地址的。但在单页应用中，组件的替换或添加不能在地址栏url实时对应，当用户刷新或后退网页，就不在对应用户原先访问的那个页面了。所以 ReactRouter 是来帮咱们解决这一问题的一个 js库
应用模板：
React Components
2、JSX
JSX 你可以把它看做可以写 js 和 html 的混合标记。我们通常在 js 里面动态的创建一个html元素是这样的：
var xxx = document.createElement("div");
xxx.className = "xxx";
xxx.xxx
.......
xxx.appendChild(xxx);
但有了 JSX ，你就可以这样：
运行上面的代码是在 body 显示 Batman 的字样 ，后面会解释 ，反正要创建 html元素，直接写 html语法就可以了，是不是很酷。
3、组件的概念
单页应用最重要的就是将页面组件化。
最开始我们创建组件的方式是用 React.createClass
一个简单的 helloword组件：
var HelloWorld = React.createClass({
render: function() {
return (
你好，react 组件!
);
}
});
上面是利用 React.createClass 创建一个组件，组件有一个强制性的属性render，render方法的return 返回组件的内容。
组件的引用：
ReactDOM.render(, document.body );
render 将 HelloWorld组件添加到 body 中
也许你会很好奇在浏览器上显示是什么结构的：
4、一个单页应用的demo
有了上面的基础知识，咱们利用demo进一步学习。
效果图：点击 nav 会切换不同的页面，但注意是单页的！
（1）、创建导航条组件
var App = React.createClass({
render: function() {
return (
Simple SPA
- Home
- Stuff
- Contact
)
}
});
上面简单的创建了个导航条的组件，其中 ``
（2）、创建 Home 组件：
var Home = React.createClass({
render: function() {
return (
HELLO
Cras facilisis urna ornare ex volutpat, et
convallis erat elementum. Ut aliquam, ipsum vitae
gravida suscipit, metus dui bibendum est, eget rhoncus nibh
metus nec massa. Maecenas hendrerit laoreet augue
nec molestie. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus.
Duis a turpis sed lacus dapibus elementum sed eu lectus.
);
}
});
到这里应该比较能适应 React 创建组件的方式了吧。 render方法里面有个 return 来返回组件的内容。
（3）、创建 Contact 和 Stuff 组件：
var Contact = React.createClass({
render: function() {
return (
GOT QUESTIONS?
The easiest thing to do is post on
our forums.
);
}
});
var Stuff = React.createClass({
render: function() {
return (
STUFF
Mauris sem velit, vehicula eget sodales vitae,
rhoncus eget sapien:
- Nulla pulvinar diam
- Facilisis bibendum
- Vestibulum vulputate
- Eget erat
- Id porttitor
);
}
});
（5）、往导航条添加链接
组件都创建好了，接下来就是怎么将组件对应起来咯，
var App = React.createClass({
render: function() {
return (
Simple SPA
Home - Stuff
- Contact
{this.props.children}
)
}
});
App 是刚开始创建的导航条组件，这里咱们用到了一个 React Router 的 Link 组件，其实它是跟 类似 ，但提供的功能更多 ， to 就好比 的 href ，指向一个链接。 (6)、加载组件 上面用到了 Route 组件， 当你访问的 url为 /stuff 时就加载组件 Stuff（Stuff组件咱们前面已经写好了），当你访问 url 为 /Contact 时 就加载组件 Contact，那访问 url 为 / 呢 ，那就加载 `IndexRoute ，这也是 IndexRoute 不同于组件 Route `。 那结合第五部统一分析下： Link to 是给 组件`` Stuff指定了链接 ， Route组件是给 链接定义了对应的组件，最后由 来加载显示出对应的组件。 结束语： 下面上完整代码： 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。 转载请注明本文地址：https://www.ucloud.cn/yun/91154.html
那上面代码就好理解啦，to=“/" 就是指向当前链接 ， to="/stuff" 就是指向 /stuff 链接。
细心的你还会发现第一个 li 是 IndexLink组件 ，这个跟Link有什么不同呢。IndexLink组件是用来初始化时候指定的链接。
咱们在 里面放的不是上面创建的那几 Home、Stuff 、Contact个组件 ，而是 放了个 {this.props.children} ，这是啥意思呢，这里你先知道 this.props.children 可以用于访问 子元素 以及该组件所有的任何子孙元素。这里用这个属性来加载子组件，后面会做解释
上面那几步都是创建了组件，怎么把组件加载到页面中还得利用 ReactDOM.renderReactDOM.render(
如下，
那么，
{this.props.children}
本篇文章大概讲了 react 怎么创建一个单页应用，让大家了解一下react 。很对具体的知识点多略过，想深入学习可以看以下这些教程：
React Router 使用教程
React 简介
摘要：今天我们将讨论创建组件的最终方案，即无状态函数的纯组件。今天我们正在研究一种处理提出的复杂数据的方法，称为体系结构。第天部署介绍今天，我们将探讨部署我们的应用所涉及的不同部分，以便外界可以使用我们的应用。 本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...
摘要：本文转载自众成翻译译者链接原文今天，我们将添加一个构建过程来存储常见的构建操作，以便我们可以轻松地开发和部署我们的应用。在要创建应用的目录中打开终端窗口。文件有一个的节点，这个应用本身将被自动挂载这是在文件中处理的。 本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3822原文：https://www.fullstackreact...
摘要：本文转载自众成翻译译者链接原文今天，我们从一开始就开始。让我们看看是什么，是什么让运转起来。什么是是一个用于构建用户界面的库。它是应用程序的视图层。所有应用程序的核心是组件。组件是可组合的。虚拟完全存在于内存中，并且是网络浏览器的的表示。 本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3765原文：https://www.ful...
摘要：我们的第一个假设是非常简单的测试。我们正在测试以确保元素被包装在类中。在我们编写的每个测试中我们都需要将应用呈现在工作测试文档中。作为提醒我们可以使用命令或命令来运行测试。 本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3804原文：https://www.fullstackreact.com/30-days-of-react/...
摘要：但是使用标记将告诉浏览器处理路由就像服务器端路由一样。组件需要一个称为的属性指向要渲染的客户端路由。发生这种情况的原因是响应路由器将渲染与路径匹配的所有内容除非另有指定。属性预计将是一个函数将在对象连同和路由配置时调用。 本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3815原文：https://www.fullstackrea...
阅读 2796·2023-04-26 03:01
阅读 3284·2023-04-25 19:54
阅读 1373·2021-11-24 09:39
阅读 1101·2021-11-19 09:40
阅读 2967·2021-10-14 09:43
阅读 1801·2019-08-30 15:56
阅读 1378·2019-08-30 13:52
阅读 1548·2019-08-29 13:05
