react脚手架搭建及配置
npm install -g create-react-app
装完之后,生成一个新的项目,可以使用下面的命令:
create-react-app my-app
cd my-app/
yarn start
线上编译命令
npm run build
在开发react应用时,难免与服务器进行数据交互,就是要跟api打交道。
这个时候,有一个问题。
api存在的服务器可能是跟react应用完全分开的,而且,开发环境跟线上环境又不太一样。
比如,开发环境中,你的react应用是跑在3000端口的,可是api服务可能跑在3001端口,这个时候,你跟api服务器交互的时候,可能会使用fetch
或各种请求库,比如jquery的ajax。
这个时候可能会遇到CORS问题,毕竟端口不同,而线上环境却没有这个问题,因为你都控制线上环境的react应用和api应用,跑在同一个端口上。
按照以往思路,解决的方法可能是用环境变量,比如:
const apiBaseUrl = process.env.NODE_ENV === 'development' ? 'localhost:3001' : '/'
但是这样搞起来,还是有些复杂,然而,create-react-app
提供了一个超级简单的方法,只需要在package.json
文件中,加一个配置项就可以了。
比如:
"proxy": "http://localhost:3001/",
至于你用的是http的何种请求库,都是一样的,不用改任何代码。这个选项,只对开发环境有效,线上环境还是保持react应用和api应用同一个端口。
二、使用less
安装less、less-loader依赖包
a. yarn安装
yarn add less less-loader
b. npm安装
npm install --save less less-loader
在react-scripts/config文件夹找到webpack.config.dev.js和webpack.config.prod.js两个文件
{
test: /\.(css|less)$/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: require.resolve('style-loader'),
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
{
loader: require.resolve('less-loader'),
},
],
},
extractTextPluginOptions
)
)
安装 antd
npm install antd-init -g
antd-init
升级版本
基于dva的脚手架
首先是安装脚手架
npm install dva-cli -g
dva new dvatest
npm start
react脚手架搭建及配置的更多相关文章
- react脚手架搭建1
23:01:17 react脚手架搭建 (个人用的是webstorm,所以分享下webstorm中的创建react脚手架项目的方法) 1.创建新项目(前提是下载nodejs环境) 2.下载好在webs ...
- react脚手架搭建命令 react常用库
react项目一般需要的组件库 react-redux 状态管理库 react-router-dom 路由 sass /less style-compon ...
- react脚手架搭建
1.npm install -g create-react-app 2.create-react-app react-demo 3.cd react-demo 4.npm start
- 【webpack系列】从零搭建 webpack4+react 脚手架(四)
经过三个章节的学习,你已经学会搭建了一个基于webpack4的react脚手架.如果要更改配置,比如,你希望把编译后的js文件和css文件等单独放dist下的static目录下,你想想,是不是有点麻烦 ...
- 【webpack系列】从零搭建 webpack4+react 脚手架(一)
搭建一个React工程的方式有很多,官方也有自己的脚手架,如果你和我一样,喜欢刨根究底,从零开始自己一行一行代码创建一个React脚手架项目,那你就来对地方了.本教程是针对React新手,以及对web ...
- React 如何搭建脚手架
React 如何搭建脚手架 npm install -g create-react-app //安装 create-react-app react-demo // react-demo ...
- 小tips:使用vue-cli脚手架搭建项目,关于eslint语法检测配置
配置文件在项目根目录里,文件名以 .eslintrc.* 为名. 为了兼容以前写的代码,避免修改太多代码,把不符合自己习惯的规则去掉,简单配置代码: module.exports = { root: ...
- React脚手架配置代理
react脚手架配置代理 方法一 在package.json中追加如下配置 "proxy":"http://localhost:5000" 说明: 优点:配置简 ...
- 【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目
一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入An ...
随机推荐
- jvm.option是什么,它是如何加载的
jvm.option是一些程序里边的java的配置参数的一个集合,不同的应用都会定义自己的jvm.options用来控制一些jvm的参数 以下,以elasticsearch为例,来说明它是如何加载的 ...
- C++ string中find() 用法
string中 find()的用法 rfind (反向查找) (1)size_t find (const string& str, size_t pos = 0) const; //查找对 ...
- 【python】——sql模拟
一.作业需求: 当然此表你在文件存储时可以这样表示 1,Alex Li,22,13651054608,IT,2013-04-01 现需要对这个员工信息文件,实现增删改查操作 可进行模糊查询,语法至少支 ...
- JAVA SE ------------------- 项目的菜单输入
//写一个工具类,进行输入选项数值的获取public class InputUtil { static Scanner sc=new Scanner(System.in); public static ...
- matlab知识
matlab中cumsum函数通常用于计算一个数组各行的累加值. 调用格式及说明 matlab中cumsum函数通常用于计算一个数组各行的累加值.在matlab的命令窗口中输入doc cumsum或者 ...
- 选择结构的三角关系Switch、Case、Default!!!
选择结构的三角关系Switch.Case.Default!!! 今天我们学习选择结构进化章节——Switch结构,他与if有什么区别呢? 相同点: 都是用来处理多分支条件的结构 不同点: switch ...
- java中基本类型double和对象类型Double
Double.valueOf(str)把String转化成Double类型的对象比如Stirng str="1.0";那么Double.valueOf(str)等价于new Dou ...
- springboot+mybatis+druid数据库连接池
参考博客https://blog.csdn.net/liuxiao723846/article/details/80456025 1.先在pom.xml中引入druid依赖包 <!-- 连接池 ...
- 20175320 2018-2019-2 《Java程序设计》第4周学习总结
20175320 2018-2019-2 <Java程序设计>第4周学习总结 教材学习内容总结 本周学习了教材的第五章的内容.在这章中介绍了子类与继承,着重讲了子类继承的规则以及使用sup ...
- xilink 烧写flash
no 右键