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. jvm.option是什么,它是如何加载的

    jvm.option是一些程序里边的java的配置参数的一个集合,不同的应用都会定义自己的jvm.options用来控制一些jvm的参数 以下,以elasticsearch为例,来说明它是如何加载的 ...

  2. C++ string中find() 用法

    string中 find()的用法 rfind (反向查找)  (1)size_t find (const string& str, size_t pos = 0) const;  //查找对 ...

  3. 【python】——sql模拟

    一.作业需求: 当然此表你在文件存储时可以这样表示 1,Alex Li,22,13651054608,IT,2013-04-01 现需要对这个员工信息文件,实现增删改查操作 可进行模糊查询,语法至少支 ...

  4. JAVA SE ------------------- 项目的菜单输入

    //写一个工具类,进行输入选项数值的获取public class InputUtil { static Scanner sc=new Scanner(System.in); public static ...

  5. matlab知识

    matlab中cumsum函数通常用于计算一个数组各行的累加值. 调用格式及说明 matlab中cumsum函数通常用于计算一个数组各行的累加值.在matlab的命令窗口中输入doc cumsum或者 ...

  6. 选择结构的三角关系Switch、Case、Default!!!

    选择结构的三角关系Switch.Case.Default!!! 今天我们学习选择结构进化章节——Switch结构,他与if有什么区别呢? 相同点: 都是用来处理多分支条件的结构 不同点: switch ...

  7. java中基本类型double和对象类型Double

    Double.valueOf(str)把String转化成Double类型的对象比如Stirng str="1.0";那么Double.valueOf(str)等价于new Dou ...

  8. springboot+mybatis+druid数据库连接池

    参考博客https://blog.csdn.net/liuxiao723846/article/details/80456025 1.先在pom.xml中引入druid依赖包 <!-- 连接池 ...

  9. 20175320 2018-2019-2 《Java程序设计》第4周学习总结

    20175320 2018-2019-2 <Java程序设计>第4周学习总结 教材学习内容总结 本周学习了教材的第五章的内容.在这章中介绍了子类与继承,着重讲了子类继承的规则以及使用sup ...

  10. xilink 烧写flash

    no 右键