React作为目前最流行的前端框架之一,其受欢迎程度不容小觑,从这门框架上我们可以学到许多其他前端框架所缺失的东西,也是其创新性所在的地方,比如虚拟DOM、JSX等。那么接下来我们就来学习一下这门框架是如何构建起一个单页应用的。

前言

首先在学习这门框架前,你需要对以下知识有所了解:

  1. 原生JS基础

  2. CSS基础

  3. npm包管理基础

  4. webpack构建项目基础

  5. ES6规范

以上五个知识点也是目前学习其他前端框架所必须了解的前置任务。
JS和CSS就不多说了,npm是目前最提倡也是占据主导地位的包管理工具,还在用bower或者其他工具的童鞋可以考虑下了。而webpack作为新一代打包工具,已经在前端打包工具中独占鳌头,和Browserify相比也有很大优势。至于ES6规范虽然现在主流浏览器还不兼容,但可以使用babel等转换器进行转换。

结合其他的一些主流前端框架,我个人认为构建单页应用有这样三个基本的东西:组件、路由、状态管理。那么接下来我就基于这三者来介绍React,当然其中会穿插一些额外的知识点。

组件

React的组件撰写和调用主要依赖于ES6的模块化和JSX的语法,以下是一个例子:

// main.js
import React from 'react'
import { render } from 'react-dom'
import MyComponent from './component.js'
import './main.css' // 主组件
class MyDemo extends React.Component {
render() {
return (
<div className="box">
<MyComponent />
</div>
)
}
} render((
<MyDemo />
), document.getElementById('app')) // component.js // 子组件
import React from 'react' export default class MyComponent extends React.Component {
render() {
return (
<div>
<p>这是一个组件!</p>
</div>
)
}
} // main.css
.box {
width: 100%
}

相比Vue.js框架,我个人认为React的组件编写方式还是没有Vue来的舒服,组件的css样式还是脱离在组件外部的,维护起来也不是很方便。想了解Vue组件编写方式的可以看一下我之前写的一篇文章《浅谈Vue.js》

从这个例子中我们就可以看到React的虚拟DOM和JSX的特性了。相比其他框架,React的虚拟DOM不仅可以提升页面的性能,同时还可以防止XSS攻击等。关于虚拟DOM的具体原理这里不作介绍,有兴趣的童鞋可以参考
http://www.alloyteam.com/2015/10/react-v...

至于JSX语法则是JS的一种语法糖,我们可以通过这种语法糖来便捷实现一些功能,这里JSX 把类 XML 的语法转成纯粹 JavaScript,XML 元素、属性和子节点被转换成 React.createElement 的参数。类似的JS语法糖还有TypeScript等。

路由

前端路由机制是目前构建单页应用(SPA)最重要的一环之一。通过前端路由我们可以优化用户体验,不需要每次都从服务器获取全部数据,从而快速将页面展现给用户。

React路由依赖于React Router。React Router 保持 UI 与 URL 同步。它拥有简单的 API 与强大的功能例如代码缓冲加载、动态路由匹配、以及建立正确的位置过渡处理。

下面是一个React路由的例子:

import React, { Component } from 'react'
import { render } from 'react-dom'
import { Router, Route, IndexRoute, Link, browserHistory } from 'react-router' const ACTIVE = { color: 'red' } class App extends Component {
render() {
return (
<div>
<h1>我的路由</h1>
<ul>
<li><Link to="/" activeStyle={ACTIVE}>首页</Link></li>
<li><Link to="/users" activeStyle={ACTIVE}>用户页</Link></li>
</ul>
{this.props.children}
</div>
)
}
} class Index extends React.Component {
render() {
return (
<div>
<h2>Index!</h2>
</div>
)
}
} class Users extends React.Component {
render() {
return (
<div>
<h2>Users</h2>
</div>
)
}
} render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Index}/>
<Route path="users" component={Users}></Route>
</Route>
</Router>
), document.getElementById('app'))

这里只列出了React的一种路由写法。相比其他框架,React路由的语法更加通俗易懂。关于React Router的详细介绍请参照官方文档:http://react-guide.github.io/react-route...

状态管理

状态管理不是单页应用必须的,使用它能够帮助我们统一管理各个状态的变更,使整个项目流程清晰可维护。React实现状态管理可以使用官方推荐的Redux。
Redux使用的是严格的单向数据流。整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。因为Redux状态管理的知识点繁多,所有我额外写了一篇文章,详情请戳这里:《Redux 状态管理方法与实例》

项目实例

这里我用React写了一个单页网站,页面如下:

这是一个基于React和Antd的实例,全部源码我已经上传至我的github,地址为:https://github.com/luozhihao/react-antd-...,这里只为不懂如何用React构建单页应用的童鞋作参考。

Antd是蚂蚁金服的一款基于React的开源UI组件库,其官网为:http://ant.design/

Fetch

因为上面的实例中我用到了Fetch来进行Ajax交互,所以这里简单介绍下Fetch。
我们可以把Fetch作为下一代Ajax技术,它采用了目前流行的 Promise 方式处理。利用Fetch我们可以这样写Ajax进行数据交互:

// 获取数据方法
fetchFn = () => {
fetch('../../data.json')
.then((res) => { console.log(res.status);return res.json() })
.then((data) => { this.setState({lists:data.listData}) })
.catch((e) => { console.log(e.message) })
}

这里有一篇介绍Fetch的文章写的不错,推荐给大家《传统 Ajax 已死,Fetch 永生》

结语

还是那句话,学习一门框架最重要的并不是学习它的技术,而是学习其带来的解决问题的思路。通过React这一门框架的学习,你可以从它独特的新特性中发掘一种新的思维模式。只有思维层面得到了扩展,你才能在前端的海洋里自由翱翔。

React构建单页应用方法与实例的更多相关文章

  1. 使用 Vuex + Vue.js 构建单页应用

    鉴于该篇文章阅读量大,回复的同学也挺多的,特地抽空写了一篇 vue2.0 下的 vuex 使用方法,传送门:使用 Vuex + Vue.js 构建单页应用[新篇] ------------------ ...

  2. vue2.0 构建单页应用最佳实战

    vue2.0 构建单页应用最佳实战   前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,vue-resource,vuex 1.使用 vue-cli 创建项目2.使 ...

  3. 使用 Vuex + Vue.js 构建单页应用【新篇】

    使用 Vuex + Vue.js 构建单页应用[新篇] 在去年的七月六号的时候,发布了一篇 使用 Vuex + Vue.js 构建单页应用 的文章,文章主要是介绍 vuex 的基本使用方法,发现对大部 ...

  4. Nodejs in Visual Studio Code 12.构建单页应用Scrat实践

    1.开始 随着前端工程化深入研究,前端工程师现在碉堡了,甚至搞了个自己的前端网站http://div.io/需要邀请码才能注册,不过里面的技术确实牛.距离顶级的前端架构,目前博主应该是far away ...

  5. 通过Web Api 和 Angular.js 构建单页面的web 程序

    通过Web Api 和 Angular.js 构建单页面的web 程序 在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的 ...

  6. React + Node 单页应用「二」OAuth 2.0 授权认证 &amp; GitHub 授权实践

    关于项目 项目地址 预览地址 记录最近做的一个 demo,前端使用 React,用 React Router 实现前端路由,Koa 2 搭建 API Server, 最后通过 Nginx 做请求转发. ...

  7. vue+vuex构建单页应用

    基本 构建工具: webpack 语言: ES6 分号:行首分号规则(行尾不加分好, [ , ( , / , + , - 开头时在行首加分号) 配套设施: webpack 全家桶, vue 全家桶 项 ...

  8. Web API 2 入门——使用ASP.NET Web API和Angular.js构建单页应用程序(SPA)(谷歌翻译)

    在这篇文章中 概观 演习 概要 由网络营 下载网络营训练包 在传统的Web应用程序中,客户机(浏览器)通过请求页面启动与服务器的通信.然后,服务器处理请求,并将页面的HTML发送给客户端.在与页面的后 ...

  9. 用vuex构建单页

    原文地址:点我 前言:在最近学习 Vue.js 的时候,看到国外一篇讲述了如何使用 Vue.js 和 Vuex 来构建一个简单笔记的单页应用的文章.感觉收获挺多,自己在它的例子的基础上进行了一些优化和 ...

随机推荐

  1. day4----装饰器

    装饰器本质是函数,装饰其他函数,就是为其他函数添加附加功能. 原则:1.不能修改被装饰的函数的源代码           2.不能修改被装饰的函数的调用方式   实现装饰器 知识储备 1.函数即“变量 ...

  2. UIAlertViewController+TextField 输入框

    if (IOS8) { UIAlertController *alertController=[UIAlertController alertControllerWithTitle:CustomLoc ...

  3. linux链接

    ( 1 )软连接可以跨文件系统,硬连接不可以 ( 2 )硬连接不管有多少个,都指向的是同一个 I 节点,会把结点连接数增加,只要结点的连接数不是 0 ,文件就一直存在不管你删除的是源文件还是连接的文件 ...

  4. 对JS作用域和作用域链的理解

    理解好javascript的变量作用域和链式调用机制对用好变量起着关键的作用,下面我来谈谈这两个概念的理解. (1)链式调用机制 作用域链的定义:函数在调用参数时会从函数内部到函数外部逐个”搜索“参数 ...

  5. vue项目经验:图形验证码接口get请求处理

    一般图形验证码处理: 直接把img标签的src指向这个接口,然后在img上绑定点击事件,点击的时候更改src的地址(在原来的接口地址后面加上随机数即可,避免缓存) <img :src=" ...

  6. 流程图 --- BPMN规范简介

    BPMN 目前 是2.0规范 http://www.bpmn.org/   BPMN Quick Guide http://blog.csdn.net/flygoa/article/details/5 ...

  7. Unity3d之Hash&amp;Slash学习笔记(一)--角色属性类的构架

    角色属性类的构架 角色属性类有8个类,继承关系如下图: 每个类的具体作用见之后的随笔

  8. [Python 多线程] RLock可重入锁 (九)

    RLock 可重复锁,是线程相关的锁.同样是线程相关的还有threading.local. 线程A获得可重用锁,并可以多次成功获取,不会阻塞.最后要再线程A中和acquire次数相同的release. ...

  9. Java实现简单的RPC框架(美团面试)

    一.RPC简介 RPC,全称为Remote Procedure Call,即远程过程调用,它是一个计算机通信协议.它允许像调用本地服务一样调用远程服务.它可以有不同的实现方式.如RMI(远程方法调用) ...

  10. 二十二、Node.js-get&amp;post

    get: 前台代码: <body> <h1>登录</h1> <form action="/dologin" method="ge ...