You are here

使用React开发新闻手机站点

Submitted by Peniel on Fri, 07/29/2016 - 11:40
Undefined

选择理由

提高用户体验,减少页面反复刷新的等待和网络开销。使用ES6,webpack,react技术开发,之前没有经验,有一定的挑战性,但是又会充满乐趣。

使用到的npm 模块

{
  "name": "React Mobile Website",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --inline --content-base . --history-api-fallback"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.13.0",
    "react": "^15.2.1",
    "react-addons-css-transition-group": "^15.2.1",
    "react-dom": "^15.2.1",
    "react-router": "^2.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.5.1",
    "babel-loader": "^6.2.2",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "http-server": "^0.8.5",
    "webpack": "^1.12.13",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack配置

module.exports = {
  entry: './index.js',

  output: {
        path: 'public',
    filename: 'bundle.js',
    publicPath: 'public'
  },

  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' },
            { test: /\.css$/, loader: "style!css" }
    ]
  }
}

网站分拆的模块
真个站点使用到的只有两个页面:
    *文章列表
    *文章详情
所以将这个页面分为:
    App
        List
            Articles
                Article
        Post

具体展示的时候,使用到的模块包括
    Article
        PostLink
        PostCreated
        PostImgList
        PostImg
    ArticleDetail

数据接口通过axios插件进行和服务器api交互

交互
交互使用了React Router,同时加上页面的过度效果。

在不同页面切换的时候,通过componentWillReceiveProps来判断url的变化,根据当前url里面的变量从服务器读取对应的数据,通过setState函数更新页面的显示。

可以做的更好
考虑使用react reduct来包装数据交互部分

项目小结

整个一周左右的开发过程充满挑战,体会到和之前的开发完全不一样的模式,看到应用的运行时,虽然是不是那么完美,但是至少已经迈出了第一步。和之前的写法相比,更加简洁,可复用性更好。对于以后开发更加复杂的项目是一个很好的铺垫。

完成项目地址:

m.gospeltimes.cn

Category: