idea antd react

参考：https://ant.design/index-cn

1. 安装nodejs

https://blog.csdn.net/CHS007chs/article/details/84710362

2. create-react-app

cnpm install -g create-react-app yarn

3、使用idea打开

之后，就可以在termial中执行命令。

4、安装umi

cnpm install umi --save-dev

安装完成之后会发现package.json中多出一项devDependencies的配置，这是由于上面命令中，参数--save可以让依赖信息保存到package.json中，这样其它开发者下载代码后就只需要执行cnpm install后就会自动安装项目依赖的包。

（1）在umi中，大量的使用了配置和约定来帮助你快速开发代码，可以使用.umirc.js和config/config.js二者中之一来作为配置文件。

（2）在umi中，约定的存放页面代码的文件夹是pages，也可以添加singular为true来让page变为约定的文件夹。

export default {
  singular: true,
}

（3）通过umi来启动

在package.json中的scripts里面添加两个命令：

{
  "scripts": {
+   "dev": "umi dev",
+   "build": "umi build"
  }
}

scripts中定义的命令，可以在项目根目录中通过cnpm run [scriptname]来运行。

cnpm run dev

（4）路由

在umi中，可以使用约定的路由，在page下面的js文件都会按照文件名映射到一个路由，也可以使用配置式的路由。

xport default {
  routes: [{
    path: '/',
    component: './HelloWorld',
  }],
}

component是相对于page目录的相对路径。

5、umi-plugin-react插件

umi可以通过插件进行功能扩展，umi-plugin-react是umi官方的插件。

cnpm install umi-plugin-react --save-dev 

然后在配置文件config/config.js中引入该插件

export default {
  plugins: [
    ['umi-plugin-react', {
      // 这里暂时还没有添加配置，该插件还不会有作用，我们会在后面的课程按照需求打开相应的配置
    }],
  ],
  routes: [{
    path: '/',
    component: './HelloWorld',
  }],
}

6、构建

可以通过cnpm run build来构建出最终的产物，执行该命令后会生成最终的HTML、CSS、JS到dist目录下

7、引入antd

ant design是一个服务于企业级产品的设计体系，组件库是它的React实现，antd被发布为一个npm包方便开发者安装使用。

（1）在umi中

可以通过 在插件umi-plugin-react中配置antd打开antd插件。

export default {
  plugins: [
    ['umi-plugin-react', {
      antd: true
    }],
  ],
  // ...
}

（2）或自己安装

# 脚手架所在的目录
$ cnpm install --save antd

8、受控组件和非受控组件

区别在于这个组件的状态是否可以被外部修改，一个设计得当的组件应该同时支持“受控”和“非受控”两种形式，即当开发者不控制组件属性时，组件自己管理状态，而当开发者控制组件属性时，组件自己管理状态，而当开发者控制组件属性时，组件该由属性控制。

9、配置代理

只需要在配置文件config/config.js中与routes同级处增加proxy字段。

   routes: [
   // ...
   ],

+  proxy: {
+    '/dev': {
+      target: 'https://08ad1pao69.execute-api.us-east-1.amazonaws.com',
+      changeOrigin: true,
+    },
+  },

配置的含义是：去往本地服务器localhost:8000的ajax调用中，如果是以/dev开头的，那么就转发到远端https://08..服务器当中，/dev也会保留在转发地址中。

模拟服务端数据

1、模拟正常返回数据

首先在工程中增加mock目录，然后在mock目录下创建文件，整个文件需要export出一个js对象。对象的key是由

构成，值是function，当一个草药

调用匹配了key后，与之对应的function就会被执行。

例如

const random_jokes = [
  {
    setup: 'What is the object oriented way to get wealthy ?',
      punchline: 'Inheritance',
  },
  {
    setup: 'To understand what recursion is...',
    punchline: "You must first understand what recursion is",
  },
  {
    setup: 'What do you call a factory that sells passable products?',
    punchline: 'A satisfactory',
  },
];

let random_joke_call_count = 0;

export default {
  'get /dev/random_joke': function (req, res) {
    const responseObj = random_jokes[random_joke_call_count % random_jokes.length];
    random_joke_call_count += 1;
    setTimeout(() => {
      res.json(responseObj);
    }, 3000);
  },
};

2、模拟出错

利用res.status也可以模拟http请求出错

export default {
  'get /dev/random_joke': function (req, res) {
    res.status(500);
    res.json({});
  },
};

国际化

1、antd的国际化

antd提供了一个LocaleProvider组件，该组件接受一鼐属性locale，该属性标识当前语言，antd会通过react的context将这些信息父传递给被LocaleProvider包裹的子组件，从而实现国际化。

import zhCN from 'antd/lib/locale-provider/zh_CN';
import { DatePicker, LocaleProvider } from 'antd';

export default () => {
  return (
    
      
    
  )
}

antd提供了一些列的内置的语言资源，他们的位置在antd/lib/locale/locale-provider/*。我们直接使用它们作为LocaleProvider的locale属性。

2、antd中业务组件的国际化

推荐使用react-intl来作为国际化方案。首先需要安装 

cnpm install react-intl --save

react-intl的国际化方案和antd其实是类似的，它提供了一个IntlProvider组件，你可以把你的业务代码包装在这个组件中。

import zhCN from 'antd/lib/locale-provider/zh_CN';
import { DatePicker, LocaleProvider } from 'antd';
import {
  FormattedMessage,
  IntlProvider,
  addLocaleData,
} from 'react-intl';
import zhData from 'react-intl/locale-data/zh';

const messages = {
  'helloworld': '你好',
};

addLocaleData(zhData);

export default () => {
  return (
    
      
        

          
          
        
      
    
  )
}

3、umi的业务组件国际化

umi提供了更方便的方案，它对react-intl和antd进行了封装。

（1）初始化配置

export default {
  plugins: [
    ['umi-plugin-react', {
      antd: true,
      dva: true,
      locale: {
        enable: true,
      },
    }],
  ],
  // ...
}

在插件集umi-plugin-react中配置locale打开umi-plugin-locale插件，之后umi会帮你自动通过LocaleProvider将antd的组件国际化。它会按照浏览器语言自动切换语言，另外，它约定了locale目录作为业务相关资源的存放路径 。

在2的基础上，我们在src上当 下新建locale目录，并新建zh-CN.js和en-US.js两个文件，分别为

// src/locale/zh-CN.js
export default {
  helloworld: '你好',
}
// src/locale/en-US.js
export default {
  helloworld: 'hello world',
}

权限控制

1、前端与后端的关系

权限的真正控制必须是服务端负责的。所以这里说的权限，更多的是前端的ui控制。

单元测试

在umi中，内置了jest作为单元测试的库，接下来我们会介绍如何使用jest对js方法或者组件进行测试。

1、使用jest

执行umi test会匹配所有.test.js结尾的文件运行，通常我们约定把测试的代码统一放到test文件夹下。

2、配置jest

约定它的配置可以在package.json中，也可以在项目根目录的jest.config.js中。

// 需要注意的是这里不能使用 export default 这样的 ES6 的语法，因为它是被 jest 直接读取的，不会被 umi 编译。
module.exports = {
  testURL: 'http://localhost:7001',
};

3、测试一个方法

jest在执行测试文件的时候会默认注入一些方法，对于最简单的测试，你只需要了解test和expect这两个方法即可。test方法接收两个参数，第一个是测试描述，第二个是一个函数，它包裹了一个测试样例，在这个样例中你可以调用expect方法检测你的代码。

const sum = function (a, b) {
  return a + b;
};

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

在package.json中添加scripts.test为umi test，然后运行cnpm run test

4、测试一个组件

（1）在src/component下新建TestDemo.js

export default () => {
  return 
test
;
};

（2）然后在test/helloword.test.js中添加对它的测试，在这之前我们需要先安装测试包，它是针对React的测试工具库，使得你们可以很方便的利用React虚拟dom来编写测试样例。

cnpm i --save-dev enzyme enzyme-adapter-react-16

然后添加如下测试样例：

import { mount } from 'enzyme';
import TestDemo from '../src/component/TestDemo';

test('TestDemo', () => {
  const wrapper = mount();
  expect(wrapper.find('div').text()).toBe('test');
});

然后运行cnpm run test就可以年到结果

 

常见问题：

1、一直卡在scanning files to index

file->project structure ->modules中把node_modules exculed掉

2、The current inotify(7) watch limit is too low

是由于文件打开过多，修改一个linux内核参数。

You can do it by adding following line to the /etc/sysctl.conf file: 
fs.inotify.max_user_watches = 524288 


Then run this command to apply the change: 
sudo sysctl -p