React项目实践系列一

DC_er 发布于2019-08-26 12:01 / 879人阅读

摘要：在此我们选用用友的公共静态资源库。因此打算建立远程的其实还有个关键是我使用用友配的电脑开发，在本地部署的话电脑配置。。。不过此步骤我们也可以省略了，用友的大前端技术团队提供了平台。

数据分析平台-实践系列一

项目创建于2018年1月底，到现在已经接近半年，在此写下半年来项目的实践过程以及自己对前端的学习与体悟。

技术选型

框架： React

路由： React-Router 4

状态管理： Redux

UI组件库： Ant Design

搭建工程

因为平台的前端技术选型，因此挑选了React为技术框架。并使用create-react-app快速搭建工程。create-react-app为fackbook官方出品的快速搭建React工程的命令行工具，可以减少写各种配置的过程，似于vue的vue-cli和angular的angular-cli。

而在使用create-react-app，需要使用eject暴露所有配置项，好自定义个人的Webpack配置。

首先我们并不打算将React让Webpack打包，而使用第三方的CDN，直接在HTML文件以script标签引入。在此我们选用用友的tinper公共静态资源库。

改动Webpack配置文件

externals: {
  "react": "React",
  "react-dom": "ReactDOM",
  "react-router-dom": "ReactRouterDOM",
  "redux": "Redux",
  "react-redux": "ReactRedux"
}

而若引入第三方CDN，需要分引入为生产环境还是开发环境的代码。
如在生产环境下要引入//design.yonyoucloud.com/static/react/16.0.0/umd/react.production.min.js
而在开发环境引入//design.yonyoucloud.com/static/react/16.2.0/umd/react.development.js。

选用ejs-compiled-loader，这样另我们可以在HTML文件使用ejs模板引擎。

继续改动Webpack配置文件

new HtmlWebpackPlugin({
  inject: true,
  template: `!!ejs-compiled-loader!${paths.appHtml}`,
}),

在HTML使用模板引擎

  <% if (process.env.NODE_ENV === "production") { %>
    
    
  <% } %>
  <% if (process.env.NODE_ENV === "development") { %>
    
    
  <% } %>

最后，设置Webpack的别名，让后续引用的地方减少路径的复杂度。

alias: {
  "root": path.resolve(__dirname, "../src"),
  "@": path.resolve(__dirname, "..")
},

如在src文件夹下有两个文件夹a和b，倘若b下的m.js需要引用a下的n.js，需要import X from ‘../a/n.js’，设置别名后可写为root/a/n.js。

前后端分离

在知乎上面找了张图片，前后端分离，简单的说，就是前端负责页面交互，显示后台提供的数据，而后端负责数据的处理，提供给前台数据。

可以看出前后端是有很强的耦合关系，后端需要依赖前端请求，前端需要依赖后端响应。不过此处后端是可以轻松模拟前端请求，如POSTMAN等。剩下的解决要点为如何给前端模拟数据。因此，我们在设计接口约定数据后构建另一个简单的Server，这个Server会简单的响应前端请求，根据约定返回模拟的数据。我们将这个Server成为Mock Server。

其中Mock Server可分成本地及远程。

本地的Mock Server需要每个前端在自己电脑上部署服务器，且若后台改动API，后台无法同步维护Mock Server与Real Server。

因此打算建立远程的Mock Server(其实还有个关键是我使用用友配的电脑开发，在本地部署的话电脑配置。。。)不过此步骤我们也可以省略了，用友的大前端技术团队提供了Mock平台。

他的功能十分齐全，具备权限管理，Mock Server，数据导入等等的功能。

服务器托管 idc机房托管怎么部署react项目 php项目实践 python实践项目 python项目实践

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108022.html

前端每周清单年度总结与盘点

摘要：前端每周清单年度总结与盘点在过去的八个月中，我几乎只做了两件事，工作与整理前端每周清单。本文末尾我会附上清单线索来源与目前共期清单的地址，感谢每一位阅读鼓励过的朋友，希望你们能够继续支持未来的每周清单。 showImg(https://segmentfault.com/img/remote/1460000010890043); 前端每周清单年度总结与盘点在过去的八个月中，我几乎只做了...

jackwang 2019-08-22 15:54 评论0 收藏0
前端每周清单半年盘点之 React 与 ReactNative 篇

摘要：前端每周清单半年盘点之与篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。与求同存异近日，宣布将的构建工具由迁移到，引发了很多开发者的讨论。前端每周清单半年盘点之 React 与 ReactNative 篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为...

Barry_Ng 2019-08-22 10:54 评论0 收藏0
前端每周清单第 10 期：Firefox53、React VR发布、Microsoft Edge现代

摘要：新闻热点国内国外，前端最新动态发布近日，正式发布新版本中提供了一系列的特性与问题修复。而近日正式发布，其能够帮助开发者快速构建应用。前端每周清单第 10 期：Firefox53、React VR发布、JS测试技术概述、Microsoft Edge现代DOM树构建及性能之道为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔者的 Web 前端入门...

MingjunYang 2019-08-20 16:04 评论0 收藏0
React项目实践系列二

摘要：数据分析平台实践系列二这期主要讲接口的请求配置设置代理上一篇文章说明了使用远程，那下一步就是让前端请求环境了。建立一个测试接口在项目中便可直接便可。在项目中，我们选用了。在使用前，需要对所有的请求与响应进行统一拦截，以便后期管理。数据分析平台-实践系列二这期主要讲接口的请求配置设置代理上一篇文章说明了使用远程Mock Server，那下一步就是让前端请求Mock环境了。建立一...

wind3110991 2019-08-26 12:02 评论0 收藏0
前端每周清单第 51 期: React Context API 与模式变迁, Webpack 与 W

摘要：前端每周清单第期与模式变迁与优化界面生成作者王下邀月熊编辑徐川前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。 showImg(https://segmentfault.com/img/remote/1460000013279448); 前端每周清单第 51 期: React Context A...

Jiavan 2019-08-26 11:44 评论0 收藏0