# 点睛平台前端React组件库

---


> 本项目依赖 `storybook` 创建单一或者多个状态的组件 [storybook 学习][https://www.learnstorybook.com/react/zh-CN/get-started/]

## 开发说明

### 安装依赖

```
yarn install
yarn add react@16.14.0 react-dom@16.14.0
```

### 发布至npm

#### 先安装`npm`和编译打包工具 `babel` `webpack`

#### 运行下面的命令进行打包

```
npm run build
```

#### 修改`package.json`的`version` 增加一个版本

#### 发布至 `npm`

```
npm publish
```

#### 在主库重新安装并使用

```
npm i --save eye-design
```

## 使用说明

```javascript
import React, { Component } from 'react';
import {RadioGroup, Radio}  from './components/ui/RadioGroup';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      valueSelected: 'apple'
    }
  }
  render() {
    return (
      <div className="App">
        <h1>点睛前端RadioGroup组件</h1>
          <h3>RadioGroup 和 Radio 组件</h3>
          <div className="demo-in">
            <RadioGroup name="fruit" valueSelected={this.state.valueSelected} onChange={(val) => this.handleChange(val)}>
              <Radio value="apple" text="Apple"/>
              <Radio value="orange" text="Orange"/>
              <Radio value="watermelon" text="Watermelon"/>
            </RadioGroup>
          </div>
      </div>
    )
  }
  handleChange(val) {
    this.setState({valueSelected: val})
  }
}
export default App;

```

## 目录结构

```
eye-design
├── README.md          # 项目说明文件
├── .storybook         # 项目`storybook`相关配置、`webpack` 配置文件
├── node_modules       # 模块依赖，在 `.gitignore` 文件中加入了忽略，请使用 `npm install` 或者 `yarn`
├── package.json       # 项目配置信息和依赖json文件
├── package-lock.json  # 模块依赖快照文件
├── yarn.lock          # 速度快，可靠，安全的依赖管理的
├── .gitignore         # `git` 忽略特殊文件
├── public             # 公共文件夹
├── test               # 单元测试
├── stories             # `storybook`的`demo`组件展示代码
└── src                # 项目文件
    └── compoments       # 项目公共组件
    └── widgets          # 项目公共组件
    └── web              # 项目组和 组件`example`
      └── about            # 开发团队介绍
    └── utils            # 项目可复用功能
    └── assets           # 项目资产文件
      └── css              # 项目公共样式文件
    └── other            # 其他杂项
    └── index.js         # 项目入口
```