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 ...
随机推荐
- Oracle_索引
Oracle_索引 索引类似字典的和课本目录,是为了加快对数据的搜索速度而设立的.索引有自己专门的存储空间,与表独立存放. 索引的作用:在数据库中用来加速对表的查询,通过使用快速路径访问方法快速定位数 ...
- phpstorm(或webstorm) 打开后 一直停留在scanning files to index....,或跳出内存不够的提示框
记得3月份做项目时就遇到过这个问题,当时解决的 ,但是忘记怎么解决的啦,所以 ,写博文是多么的重要啊. 说明: 在npm install 后,会出现Scanning files to index .. ...
- Java数据持久层框架 MyBatis之API学习八(Java API详解)
对于MyBatis的学习而言,最好去MyBatis的官方文档:http://www.mybatis.org/mybatis-3/zh/index.html 对于语言的学习而言,马上上手去编程,多多练习 ...
- Java之IO流学习总结【上】
一.什么是流? 流就是字节序列的抽象概念,能被连续读取数据的数据源和能被连续写入数据的接收端就是流,流机制是Java及C++中的一个重要机制,通过流我们可以自由地控制文件.内存.IO设备等数据的流向. ...
- python_如何创建可管理的对象属性
案例: 在面向对象编程中,我们把方法作为对象的接口,自己访问对象的属性可能是不安全的,或设计上不灵活,但是使用调用方法在形式上不如访问属性简洁 繁: circle.getRadius() circle ...
- Python初识-day1
1.第一个python程序(在pycharm中运行的,感觉还不错) 注释: 当行注释:#被注释内容 多行注释:''' 被注释内容 ''' 2.变量 (1) 自己理解的定义(仅供参考): 为了存储数据 ...
- 剑指offfer:二维数组中的查找
题目:在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成这样一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 例如: 1 2 ...
- 无废话XML--XML约束(schema)
Schema 的由来 DTD 作为 XML 1.0 规范的重要组成部分, 对于 XML 文档的结构起到很好的描述作用. 但是,它也具有一些缺点,比如,它采用了非 XML 的语法规则.不支持数据类型. ...
- ueditor显示内容末尾有多余标记的解决
问题: 最近用了百度的ueditor文本编辑器,出现一个问题,用ueditor存数据到数据库都正常,但是重新读取后赋值到ueditor却会在末尾多出 "> 这两个符号.赋值方式如下: ...
- Linux安装JDK步骤
Linux安装JDK步骤 1.先从官网下载JDK安装包,我下载的是:jdk-8u131-linux-x64.tar.gz版本 2.在usr下创建java文件夹 # mkdir /usr/java 3. ...