---
order: -2
title: Fish of React
---

<div class="pic-plus">
  <img width="150" src="//cdncs.101.com/v0.1/static/fish/image/ndlogo.png">
  <span>+</span>
  <img width="150" src="//cdncs.101.com/v0.1/static/fish/image/antd.png">
</div>

<style>
.pic-plus > * {
  display: inline-block!important;
  vertical-align: middle;
}
.pic-plus span {
  font-size: 30px;
  color: #aaa;
  margin: 0 20px;
}
</style>

---

## 浏览器支持

兼容 IE9+浏览器，兼容相关细节参见：[兼容须知](/docs/compatibility)。

## 安装

### 使用 npm 安装

**我们推荐使用 npm 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

```bash
$ npm install @sdp.nd/fish --save
```

如果你未配置内网镜像，推荐执行如下命令进行配置：

```bash
$ npm config set registry="http://registry.npm.sdp.nd/"
```

建议为`@sdp.nd/fish` 配置别名 `fish`, 下面的描述中，都以配置了别名为例

### 浏览器引入

在浏览器中使用 `script` 和 `link` 标签直接引入文件，并使用全局变量 `fish`。

我们在 npm 发布包内的 `fish/dist` 目录下提供了 `fish.js` `fish.css` 以及 `fish.min.js` `fish.min.css`

> **强烈不推荐使用已构建文件**，这样无法按需加载，而且难以获得底层依赖模块的 bug 快速修复支持。

## 示例

```jsx
import { DatePicker } from 'fish';
ReactDOM.render(<DatePicker />, mountNode);
```

未使用按需加载，需要引入如下样式：

```jsx
import 'fish/dist/fish.min.css';
```

### 按需加载

下面两种方式都可以只加载用到的组件。

- 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)（推荐）。

  > <div style="color:red">统一使用别名：from 'fish'（禁止混合使用fish和@sdp.nd/fish，否则会整包引入fish所有组件）</div>

  ```js
   // .babelrc or babel-loader option
   {
     "plugins": [
       ["import", {"libraryName": "fish", "libraryDirectory": "lib", "style": true}] // `style: true` 会加载 less 文件
     ]
   }
  ```

  然后只需从 fish 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。

  ```jsx
  // babel-plugin-import 会帮助你加载 JS 和 CSS
  import { DatePicker } from 'fish';
  ```

- 手动引入

  ```jsx
  import DatePicker from 'fish/lib/date-picker'; // 加载 JS
  import 'fish/lib/date-picker/style'; // 加载 LESS
  ```

### 自定义 fish 样式

fish 的样式满足不了业务需求的时候，需要覆盖样式时，可以采用如下两个方案。

#### 方案一

1. 项目增加 less 变量文件，[参见脚手架 less 文件](http://git.sdp.nd/fed/react-boilerplate/blob/master/src/theme/styles/theme-green.less)。
1. 修改 style-loader，[参见脚手架构建代码](http://git.sdp.nd/fed/react-boilerplate/blob/master/cfg/defaults.js#L186)。

#### 方案二

1. html 入口文件[最外层增加 id](http://git.sdp.nd/fed/react-boilerplate/blob/master/src/index.html#L15)
1. style 采用如下方式提升优先级，增加权重：

```less
#app {
  .fish-row {
    margin-left: 10px;
  }
}
```
