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脚手架搭建及配置的更多相关文章

  1. react脚手架搭建1

    23:01:17 react脚手架搭建 (个人用的是webstorm,所以分享下webstorm中的创建react脚手架项目的方法) 1.创建新项目(前提是下载nodejs环境) 2.下载好在webs ...

  2. react脚手架搭建命令 react常用库

    react项目一般需要的组件库     react-redux     状态管理库     react-router-dom    路由     sass /less     style-compon ...

  3. react脚手架搭建

    1.npm install -g create-react-app 2.create-react-app react-demo 3.cd react-demo 4.npm start

  4. 【webpack系列】从零搭建 webpack4+react 脚手架(四)

    经过三个章节的学习,你已经学会搭建了一个基于webpack4的react脚手架.如果要更改配置,比如,你希望把编译后的js文件和css文件等单独放dist下的static目录下,你想想,是不是有点麻烦 ...

  5. 【webpack系列】从零搭建 webpack4+react 脚手架(一)

    搭建一个React工程的方式有很多,官方也有自己的脚手架,如果你和我一样,喜欢刨根究底,从零开始自己一行一行代码创建一个React脚手架项目,那你就来对地方了.本教程是针对React新手,以及对web ...

  6. React 如何搭建脚手架

    React 如何搭建脚手架   npm install -g create-react-app    //安装 create-react-app react-demo    // react-demo ...

  7. 小tips:使用vue-cli脚手架搭建项目,关于eslint语法检测配置

    配置文件在项目根目录里,文件名以 .eslintrc.* 为名. 为了兼容以前写的代码,避免修改太多代码,把不符合自己习惯的规则去掉,简单配置代码: module.exports = { root: ...

  8. React脚手架配置代理

    react脚手架配置代理 方法一 在package.json中追加如下配置 "proxy":"http://localhost:5000" 说明: 优点:配置简 ...

  9. 【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目

    一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入An ...

随机推荐

  1. spring事务解析

    1 初步理解 理解事务之前,先讲一个你日常生活中最常干的事:取钱. 比如你去ATM机取1000块钱,大体有两个步骤:首先输入密码金额,银行卡扣掉1000元钱:然后ATM出1000元钱.这两个步骤必须是 ...

  2. C++将时间格式转换成秒数

    #include <stdio.h> #include <time.h> #include <string.h> #include <stdlib.h> ...

  3. git使用——推送本地文件到远程仓库

    捣鼓了一下午之后总结如下:   1.首先可以照着这个链接里面博主给出的详细方法进行操作和配置: http://www.open-open.com/lib/view/open1454507333214. ...

  4. jQuery AJAX方法 前台往后台传数据

    https://blog.csdn.net/dreamstar613/article/details/61912717 http://www.cnblogs.com/zhuxiaojie/p/4783 ...

  5. 类似于Mimikatz的Linux Hash Dump工具

    项目主页 https://github.com/huntergregal/mimipenguin 需要root权限 支持 Kali 4.3.0 (rolling) x64 (gdm3) Ubuntu ...

  6. TCP、UDP详解与抓包工具使用

    参考:https://www.cnblogs.com/HPAHPA/p/7737641.html TCP.UDP详解 1.传输层存在的必要性 由于网络层的分组传输是不可靠的,无法了解数据到达终点的时间 ...

  7. 补充:javascript

    写法分类:1.行内(内联)写在标签里面,以属性的形式表现,属性名是事件属性名例如:<button onClick="js代码"></button>2.内嵌写 ...

  8. javascript call apply

    call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向.因为 JavaScript 的函数存在「定义时上下文」和「 ...

  9. Web开发——HTML基础

    文档资料参考: 参考:MDN官网 参考:http://www.runoob.com,W3School 参考:https://developer.mozilla.org/zh-CN/docs/Learn ...

  10. MacOS High Sierra 引起 VirtualBox Vagrant 同步慢

    问题 最近把mac的操作系统升级到了最新版本发现了一个问题,通过共享文件夹的方式 修改的文件,无法立即同步到虚拟机中,大概需要30秒才能同步到共享文件夹. 操作环境如下 虚拟机:Virtualbox ...