【React】第八部分 react脚手架安装以及react脚手架配置代理

文章目录

【React】第八部分 react脚手架安装以及react脚手架配置代理
8. react脚手架安装以及react脚手架配置代理
- 8.1 react脚手架安装
- - 8.1.1 什么是脚手架
  - 8.1.2 安装步骤
- 8.2 react脚手架配置代理
- - 方法一
  - 方法二
总结

8. react脚手架安装以及react脚手架配置代理

8.1 react脚手架安装

8.1.1 什么是脚手架

xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
包含了所有需要的配置（语法检查、jsx编译、devServer…）
下载好了所有相关的依赖
可以直接运行一个简单效果
react提供了一个用于创建react项目的脚手架库: create-react-app
项目的整体技术架构为: react + webpack + es6 + eslint
使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

8.1.2 安装步骤

第一步：全局安装 npm i -g create-react-app

第二步：在项目目录下使用create-react-app hello-react

第三步：进入项目文件夹cd hello-react

第四步：启动项目npm start

如果运行的时候卡住了，可以去看我专栏里遇到的问题

8.2 react脚手架配置代理

方法一

在package.json中追加如下配置

// 目标服务器
"proxy":"http://localhost:5000"

说明：

优点：配置简单，前端请求资源时可以不加任何前缀。
缺点：不能配置多个代理。
工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）

方法二

第一步：创建代理配置文件

在src下创建配置文件：src/setupProxy.js ，文件名不能修改

编写setupProxy.js配置具体代理规则：

const proxy = require('http-proxy-middleware')module.exports = function(app) {app.use(proxy('/api1', {  // 所有带有/api1前缀的请求都会转发给5000target: 'http://localhost:5000', // 目标服务器changeOrigin: true, //控制服务器接收到的请求头中host字段的值/*changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000changeOrigin默认值为false，但我们一般将changeOrigin值设为true*/pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)}),proxy('/api2', { target: 'http://localhost:5001',changeOrigin: true,pathRewrite: {'^/api2': ''}}))
}

说明：

优点：可以配置多个代理，可以灵活的控制请求是否走代理。
缺点：配置繁琐，前端请求资源时必须加前缀。

总结

以上就是今天要讲的内容，希望对大家有所帮助！！！

【React】第八部分 react脚手架安装以及react脚手架配置代理相关推荐

vue脚手架安装以及vue脚手架创建项目（详细步骤）
系列文章: 文章目录 node.js安装 vue环境安装 vue创建项目命令行方式创建使用UI界面搭建 idea导入vue项目学习Vue不需要学会Node,Vue是前端框架,nodejs是服务端 ...
React脚手架应用（创建脚手架、代理配置、ajax相关、组件通信）（四）
系列文章目录第一章:React基础知识(React基本使用.JSX语法.React模块化与组件化)(一) 第二章:React基础知识(组件实例三大核心属性state.props.refs)(二) 第 ...
React+Redux开发实录（一）搭建工程脚手架
React+Redux开发实录(一)搭建工程脚手架 React+Redux开发实录(二)React技术栈一览搭建工程脚手架准备工作安装node 安装git 安装一款前端IDE 推荐VSCode, ...
react打包后图片丢失_React系列四 - React脚手架
一. 认识脚手架 1.1. 前端工程的复杂化如果我们只是开发几个小的demo程序,那么永远不需要考虑一些复杂的问题: 比如目录结构如何组织划分: 比如如何管理文件之间的相互依赖: 比如如何管理第三方 ...
[react] 你有在项目中使用过Yeoman脚手架吗？
[react] 你有在项目中使用过Yeoman脚手架吗? 前端工程化脚手架部分必备的依赖,用于初始化生成规范的项目目录个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷. ...
React官方中文文档【安装】
https://reactjs.org/docs/getting-started.html //React官方文档地址 1.入门此页面是React文档和相关资源的概述. React是一个用于构建用 ...
react 八千字长文深入了解react合成事件底层原理，原生事件中阻止冒泡是否会阻塞合成事件？
壹 ❀ 引在前面两篇文章中,我们花了较大的篇幅介绍react的setState方法,在介绍setState同步异步时提到,在react合成事件中react对于this.state更新都是异步,但在原 ...
【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...
antd + react model自定义footer_使用ESLint+Prettier规范React+Typescript项目
项目开发过程中,大多数时候我们使用别人搭建好的脚手架编写代码,是项目的参与者.对于一些细节往往被忽略了.其中代码检测本身是一类非常简单的配置,但涉及不同框架和语言组合使用的时候,可能比想象中要困难,本 ...
react引入多个图片_重新引入React：v16之后的每个React更新都已揭开神秘面纱。
react引入多个图片 In this article (and accompanying book), unlike any you may have come across before, I w ...

【React】第八部分 react脚手架安装以及react脚手架配置代理

【React】第八部分 react脚手架安装以及react脚手架配置代理

文章目录

8. react脚手架安装以及react脚手架配置代理

8.1 react脚手架安装

8.1.1 什么是脚手架

8.1.2 安装步骤

8.2 react脚手架配置代理

方法一

方法二

总结

【React】第八部分 react脚手架安装以及react脚手架配置代理相关推荐

最新文章

热门文章