前提
做这个项目之前，至少需要掌握1-5章节的内容，否则跨度太大。本篇将编写单页应用，实现：查看留言列表，留言详情，发表留言 一共3个功能，大概会涉及到5-6个组件。
准备
此前学习过程中，没有注重项目的组织结构清晰性，所有代码和配置都搅和在一起，编译后的文件和源代码也混在一起，非常难以管理。
在开始本项目之前，我按照自己的理解重新整理了项目，建立了common目录存放框架的通用配置（例如路由）和库文件，建立component目录用于存放各种组件。同时，也修改了配置文件webpack.config.js，令编译后的文件输出到output目录，同时将js输出到output/js，img输出到output/images，css输出到output/css目录。我还为index.html编写了模板文件index-template.html，在其中添加了支持移动端相关的viewport标签和编码标签。
整个项目结构大概如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
MacBook-Pro:spa baidu$ ll total 24 drwxr-xr-x 4 baidu staff 136 9 21 15:19 common drwxr-xr-x 6 baidu staff 204 9 21 15:12 component drwxr-xr-x 229 baidu staff 7786 9 20 14:11 node_modules -rw-r--r-- 1 baidu staff 897 9 20 14:10 package.json -rw-r--r-- 1 baidu staff 296 9 20 13:43 webpack-production.config.js -rw-r--r-- 1 baidu staff 1709 9 21 14:10 webpack.config.js MacBook-Pro:spa baidu$ ll common/ total 16 -rw-r--r-- 1 baidu staff 947 9 21 15:19 Router.es6 -rw-r--r-- 1 baidu staff 305 9 21 14:12 index-template.html MacBook-Pro:spa baidu$ ll component/ total 8 -rw-r--r-- 1 baidu staff 303 9 21 14:12 Container.es6 drwxr-xr-x 3 baidu staff 102 9 21 15:12 MsgCreatePage drwxr-xr-x 3 baidu staff 102 9 21 15:12 MsgDetailPage drwxr-xr-x 3 baidu staff 102 9 21 15:10 MsgListPage |
可以点击下载这个初始化的项目，后续的开发会基于这个结构继续添砖加瓦。
构思
整个app包含3个页面：
- 留言列表页：支持滚动，上拉刷新，下拉加载
- 留言详情页：点击列表某项，进入观看完整留言
- 发表留言：点击列表页头部按钮，进入编辑页面输入留言，最终提交留言。
其中，列表页涉及一些手势交互，是最复杂的；后两个页面功能相对单一，实现不复杂。
动手
路由
列表页可以配置为/msg-list，从服务端翻页获取列表数据，并且每条msg有唯一的id。
详情页可以配置为/msg-detail/:msgId，这样详情页可以捕获id从服务端获取数据。
发表页可以配置为/msg-create，填写内容点击发布即可，发布后跳转到/msg-detail页面。
搭架子，形成雏形
在上面下载的项目中，已经准备好了基本的雏形，配置好了相关的路由，可以分别看一下。
首先路由配置如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import React from "react"; import ReactDOM from "react-dom"; import {Router, Route, IndexRoute, hashHistory} from "react-router"; // 默认的App根路由，作为组件容器 import Container from "../component/Container"; // 各种小组件在这里引入 import MsgListPage from "../component/MsgListPage/MsgListPage"; import MsgDetailPage from "../component/MsgDetailPage/MsgDetailPage"; import MsgCreatePage from "../component/MsgCreatePage/MsgCreatePage"; ReactDOM.render( ( <Router history={hashHistory}> <Route path="/" component={Container}> <IndexRoute component={MsgListPage} /> <Route path="msg-list-page" component={MsgListPage}/> <Route path="msg-detail-page/:msgId" component={MsgDetailPage}/> <Route path="msg-create-page" component={MsgCreatePage}/> </Route> </Router> ), document.getElementById('reactRoot') ); |
3个路由项分别指向3个Page级的组件，这3个组件可以在component目录下找到它们。拿其中一个MsgDetailPage为例，看一下实现：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import React from "react"; import {Link} from "react-router"; export default class MsgDetailPage extends React.Component { constructor(props, context) { super(props, context); } render() { return ( <div></div> ); } } MsgDetailPage.contextTypes = { router: () => { React.PropTypes.object.isRequired } }; |
可见，该组件仅仅返回空的<div>，需要我们继续为其创建更多的子组件填充进去，从而形成”留言详情页”。正因为该页面功能单一，所以我会先从这个页面开始着手开发。
开发工具
首先，需要启动webpack-dev-server，保证项目实时刷新到浏览器中。同时，你应该已经熟练的使用webstrom进行代码编写。
其次，需要打开chrome浏览器，打开开发者工具选择iphone5设备，将调试栏挪到右侧，左侧保留页面。
此后，可以localhost:8080，它将默认打开MsgListPage，我们的开发从此起步。
我的界面长这样，你的呢？
在下一篇中，我将编写一个非常非常简单的”留言详情页”，动手练练吧！
如果文章帮助您解决了工作难题，您可以帮我点击屏幕上的任意广告，或者赞助少量费用来支持我的持续创作，谢谢~
Pingback引用通告： React.js系列学习-Java小咖秀
1