React16.6配置代理&style私有

你或许想知道的新代理

在脚手架中，一般配置代理会在package.json中写上

"proxy":"url"
//或者
"name": "hardy",
"version": "0.1.0",
"private": true,
"proxy":"url",

这是配置单个代理的时候的情况，假如需要配置多个代理就写成

"name": "proxy",
  "version": "0.1.0",
  "private": true,
  "proxy":{
    "/api": {
        "target": "url",
        "ws": true
      },
  "/apb": {
        "target": "url",
        "ws": true
      }
  }

但是如果在react16.6中这样使用，项目运行的时候会报错，提示不允许Object

1	"proxy" in package.json must be a string

而且在react16.6中，上面的配置已经解决不了代理问题了，这里我亲测了一个极简的demo，用node简单写一个在3001端口返回简单数据的接口，然后用16的脚手架构建了一个初级应用，

然后用react脚手架创建一个应用，接着在App这个组件中写一个请求

请求之后，打开控制台发现network中确实已经发出了请求，并且有了返回值

但是打印出来是这样的

在react16.6中，create-react-app使用了webpack4.0，如果proxy不是字符串的话，是不能够在package.json中直接配置，并且会报错，其实在脚手架的配置文件中是可以找到配置代理的地方的，比如翻一下这个脚手架的webpack配置文件就发现了这个

说明在src这个目录下面可以创建一个名为setupProxy的文件用来写代理，这个在官网也有说明
解决方案就是使用http-proxy-middleware管理包来解决代理问题

根据脚手架中webpack配置文件中得到的信息，在src下面创建setupProxy.js文件，然后写入代理

写完之后重启服务，代理成功

更加详细戳这里

@2020-3-19更新
现在你使用上面的那种写法可能会报错:proxy is not a function，这是因为版本升级导致的，现在的用法应该是这样

scoped&&styled-components

在index.js引入index.css的时候假如index.css里面有个.hardy,那么在APP组件里面的div使用ClassName=’hardy’也会生效。

在vue组件中，在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的，这是一个非常好的机制。但是在实际业务中我们往往会对公共组件样式做细微的
调整，如果添加了scoped属性，那么样式将会变得不易修改。

在react中我们可以使用一个依赖叫styled-components

1	npm install styled-components

来实现css的私有
举例个小栗子（reset统一不同内核浏览器的标签）：
1、安装styled-components
2、把index.css改成style.js
然后在style.js中

import { injectGlobal } from 'styled-components'
injectGlobal `
    body{background:red}
`

在早一点的版本中，这么写是没问题的，body应该会变红，但是

原因是：styled-components 4.x版本将原来的injectGlobal方法用createGlobalStyle替换了。createGlobalStyle是这么用的

//style.js
import {createGlobalStyle} from 'styled-components';
export const GlobalStyle=createGlobalStyle `
    body{
      background:red;
    }
`

//index.js
import React,{fragments} from 'react';
import ReactDOM from 'react-dom';
import {GlobalStyle} from './style.js'
import App from './App';

ReactDOM.render(
  <fragments>
  <GlobalStyle/>
    <App />
  </fragments>
  , document.getElementById('root'));

重置的话写成这样就可以了

import {createGlobalStyle} from 'styled-components';
export const GlobalStyle=createGlobalStyle `
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
      display: block;
    }
    body {
      line-height: 1;
    }
    ol, ul {
      list-style: none;
    }
    blockquote, q {
      quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
      content: '';
      content: none;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
`

React16.6配置代理&style私有

scoped&&styled-components

🤠 请我喝可乐！