react基础

1：react安装
creat-react-app是开始构建一个全新单页面应用的最好方式

 npm install -g create-react-app
 create-react-app my-app
 cd my-app
 npm start

2：react初体验

 ReactDOM.render(
     <h1>test</h1>,
     document.getElementById('app')
 )

3：今天开始学习reactjs，按照官方文档把HelloWorld程序复制到WebStorm中，程序可以正常运行，但是WebStorm会报错，我用的是WebStorm11。把 JavaScript 的版本设置为 JSX Harmony。

4：create-react-app修改端口号
方法一：比较复杂

方法二：不太好

方法三：最好的方法
在根目录下新建.env.local文件，可以用于本地环境变量覆盖

　　如在该文件中进行如下设置

PORT=2000

　　则开发服务器会在2000端口开启服务

5：react不支持IE9 ,IE10的解决办法
安装babel-polyfill模块

npm install --save babel-polyfill

在index.js中引入以后就可以在IE9 IE10环境下使用

import "babel-polyfill";

6：react中的反向代理设置

"proxy": {
    "/api": {
      "target": "https://m.weibo.cn",
      "changeOrigin": true,
      "pathRewrite":{"^/api":""}
    }

9：由于create-react-app默认支持fetch，所以在组件中使用fetch获取数据，结果显示在了控制台中

fetch('https://davidwalsh.name/demo/arsenal.json').then(function(response) { 
    // 转换为 JSON
    return response.json();
}).then(function(j) {
    // 现在, `j` 是一个 JavaScript object
    console.log(j); 
});

10:关于Create React App不支持装饰器的终极无伤解决方案

npm install --save-dev babel-plugin-transform-decorators-legacy

我们找到node_modules/babel-preset-react-app/index.js，然后加入装饰器支持。

const plugins = [
  // 增加装饰器的支持
  require.resolve('babel-plugin-transform-decorators-legacy'), <=== 注意这里！
  ....

重启cnpm run start。发现OK了；这是目前侵入最小的解决方案。