React项目模板-从项目搭建到部署
前一段时间做了一个小项目,时间比较紧,就一个人月。最终希望能够通过微信公众号链接启动应用。
项目的业务细节就不多说了,主要是想分享一下做这个项目技术方面的一些经验。
技术选型
参考范围大致三种:AngularJS,Angular,React。
这里可能会有些困惑,AngularJS和Angular不是一个东西吗?
没错,它们是一个东西,但也不是一个东西。好了,废话少说,首先说明一下AngularJS和Angular的区别。
引用官方文档中的一句话
Angular is the name for the Angular of today and tomorrow. AngularJS is the name for all v1.x versions of Angular.
这回很清晰了。
Angular:指的是 v2.x 及以后的版本
AngularJS:特指 v1.x
由于Angular从2.0以后版本更新比较大,所以为了做区分,只能想出这么一招了。
好了,回归正题,这三种技术怎么选择?
以下是我当时的考虑:
AngularJS:由于之前两个项目一直在用AngularJS,所以使用起来并不陌生,相对buffer也会少很多(前面说了,时间比较紧,只有一个月)。碰到问题还可以和大家商量一下。
但是AngularJS性能及体积是个问题,尤其是要在手机端运行。
Angular: 性能不是问题,体积也还好。但是接触比较少,之前只做过一个Web端的项目。
React: 前一段时间刚刚研究过,性能,体积都不是问题。但是同Angular一样,没有实际项目经验啊,出了问题就只能百度了。
经过以上的一番权衡,其实我心里是想用React的。其中一个原因是经过前一段时间的学习,很想通过一个项目积累一些React的开发经验,
另外一个原因是React无论从性能上(得益于Virtual DOM)还是思想上(组件化)都更为先进。
基于以上两点原因,所以在和项目经理确定技术选型的时候,我极力推荐React,虽然可能会存在一些buffer,但是从可持续化发展的角度考虑(自己瞎猜的...),最终项目经理同意了。
项目框架搭建
在GitHub上看了很多的boilerplate工程,或多或少都和自己的需求有些出入。
所以,最终自己通过React官方的create-react-app cli搭建了一个seed工程。
1. 准备环境
2. 安装creat-react-app cli
npm install -g create-react-app
3. 创建工程
create-react-app react-seed
然后进入项目根目录react-seed安装相关依赖
cd react-seed
npm install
4. 暴露配置项
由于采用create-react-app创建的项目webpack等配置信息都是封装好的,所以为了灵活修改相关配置,可以通过以下命令让封装好的配置文件暴露出来。
npm run eject
创建好的项目目录如下:
5. 本地服务启动
// 启动本地server用于开发
npm run start
将会在本地 3000 端口启动
redux集成
熟悉React的可能都知道,React是单向数据流,所以有些情况下单单依赖React自身无法实现组件之间的通信,这时就需要Redux登场了。
本文不介绍Redux的语法及思想,只说明如何集成。
首先需要安装Redux相关依赖,由于不同版本之间可能存在兼容性问题,所以安装的时候最好制定版本:
npm install redux@3.7.2 --save
npm install redux-thunk@2.1.0 --save
npm install react-redux@5.0.6 --save
然后就可以在项目中引入redux了,可以像如下方式组织目录结构:
路由集成
npm install react-router@3.0.5 --save
路由支持嵌套,代码如下:
const routes = (
<Router history={hashHistory}>
<Route path="/home" component={Layout} onEnter={onEnter}>
<IndexRoute getComponent={home} onEnter={onEnter}/>
<Route path="/home" getComponent={home} onEnter={onEnter}/>
<Route path="/detect" getComponent={detect} onEnter={onEnter}/>
<Route path="/about" getComponent={about} onEnter={onEnter}/>
</Route>
<Route path="/unauthorized" getComponent={unauthorized}/>
<Redirect from="*" to="/home" />
</Router>
);
export default routes;
国际化方案
采用的是常用的react-intl
npm install react-intl@2.4.0 --save
UI组件集成
基于React的UI组件在这里推荐两个,一个是蚂蚁金服的Ant Design;另外一个是Material-UI。
两个都很不错,本人使用的是Ant Design。
npm install antd@2.13.10 --save
fetch集成
关于请求数据有很多种方式,本人用的是fetch。
npm install fetch@1.1.0 --save
可以简单封装一下,如下:
import 'whatwg-fetch'
import loggerService from './logger'
let notAuthorizedCounter = 0;
let fetchService = {
fetch: (url, method, header, body) => {
if (!header) {
header = {}
}
return fetchService[method.toLowerCase()](url, header, body).catch(function(exception) {
loggerService.log('fetchService failed:', exception);
// token过期,重新获取token并发起请求
if (exception.code === '401' || exception.code === '403') {
notAuthorizedCounter++;
// 最多重试3次
if (notAuthorizedCounter > 2) {
notAuthorizedCounter = 0;
loggerService.warn("401 or 403 received. Max attemps reached.");
return;
} else {
return fetchService.fetch(url, method, header, body);
}
}
});
},
get: (url, header) => {
return fetch(url, {
method: 'GET',
headers: header
}).then((response) => {
return response.json();
});
},
post: (url, header, body) => {
header['Content-Type'] = 'application/json';
return fetch(url, {
method: 'POST',
headers: header,
body: JSON.stringify(body)
}).then((response) => {
return response.json();
});
}
};
export default fetchService;
项目部署
首先对项目进行打包。
npm run build
可以通过以下命令在本地环境运行打包后的项目。
serve -s build
如果项目中引入路由的时候使用的是BrowserRouter,
那么当执行npm run build打包之后,本地打开index.html文件,会出现空白页面。
原因是BrowserRouter是用浏览器history对象的方法去请求服务器,
如果服务器没有配置相对应的路由去指向对应的页面,路由会找不到资源。
BrowserRouter会变成类似这样的路径http://111.230.139.105:3001/detail/9459469, 这样的路径在访问服务器时,服务器会认为是请求查找某个接口数据。
所以这时候必须使用HashRouter,这时候访问具体页面时就是http://111.230.139.105:3001/#/detail/9459469
项目源码已经开源到github上,喜欢的给个Star支持下吧!(_)
React项目模板-从项目搭建到部署的更多相关文章
- Maven用项目模板生成项目
Archetype插件是Maven生成项目的项目模板,项目模板就是一个框,把文件夹这些定好,然后就可以在上开写具体逻辑等等. 最常用的命令: mvn archetype:generate 这个是生成一 ...
- Cookiecutter: 更好的项目模板工具:(1)简介及可用资源汇总
原文档地址:https://cookiecutter.readthedocs.io/en/latest/ 本系列只介绍cookiecutter的基础使用,而且会删除与功能使用无关的部分.深度使用及了解 ...
- vs多项目模板及add-in开发
本文分2部分 第一为自定义多项目模板 第二为vs add-in开发 效果图 1.自定义模板 2. 工具菜单 3.窗口 4.工程 5.文件 ... 一. 多项目模板 单项目模板做起来很简单 选中一个项目 ...
- Win10系列:JavaScript 项目模板和项模板
使用Visual Studio 开发Windows应用商店应用时,通过其提供的模板可以帮助我们快速地创建一个应用.其中,在新建一个Windows应用商店应用程序项目时可以在项目模板中选择所需要的模板类 ...
- React项目搭建与部署
React项目搭建与部署 一,介绍与需求 1.1,介绍 1.1.1,React简介 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React ...
- Vue项目搭建与部署
Vue项目搭建与部署 一,介绍与需求 1.1,介绍 Vue 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue两大核心思想:组件化和数据驱动.组 ...
- jenkins+git+maven搭建自动化部署项目环境
简介 折腾了两个晚上,趁着今晚比较有空,把jenkins+git+maven搭建自动化部署项目环境搭建的过程记录一下,这里我把github作为git的远程仓库(https://github.co ...
- Vue.js项目模板搭建
前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我 ...
- SpringMVC框架下Web项目的搭建与部署
这篇文章已被废弃. 现在,Deolin使用Maven构建项目,而不是下载Jar文件,使用Jetty插件调试项目,而不是外部启动Tomcat. SpringMVC比起Servlet/JSP方便了太多 W ...
随机推荐
- C#采用rabbitMQ搭建分布式日志系统
网上对于java有很多开源的组件可以搭建分布式日志系统,我参考一些组件自己开发一套简单的分布式日志系 全部使用采用.NET进行开发,所用技术:MVC.EF.RabbitMq.MySql.Autofac ...
- python的枚举
通过Enum()方式 这种方式value属性则是自动赋给成员的int常量,默认从1开始计数 from enum import Enum Month = Enum('Month', ('Jan', 'F ...
- Android ListView 设置单选
为 ListView 设置选中状态,需要经过如下几个步骤: 设置 ListView 的 android:choiceMode="singleChoice" 设置 ListView ...
- speex库音频降噪(含代码)
speex库中音频降噪效果不错,应该是应用最广泛的吧,speex库下载地址https://www.speex.org/downloads/,可以直接下载二进制代码使用,像配置OpenCV一样配置spe ...
- YAML书写规范
1. 认识 YAML YAML是一个类似 XML.JSON 的标记性语言.YAML 强调以数据为中心,并不是以标识语言为重点.因而 YAML 本身的定义比较简单,号称"一种人性化的数据格式语 ...
- python基础6之迭代器&生成器、json&pickle数据序列化
内容概要: 一.生成器 二.迭代器 三.json&pickle数据序列化 一.生成器generator 在学习生成器之前我们先了解下列表生成式,现在生产一个这样的列表[0,2,4,6,8,10 ...
- 强大的Cmder
why 漂亮,包装并美化了各个shell 带task功能,能记忆,能执行脚本 配合win10的bash,能实现类似xshell的功能 注意点 需要注意的一点,Cmder来源于另外一个项目ConEmu, ...
- Docker镜像导致centos-root根分区容量爆满
当虚拟机服务器运行Docker久了后,发现Docker的文件越来越大,某天发现此台机上的数据库访问不了了,再重启数据库等日志,提示空间不足,查看磁盘空间: root分区满载啊,前段时间还有不少空间的, ...
- FORTH运算符
body, table{font-family: 微软雅黑} table{border-collapse: collapse; border: solid gray; border-width: 2p ...
- 基于 HTML5 的 3D 工控隧道案例
隧道的项目我目前是第一次接触,感觉做起来的效果还蛮赞的,所以给大家分享一下.这个隧道项目的主要内容包括:照明.风机.车道指示灯.交通信号灯.情报板.消防.火灾报警.车行横洞.风向仪.COVI.微波车检 ...