https://www.cnblogs.com/jackson-zhangjiang/p/10095892.html

React项目搭建与部署

 

React项目搭建与部署

一,介绍与需求

1.1,介绍

1.1.1,React简介

    • React 是一个用于构建用户界面的 JAVASCRIPT 库。
    • React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
    • React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。
    • React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

1.1.2,React特点

    1. 声明式设计:React采用声明范式,可以轻松描述应用。
    2. 高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。
    3. 灵活:React可以与已知的库或框架很好地配合。
    4. JSX:JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
    5. 组件:通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
    6. 单向响应的数据流:React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

1.2,需求

二,环境搭建与项目框架

2.1,环境搭建

1,安装NODE,

2,安装webpack

1  npm install -g webpack 

3,配置淘宝镜像

使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm

1 npm install -g cnpm --registry=https://registry.npm.taobao.org
2 npm config set registry https://registry.npm.taobao.org

4,安装create-react-app

1 cnpm install -g create-react-app

5,创建项目

1 create-react-app my-project//创建项目
2 cd my-project/

6,本地服务启动

1 npm run start//启动本地server用于开发

2.2,项目框架

|-node_modules             //项目包
|-public             //一般用于存放静态文件,打包时会被直接复制到输出目录(./buidle)
|-src               //项目源代码
  |  |-asserts         //用于存放静态资源,打包时会经过 webpack 处理
  |  |-components     //组件 存放 React 组件,一般是该项目公用的无状态组件
  |  |-containers          //页面视图
  |  |-routes         //路由 存放需要 connect model 的路由组件
  |  |-App.js         //入口文件
  |  |-index         //注册路由与服务
  |  |- serviceWorker        //开发配置
|-package.json      //包管理代码
|-.gitignore //Git忽略文件

三,常用集成与配置

3.1,路由集成与配置使用

React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步。react-router

1 npm install react-router@4.3.1 --save

  1. Router下面只能包含一个盒子标签,类似这里的div。
  2. Link代表一个链接,在html界面中会解析成a标签。作为一个链接,必须有一个to属性,代表链接地址。这个链接地址是一个相对路径。
  3. Route,是下面要说的组件,有一个path属性和一个组件属性(可以是component、render等等)。
  4.  1  render(){
    2 return (
    3 <Router>
    4 <div>
    5 <ul>
    6 <li><Link to="/home">首页</Link></li>
    7 <li><Link to="/other">其他页</Link></li>
    8 </ul>
    9 <Route path="/home" component={Home}/>
    10 <Route path="/other" component={Other}/>
    11 </div>
    12 </Router>
    13 )
    14 }

路由支持嵌套,代码如下:

 1 const Root = () => (
2 <div>
3 <Switch>
4 <Route
5 path="/"
6 render={props => (
7 <App>
8 <Switch>
9 <Route path="/" exact component={Home} />
10 <Route path="/home" component={Home} />
11 <Route path="/test" component={Test} />
12 <Route path="/message/:id/:TestId" component={Message} />
13 {/*路由不正确时,默认跳回home页面*/}
14 <Route render={() => <Redirect to="/" />} />
15 </Switch>
16 </App>
17 )}
18 />
19 </Switch>
20 </div>
21 );
22
23 export default Root;

3.2,redux集成与配置使用

React是单向数据流,所以有些情况下单单依赖React自身无法实现组件之间的通信,故此需要redux

需要安装Redux相关依赖,由于不同版本之间可能存在兼容性问题,所以安装的时候最好制定版本:

1 npm install redux@3.7.2 --save
2 npm install redux-thunk@2.1.0 --save
3 npm install react-redux@5.0.6 --save

然后就可以在项目中引入redux了,可以像如下方式组织目录结构:

3.3,fetch集成与配置使用

关于请求数据有很多种方式,这里采用的是fetch

1 npm install fetch --save

可以简单封装一下,如下:

 1 import 'whatwg-fetch'
2 import loggerService from './logger'
3
4 let notAuthorizedCounter = 0;
5 let fetchService = {
6 fetch: (url, method, header, body) => {
7 if (!header) {
8 header = {}
9 }
10
11 return fetchService[method.toLowerCase()](url, header, body).catch(function(exception) {
12 loggerService.log('fetchService failed:', exception);
13
14 // token过期,重新获取token并发起请求
15 if (exception.code === '401' || exception.code === '403') {
16 notAuthorizedCounter++;
17 // 最多重试3次
18 if (notAuthorizedCounter > 2) {
19 notAuthorizedCounter = 0;
20 loggerService.warn("401 or 403 received. Max attemps reached.");
21 return;
22 } else {
23 return fetchService.fetch(url, method, header, body);
24 }
25 }
26 });
27 },
28 get: (url, header) => {
29 return fetch(url, {
30 method: 'GET',
31 headers: header
32 }).then((response) => {
33 return response.json();
34 });
35 },
36 post: (url, header, body) => {
37 header['Content-Type'] = 'application/json';
38 return fetch(url, {
39 method: 'POST',
40 headers: header,
41 body: JSON.stringify(body)
42 }).then((response) => {
43 return response.json();
44 });
45 }
46 };
47 export default fetchService;

3.4,UI组件集成与配置使用

基于React的UI组件在这里推荐两个,一个是蚂蚁金服的Ant Design;另外一个是Material-UI

两个都很不错,这里使用的是Ant Design。

1 npm install antd --save

请注意 react >= 16.6.3和react-dom >= 16.6.3 是对等依赖

1 npm install @material-ui/core

3.5,国际化方案

采用的是常用的react-intl

1 npm install react-intl --save

四,项目部署与问题

4.1,项目部署

首先对项目进行打包。

1 npm run build

通过以下命令可以在本地环境运行打包后的项目。

1 serve -s build

4.2,问题与注意事项

PropTypes 的使用

JavaScript 是弱类型语言,所以请尽量声明 propTypes 对 props 进行校验,以减少不必要的问题。
 1 import React from 'react';
2 import PropTypes from 'prop-types'
3
4 class PropTypesList extends React.Component {
5 static propTypes = {//校验
6 title: PropTypes.string,
7 };
8 static defaultProps = {//设置默认值
9 title:"PropTypes 的应用实例"//添加默认值
10 };
11 constructor(props) {
12 super(props);
13 this.state = {
14
15 }
16 }
17 render() {
18 const { title} = this.props
19 return (
20 <div>
21 <p>{title}</p>
22 </div>
23 );
24 }
25 }
26
27 export default PropTypesList ;

内置的 prop type 有:

    1. PropTypes.array
    2. PropTypes.bool
    3. PropTypes.func
    4. PropTypes.number
    5. PropTypes.object
    6. PropTypes.string
    7. PropTypes.node,// 字符串,DOM 元素或包含这些类型的数组。
    8. PropTypes.element, // React 元素
    9. PropTypes.instanceOf(Message), // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
    10. PropTypes.oneOf(['News', 'Photos']), // 用 enum 来限制 prop 只接受指定的值。
    11. PropTypes.oneOfType([ PropTypes.string, PropTypes.number, PropTypes.instanceOf(Message) ]), // 指定的多个对象类型中的一个
    12. PropTypes.arrayOf(PropTypes.number),// 指定类型组成的数组
    13. PropTypes.objectOf(PropTypes.number),  // 指定类型的属性构成的对象
    14. PropTypes.shape({ color: PropTypes.string, fontSize:PropTypes.number }), // 特定形状参数的对象
    15. PropTypes.func.isRequired, // 不可空的任意类型
    16. PropTypes.any.isRequired,// 以后任意类型加上 `isRequired` 来使 prop 不可空。
    17. customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error('Validation failed!'); } } },// 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接 // 使用 `console.warn` 或抛异常,因为这样 `oneOfType` 会失效。

react部署的更多相关文章

  1. react部署之页面空白

    react部署之页面空白 问题:create-react-app build打包后,页面出现空白. 可能一: 控制台报错,js等文件找不到(404) 文件路径问题,只需修改package.json文件 ...

  2. [转]react 部署在ngnix上(windows环境)

    本文转自:https://blog.csdn.net/wly_er/article/details/82348593 目录 1.下载nginx. 2.测试nginx 3.配置react项目 4.ngi ...

  3. 部署React+webpack工程的步骤

    # 部署React+webpack工程的步骤ps:以Mac os系统做开发环境.因为npm现在使用灰常的慢,所以我使用淘宝境像cnpm. 1,准备工作: 先确保存已经安装了node.js: 2,文件部 ...

  4. reactjs学习一(环境搭配react+es6+webpack热部署)

    reactjs学习一(环境搭配react+es6+webpack热部署) 本文的源码在这里下载 https://github.com/tianxiangbing/webpack-study   或者使 ...

  5. React项目模板-从项目搭建到部署

    前一段时间做了一个小项目,时间比较紧,就一个人月.最终希望能够通过微信公众号链接启动应用. 项目的业务细节就不多说了,主要是想分享一下做这个项目技术方面的一些经验. 技术选型 参考范围大致三种:Ang ...

  6. nginx代理部署Vue与React项目

    nginx代理部署Vue与React项目 一,介绍与需求 1.1,介绍 Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务.Nginx是由 ...

  7. React项目搭建与部署

    React项目搭建与部署 一,介绍与需求 1.1,介绍 1.1.1,React简介 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React ...

  8. react使用create-react-app创建的项目部署

    一.在所有的项目代码编写完成后,react项目直接部署是无法正常访问的 1.问题一 网页无法正常的浏览器刷新,刷新会报404错,路由找不到页面 2.问题二 路由跳转后,浏览器后退按钮点击后,页面不刷新 ...

  9. React Native for Android 热部署图片自己定义方案

    情景 热部署时,我们期望升级包中包括js代码与图片资源. bundle的热部署网上已经有两种方案了,一种是用反射,一种是利用RN自带函数.将bundle初始化时直接放到指定文件夹下,之后通过替换bun ...

随机推荐

  1. Lind.DDD.LindMQ~关于持久化到Redis的消息格式

    回到目录 关于持久化到Redis的消息格式,主要是说在Broker上把消息持久化的过程中,需要存储哪些类型的消息,因为我们的消息是分topic的,而每个topic又有若干个queue组成,而我们的to ...

  2. 华为OJ平台——字符串通配符

    题目描述: 在计算机中,通配符一种特殊语法,广泛应用于文件搜索.数据库.正则表达式等领域.现要求各位实现字符串通配符的算法.要求:实现如下2个通配符: *:匹配0个或以上的字符(字符由英文字母和数字0 ...

  3. 关闭 VS的实时调试器

    可以这样关闭: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\AeDebug\Debugger HKEY_LOCAL_ ...

  4. Java Web整合开发(附录1) - 安装配置环境

    1. Install JDK http://blog.csdn.net/sonnet123/article/details/9169741 Download JDK http://www.oracle ...

  5. Thrift compiler代码生成类解析

    代码生成类解析: Thrift--facebook RPC框架,介绍就不说了,百度,google一大把,使用也不介绍,直接上结构和分析吧. Hello.thrift文件内容如下: namespace ...

  6. 【java学习笔记】序列化、反序列化

    序列化 是将对象的完整信息保存起来的过程(持久化).    序列化流:ObjectOutputStream 反序列化 是将对象进行还原的过程(反持久化).               反序列化流:Ob ...

  7. 20172328 2018—2019《Java软件结构与数据结构》第二周学习总结

    20172328 2018-2019<Java软件结构与数据结构>第二周学习总结 概述 Generalization 本周学习了第三章集合概述--栈和第四章链式结构--栈.主要讨论了集合以 ...

  8. windows刷新本机DNS缓存

    ipconfig /flushdns

  9. python Django 无法获取post 参数问题

    对于 request.POST.get(name) 方式取值,需要 from 表单提交数据,如果 是ajax 提交数据,则需要做如下设置: 1.设置请求头,以from表单方式传值 'Content-T ...

  10. LeetCode 942 DI String Match 解题报告

    题目要求 Given a string S that only contains "I" (increase) or "D" (decrease), let N ...