ca7pe / react-dva-dora

[TOC]

react-dva-dora

基于dva、dora、antDesign、webpack搭建前后端分离的react组件化项目

实现目标

1. 组件化开发

• 模块化组织
• 单组件调试

2. 前后端分离

• 前端路由
• 代码分离
• 站点分离

3. 工程自动化

• 文件版本号
• 实时监听
• 多环境区分

最终输出

1. 脚手架
2. 文档
3. 工具

技术选型

1. FrontEnd

• 增强：dva(react) + dora(webpack) + ES6(ES5)
• 优化：CSS Module + Mock.js
• 美化：antDesign
• 辅助：redux Devtool + react DevTool + Living Style Guide

dva组成：

• views: react
• models: redux, react-redux, redux-saga
• router: react-router
• http: whatwg-fetch

2. BackEnd

• 后端架构：JAVA
• HTML直出：nodejs中间层 + express
• 跨域请求转发：nginx

3. API规范和文档

• swagger

业界参考

1. 魔方组件库 - 滴滴出行
2. AntDesign - 蚂蚁金服

技能提升

1. 提高动手能力，主要是编码和架构能力，坚持盲打编码
2. 思维模式提升
3. 前端团队技术管理
4. 养成获取一手知识的习惯（Github、StackOverflow）
5. 尝试新工具，并充分利用和熟练使用已有工具（Atom Markdown、Sublime插件）
6. 快速定位bug和调试
7. 了解框架原理和实现
8. Hack Everything
9. 提高理论分析能力
10. 博采众长，开阔眼界，能够预见。

疑问

1. 蒙代尔三角悖论?

• 高可维护
• 高开发效率
• 易上手

2. 如何实现Gridview表格操作，让无web前端开发经验同学也能够快速构建web管理后台。？
   
3. 使用了React后是否改善？是否要做一个React版本和传统版本的后台？
   

• 使用React后，社区支持不够完善，jquery社区完善多年，有丰富插件提供支持。

4. 是否是最优的选型？

• 先实践，执行过程中完善战略。[√]

TodoList

重要 Important - 紧急 Urgent

I.U

1. 完成普通dataGrid
2. [√] 动态路由、路由去掉hash
3. [√] ajax请求转发问题：主域名一致、cookie、登录态
4. [√] 如何在启动时发请求
5. [√] 菜单和面包屑联动

I.nU

1. 自有命令行生成新页面套装（路由、菜单、dataGrid）
2. webpack普通配置
3. webpack文件引用加版本号
4. 调试服务器文件发布在哪里？
5. build之后的dist目录如何在生产环境配置？
6. 测试用例

nI.U

1. 无

nI.nU

1. 无

待研究

1. chrome://net-internals
2. MVC，MVP 和 MVVM 的图示 - 阮一峰的网络日志
3. React Router 使用教程 - 阮一峰的网络日志 http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu
4. Popping Out of Hidden Overflow | CSS-Tricks https://css-tricks.com/popping-hidden-overflow/
5. webpack入门和实战(二)：全面理解和运用loader和plugins - 流浪的诗人 - 博客园 http://www.cnblogs.com/wdlhao/p/5807157.html
6. supervisor和forever npm插件
7. https://c9.io/ | https://coding.net/ | 新浪SAE

问题记录

1. 只能有一个根节点
2. <!-- react-empty: 1 --> -> 去除queryKey时导致
3. Unknown option: direct.presets -> bable.core版本过低
4. :global -> less
5. two children with the same key -> 双引号
6. fetch默认不带cookie、ip+端口号转发 -> {credentials: 'include'}
7. iterator key不能重复
8. file-loader引起的html-webpack-plugin坑 - wonyun - 博客园 http://www.cnblogs.com/wonyun/p/5950722.html https://github.com/webpack/html-loader

相关链接

• Windows下使用Beyond Compare作为git的比对与合并工具 - Tek_Eternal - 开源**社区

• 如何将本地的项目加入git管理？ - SegmentFault

• Unknown option: direct.presets · Issue #13 · storybooks/react-storybook

• javascript - React.js confuse with 'two children with the same key' - Stack Overflow

社区提问

1. Stack Overflow
2. Segment Fault（中文）
3. Gitter

小知识

1.git命令行

# 关联本地已有项目到远端
git init
git add .
git commit -m ""
git add remote origin ""
git push -u origin master

# 重新设置origin链接
git remote set-url origin ''

# 拉取仓库
git pull origin master

git reflog
git reset --hard xx

2.npm命令行

# 显示npm包版本
npm ls <packageName>

# 设置全局目录
npm config

# npm install 显示安装进度 
npm config set loglevel=http

3.sublime插件列表

1. Ctags
2. Sublime Terminal
3. Sublime-Better-Completion
4. Doc​Blockr
5. StatusBar File Size
6. OmniMarkupPreviewer
7. HTML-CSS-JS Prettify

如何优雅地使用Sublime Text3 - 简书

4.nginx配置

server {
  ...
  location / {
    try_files $uri /index.html;
  }
}

路由的express、nginx配置 - react-router

5.正则表达式

http://deerchao.net/tutorials/regex/regex-1.htm

(?<name>.*)(?<url>http.*)
[$1]($2)

思考

1. 你想到的别人说不定早就想到了，而且已经实现了，问题是你找不找得到！
2. 真正学会 React 是一个漫长的过程。你会发现，它不是一个库，也不是一个框架，而是一个庞大的体系。想要发挥它的威力，整个技术栈都要配合它改造。你要学习一整套解决方案，从后端到前端，都是全新的做法。举例来说，React 不使用 HTML，而使用 JSX 。它打算抛弃 DOM，要求开发者不要使用任何 DOM 方法。它甚至还抛弃了 SQL ，自己发明了一套查询语言 GraphQL 。当然，这些你都可以不用，React 照样运行，但是就发挥不出它的最大威力。 这样说吧，你只要用了 React，就会发现合理的选择就是，采用它的整个技术栈。