用react系列技术栈实现的demo整合系统

阅读目录(Content)

• 引子
• 目录结构
• 技术栈相关
• webpack
• antd(2.10)
• react-router(4.x)
• fetch
• 项目的一些待扩展计划

回到顶部(go to top)

引子

学生时代为了掌握某个知识点会不断地作习题，作总结，步入岗位以后未尝不是同样呢？作业务就如同作习题，若是‘课后’适当地进行总结，必然更快地提高本身的水平。 因为公司采用的react+node的技术栈，因而就完成了一个reactSPA小项目，计划往后把平时工做中遇到的业务以及学习中遇到有趣的东西给抽象成demo展现出来。目前该项目只是把雏形搭好，效果以下：

 

其实这套界面风格不只仅能够做为后台管理系统界面，也能够修改为一个能够展现项目而且美观的博客。项目地址在这里(本地跑效果更佳)，若是有好的意见欢迎提issue或pr。

回到顶部(go to top)

目录结构

项目的初始结构和构造缘由已罗列如上，因为过些日子会加上redux和ts，因此项目结构必然还会改动，但确定基于这基本雏形扩展的。

下面对目录结构做如下说明

• 项目最初始是用create-react-app初始化的，create-react-app 是Facebook官方提供的react脚手架，也是业界最优秀的 React 应用开发工具之一;
• 中间件目录到时候能够引人日志中间件等;
• container和components存放的都是react组件，区别是：只要和主页样式有关的组件就放在container中，和功能有关的模块(好比我实现分装的表格组件、弹出输入框组件等)就应放到components中;
• 前端有些通用配置最好是存到全局(浏览器)中，这样调用起来就不用引用了，方便;
• ajax模块须要本身实现的缘由是到时候要是本身须要有跨域cors之类的需求，须要自定义多种Ajax请求(用fetch的状况下，将来fetch会愈来愈强大)

回到顶部(go to top)

技术栈相关

虽然用到的技术栈众多，可是本身也谈不上熟练运用，多半是边查API边用的，因此只罗列些本身用相关的技术栈解决的点;

webpack

虽然很想用webpack2搭建项目的，可是图省力仍是用create-react-app生成了大多数配置文件(它是webpack1)，不过不久后其应该会有相应的升级。下面我对其中一些配置的改动做些说明：

①按需加载：

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），在config/webpack.config.dev.js 文件中做以下修改:

{
  test: /\.(js|jsx)$/,
  include: paths.appSrc,
  loader: 'babel',
  query: {
     plugins: [
       ['import', [{ libraryName: "antd", style: 'css' }]],
     ],
    cacheDirectory: true
  }
},

②引人less:

首先引人 less-loader 来加载 less 样式，同时修改 config/webpack.config.dev.js 文件

  引人les 

这里利用了 less-loader 的 modifyVars 来进行主题配置， 变量和其余配置方式能够参考 配置主题 文档。

③一键发布到gh-pages：

用到了gh-pages,使用 npm run deploy 一键发布到本身的gh-pages上，姑且把gh-pages当成生产环境吧，因此在修改config/webpack.config.dev.js 文件的同时也要对config/webpack.config.prod.js做出如出一辙的修改。

ps:尽管我是这样发布到gh-pages的，该项目的gh-pages展现地址为这里，在gh-pages上展现图明显比本地大了好些像素，若是有朋友知道是为何，不吝赐教啊。

④引用路径的缩写：

  resolve: {
    fallback: paths.nodePaths,
    alias: {
      'react-native': 'react-native-web',
      components: path.resolve(__dirname, '..') + '/src/common/components',
      container: path.resolve(__dirname, '..') + '/src/common/container',
      images: path.resolve(__dirname, '..') + '/src/common/images',
      pages: path.resolve(__dirname, '..') + '/src/common/pages',
      utils: path.resolve(__dirname, '..') + '/src/common/utils',
      data: path.resolve(__dirname, '..') + '/src/server/data',
    }
  },

配置了引用路径的缩写后，就能够在任意地方如这样引用，好比

antd(2.10)

antd是（蚂蚁金服体验技术部）通过大量的项目实践和总结，沉淀出的一个中台设计语言 Ant Design，使用者包括蚂蚁金服、阿里巴巴、口碑、美团、滴滴等一系列知名公司，并且我从他们的设计理念也学到了不少关于UI、UX的知识。

该项目采用的是antd最新的版本2.10.0,因为2.x的版本和1.x的版本仍是相差蛮大的，以前参考的项目(基于1.x)改起来太费劲，因此在组件那块就干脆本身从新封装了一遍。这部分知识点我建议仍是看文档，文档解决不了扒扒源码。

react-router(4.x)

react-router 4.x和2.x的差别又是特别的大，召唤文档,网上基本上都仍是2.x的教程，看过文档以后，反正简而言之其就是要让使用者更容易上手。印象最深的是之前嵌套路由写法在4.x中写到同层了。以下示例他们的效果是相同的。

2.x：

<Route path="/" component={App}>
    <Route path="/aaaa" component={AAAA} />
    <Route path="/bbbb" component={BBBB} />
</Route>

 4.x:

<Route path="/" component={App} />
<Route path="/aaaa" component={AAAA} />
<Route path="/bbbb" component={BBBB} />

还有更多的特性和API的出现，期待有更好的分析文章的出现，有机会我也会来总结下react-router(4.x)和(2.x)的差别。

fetch

先推荐这篇文章《传统Ajax已死，Fetch永生》，再推荐API;

fetch是个好东西，好在简单，除了promise最基本的用法，还能这样写

  Promise

try {
  let response = await fetch(url);
  let data = await response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

可是其简洁的特色是为了让咱们能够自定义其扩展，仍是其自己就还不完善呢？我在调用JSONP的请求时，发现用fetch掉不一样，后来在文档上才发现其不支持JSONP的调用，所幸社区仍是很给力的找到了fetch-jsonp这个模块，实现了对百度音乐接口的JSONP调用。fetch-jsonp使用也和fetch相似，代码以下

fetchJsonp(url,{method: 'GET'})
　　.then((res) =>res.json())
　　.then((data) => {})

回到顶部(go to top)

项目的一些待扩展计划

封装组件

无论组件封装得好很差，我的感受其是提升水平很高效的方法，多练，继续封装出各式各样的功能组件。

redux

使用了redux也已经有段时日了，我对redux的定义就是更好的管理组件的状态，没有redux的时候就像如今这个应用同样，逻辑少状态变化也还不太复杂，可是一旦逻辑复杂起来，各类组件状态、界面耦合起来，就容易出岔子，那redux就是为了解决这个而生的，让咱们能够更多地关注UI层，而下降对状态的关注。以前也写了些redux的文章，纸上得来终觉浅，绝知此事要躬行。因此在项目还未太复杂前，把redux引入是下一步任务。

typescript

公司大概会在6月份开始，新的项目就要采用ts开发了，因此我也到时会在该项目中引人ts的语法，我如今的感受是使用ts后，先后端对接会更加轻松，不会有一些类型不匹配的低级错误，并且antd貌似和ts也能兼容得蛮好。

测试框架 

这部分其实我仍是没什么经验的，先写上吧，有机会会拿这个项目开刀，并写心得。

http://www.cnblogs.com/MuYunyun/p/6843584.html