[React-章节6 实践篇] 做一个留言板项目 之 规划

前提

做这个项目之前,至少需要掌握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标签和编码标签。

整个项目结构大概如下:

可以点击下载这个初始化的项目,后续的开发会基于这个结构继续添砖加瓦。

构思

整个app包含3个页面:

  • 留言列表页:支持滚动,上拉刷新,下拉加载
  • 留言详情页:点击列表某项,进入观看完整留言
  • 发表留言:点击列表页头部按钮,进入编辑页面输入留言,最终提交留言。

其中,列表页涉及一些手势交互,是最复杂的;后两个页面功能相对单一,实现不复杂。

动手

路由

列表页可以配置为/msg-list,从服务端翻页获取列表数据,并且每条msg有唯一的id。

详情页可以配置为/msg-detail/:msgId,这样详情页可以捕获id从服务端获取数据。

发表页可以配置为/msg-create,填写内容点击发布即可,发布后跳转到/msg-detail页面。

搭架子,形成雏形

在上面下载的项目中,已经准备好了基本的雏形,配置好了相关的路由,可以分别看一下。

首先路由配置如下:

3个路由项分别指向3个Page级的组件,这3个组件可以在component目录下找到它们。拿其中一个MsgDetailPage为例,看一下实现:

可见,该组件仅仅返回空的<div>,需要我们继续为其创建更多的子组件填充进去,从而形成”留言详情页”。正因为该页面功能单一,所以我会先从这个页面开始着手开发。

开发工具

首先,需要启动webpack-dev-server,保证项目实时刷新到浏览器中。同时,你应该已经熟练的使用webstrom进行代码编写。

其次,需要打开chrome浏览器,打开开发者工具选择iphone5设备,将调试栏挪到右侧,左侧保留页面。

此后,可以localhost:8080,它将默认打开MsgListPage,我们的开发从此起步。

我的界面长这样,你的呢?

8a78dbb8-826c-4830-84e1-f58ae2b05092

在下一篇中,我将编写一个非常非常简单的”留言详情页”,动手练练吧!

发表评论

电子邮件地址不会被公开。