Merge branch 'dev' of gitlab.corp.qunar.com:mfe/yapi into dev

2024-12-21 05:19:42 +08:00 · 2017-07-26 16:45:28 +08:00 · 2017-07-26 16:45:28 +08:00 · 5268854b30
commit 5268854b30
parent 6fc86e8078 1eb272bd1a
16 changed files with 315 additions and 62 deletions
--- a/client/actions/interfaceAction.js
+++ b/client/actions/interfaceAction.js
@ -2,7 +2,8 @@ import {
  FETCH_INTERFACE_DATA,
  LIST_INTERFACE_CLICK,
  PROJECT_MEMBER_INTERFACE,
-  DELETE_INTERFACE_DATA
+  DELETE_INTERFACE_DATA,
+  SAVE_INTERFACE_PROJECT_ID
 } from '../constants/action-types.js'

 export function fetchInterfaceData (value) {
@ -30,3 +31,10 @@ export function deleteInterfaceData (value) {
    payload: value
  }
 }
+
+export function saveInterfaceProjectId (value) {
+  return {
+    type: SAVE_INTERFACE_PROJECT_ID,
+    payload: value
+  }
+}
--- a/client/constants/action-types.js
+++ b/client/constants/action-types.js
@ -3,7 +3,8 @@ export const FETCH_INTERFACE_DATA = 'FETCH_INTERFACE_DATA'
 export const LIST_INTERFACE_CLICK = 'LIST_INTERFACE_CLICK'
 export const PROJECT_MEMBER_INTERFACE = 'PROJECT_MEMBER_INTERFACE'
 export const PUSH_INTERFACE_NAME = 'PUSH_INTERFACE_NAME'
-export  const DELETE_INTERFACE_DATA = 'DELETE_INTERFACE_DATA'
+export const DELETE_INTERFACE_DATA = 'DELETE_INTERFACE_DATA'
+export const SAVE_INTERFACE_PROJECT_ID = 'SAVE_INTERFACE_PROJECT_ID'

 // addInterFace
 export  const FETCH_ADD_INTERFACE_INPUT = 'FETCH_ADD_INTERFACE_INPUT'
--- a/client/containers/AddInterface/AddInterface.js
+++ b/client/containers/AddInterface/AddInterface.js
@ -11,6 +11,7 @@ import ReqHeader from './ReqHeader/ReqHeader.js'
 import ReqParams from './ReqParams/ReqParams.js'
 import ResParams from './ResParams/ResParams.js'
 import Result from './Result/Result.js'
+import MockUrl from './MockUrl/MockUrl.js'
 import InterfaceTest from './InterfaceTest/InterfaceTest.js'
 import {
  saveForms,
@ -23,6 +24,7 @@ import {
  pushInterfaceMethod
 } from '../../actions/addInterface.js'

+let projectId = ''
 const success = () => {
  message.success('保存成功!')
 }
@ -71,7 +73,8 @@ class AddInterface extends Component {
    this.state = {
      isLoading: '',
      isSave: false,
-      mockJson: ''
+      mockJson: '',
+      mockURL: ''
    }
  }

@ -106,7 +109,6 @@ class AddInterface extends Component {
      url.match(regTwo)
      return RegExp.$1
    }
-
  }

  verificationURL () {
@ -117,9 +119,22 @@ class AddInterface extends Component {
    }
  }

+  getMockURL (project_id, result) {
+    const params = {id: project_id}
+    axios.get('/project/get', {params: params}).
+      then( data => {
+        const { protocol, prd_host, basepath } = data.data.data
+        const mockURL = `${protocol}://${prd_host}${basepath}${result.path}`
+        this.setState({
+          mockURL: mockURL
+        })
+      })
+  }
+
  editState (data) {
    const props = this.props
    const { path, title, req_params_other, res_body, req_headers, project_id, method } = data
+
    props.pushInputValue(path)
    props.pushInterfaceMethod(method)
    props.pushInterfaceName(title)
@ -127,6 +142,7 @@ class AddInterface extends Component {
    props.getResParams(res_body)
    props.addReqHeader(req_headers)
    props.fetchInterfaceProject(project_id)
+    projectId = project_id
  }

  initInterfaceData (interfaceId) {
@ -142,6 +158,8 @@ class AddInterface extends Component {
        this.editState(result)
        // 初始化 mock
        this.mockData()
+
+        this.getMockURL(projectId, result)
      })
      .catch(e => {
        console.log(e)
@ -175,7 +193,6 @@ class AddInterface extends Component {
      resParams = JSON.parse(this.props.resParams)
      json = JSON.stringify(Mock.mock(resParams), null, 2)
    }
-    console.log('json', json)
    this.setState({
      mockJson: json
    })
@ -184,13 +201,13 @@ class AddInterface extends Component {
  @autobind
  saveForms () {
    let postURL = undefined
-    const { interfaceName, url, seqGroup, reqParams, resParams } = this.props
+    const { interfaceName, url, seqGroup, reqParams, resParams, method } = this.props
    const ifTrue = this.verificationURL()
    const interfaceId = this.getInterfaceId()
    const params = {
      title: interfaceName,
      path: url,
-      method: 'POST',
+      method: method,
      req_headers: seqGroup,
      project_id: interfaceId,
      req_params_type: 'json',
@ -221,8 +238,8 @@ class AddInterface extends Component {

  render () {
    const TabPane = Tabs.TabPane
-    const { isLoading, isSave, mockJson='' } = this.state
-    console.log('mockJson', mockJson)
+    const { isLoading, isSave, mockJson='', mockURL } = this.state
+    console.log(mockURL)
    return (
      <section className="add-interface-box">
        <div className="content">
@ -235,6 +252,7 @@ class AddInterface extends Component {
              <ReqParams data={this.props} />
              <ResParams />
              <Result isSave={isSave} mockJson={mockJson} />
+              <MockUrl mockURL={mockURL} />
            </TabPane>
            {
            // <TabPane tab="Mock" key="2">mock</TabPane>
--- a/client/containers/AddInterface/AddInterface.scss
+++ b/client/containers/AddInterface/AddInterface.scss
@ -169,6 +169,23 @@
      color: #CCC;
    }
  }
+  
+  /* .mock-url-box.css */
+  .mock-url-box {
+    clear: both;
+    padding: 10px 0 0 0;
+    margin: 0 0 0 20px;
+    p {
+      width: 70%;
+      height: 35px;
+      line-height: 35px;
+      border: 1px #DDD solid;
+      display: inline-block;
+      vertical-align: -4px;
+      margin: 0 10px 0 0;
+      padding: 0 0 0 10px;
+    }
+  }

  .loading {
    display: none;
--- a/client/containers/AddInterface/MockUrl/MockUrl.js
+++ b/client/containers/AddInterface/MockUrl/MockUrl.js
@ -0,0 +1,46 @@
+import '../AddInterface.scss'
+import React, { Component } from 'react'
+import { Button, message } from 'antd'
+import Clipboard from 'clipboard'
+import PropTypes from 'prop-types'
+
+const success = () => {
+  message.success('复制成功!')
+}
+
+class MockUrl extends Component {
+  static propTypes = {
+    mockURL: PropTypes.string
+  }
+
+  constructor(props) {
+    super(props)
+  }
+
+  componentDidMount () {
+    setTimeout(this.clipboard, 500)
+  }
+
+  clipboard () {
+    const btn = document.querySelector('#mock-clipboard')
+    const txt = document.querySelector('#mock-p').innerHTML
+    console.log('txt', txt)
+    new Clipboard(btn, {
+      text: () => txt,
+      target () {
+        success()
+      }
+    })
+  }
+
+  render () {
+    return (
+      <section className="mock-url-box">
+        <p id="mock-p">{this.props.mockURL}</p>
+        <Button type="primary" id="mock-clipboard">复制</Button>
+      </section>
+    )
+  }
+}
+
+export default MockUrl
--- a/client/containers/AddInterface/ReqMethod/ReqMethod.js
+++ b/client/containers/AddInterface/ReqMethod/ReqMethod.js
@ -40,6 +40,7 @@ class ReqMethod extends Component {

  @autobind
  handleChange (value) {
+    console.log('value', value)
    this.props.pushInterfaceMethod(value)
  }

@ -57,20 +58,15 @@ class ReqMethod extends Component {

  render () {
    const { Option } = Select
-    const { url, interfaceName } = this.props
+    const { url, interfaceName, method } = this.props
    return (
      <table>
        <tbody>
          <tr>
            <th>协议 :</th>
            <td>
-              <span className="h3">请求协议</span>
-              <Select defaultValue="HTTP" style={{ width: 220}} onChange={this.handleChange} size="large">
-                <Option value="HTTP">HTTP</Option>
-                <Option value="HTTPS">HTTPS</Option>
-              </Select>
              <span className="h3">请求方式</span>
-              <Select defaultValue="POST" style={{ width: 220 }} onChange={this.handleChange} size="large">
+              <Select defaultValue={method} style={{ width: 220 }} onChange={this.handleChange} size="large">
                <Option value="POST">POST</Option>
                <Option value="GET">GET</Option>
                <Option value="PUT">PUT</Option>
--- a/client/containers/Interface/Interface.js
+++ b/client/containers/Interface/Interface.js
@ -10,7 +10,8 @@ import moment from 'moment'
 import {
  fetchInterfaceData,
  projectMember,
-  closeProjectMember
+  closeProjectMember,
+  saveInterfaceProjectId
 } from '../../actions/interfaceAction.js'

@connect(
@ -24,7 +25,8 @@ import {
  {
    fetchInterfaceData,
    projectMember,
-    closeProjectMember
+    closeProjectMember,
+    saveInterfaceProjectId
  }
 )

@ -33,6 +35,7 @@ class Interface extends Component {
    fetchInterfaceData: PropTypes.func,
    interfaceData: PropTypes.array,
    projectMember: PropTypes.func,
+    saveInterfaceProjectId: PropTypes.func,
    closeProjectMember: PropTypes.func,
    modalVisible: PropTypes.bool
  }
@ -49,6 +52,8 @@ class Interface extends Component {
      }
    }

+    this.props.saveInterfaceProjectId(interfaceId)
+
    axios.get('/interface/list', params)
      .then(result => {
        result = result.data.data
--- a/client/containers/Interface/InterfaceList/InterfaceList.js
+++ b/client/containers/Interface/InterfaceList/InterfaceList.js
@ -22,7 +22,7 @@ class InterfaceList extends Component {
  render () {
    const { projectMember } = this.props
    const getInterfaceId = this.getInterfaceId()
-    console.log(`/AddInterface/${getInterfaceId}`)
+
    return (
      <div className="interface-btngroup">
        <Link to={`/AddInterface/${getInterfaceId}`}><Button className="interface-btn" type="primary" icon="plus">添加接口</Button></Link>
--- a/client/containers/Interface/InterfaceTable/InterfaceTable.js
+++ b/client/containers/Interface/InterfaceTable/InterfaceTable.js
@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Table, Button } from 'antd'
+import { Table } from 'antd'
 import PropTypes from 'prop-types'
 import axios from 'axios'
 import { connect } from 'react-redux'
@ -21,6 +21,7 @@ class InterfaceTable extends Component {
  static propTypes = {
    interfaceData: PropTypes.array,
    data: PropTypes.array,
+    projectId: PropTypes.string,
    deleteInterfaceData: PropTypes.func
  }

@ -70,6 +71,7 @@ class InterfaceTable extends Component {
      'key': 'action',
      render: (data) => {
        const deleteInterface = this.deleteInterface.bind(this, data._id)
+        console.log(data)
        return (
          <span>
            <Link to={`/AddInterface/edit/${data._id}`}><span>编辑</span></Link>
--- a/client/containers/User/LeftMenu.js
+++ b/client/containers/User/LeftMenu.js
@ -10,7 +10,8 @@ const Option = AutoComplete.Option;
  state => {
    console.log(state);
    return {
-      curUid: state.login.uid + ''
+      curUid: state.login.uid + '',
+      curUserName: state.login.userName
    }
  }
 )
@ -26,7 +27,8 @@ class LeftMenu extends Component {
  }

  static propTypes = {
-    curUid: PropTypes.string
+    curUid: PropTypes.string,
+    curUserName: PropTypes.string
  }

  //延迟搜索
@ -80,6 +82,9 @@ class LeftMenu extends Component {

    const { dataSource } = this.state;
    return (<div className="user-list">
+      <div className='cur-user'>
+        <div className='user-name'><span>用户名 : </span>{`${this.props.curUserName}`}</div>
+      </div>
      <Row type="flex" justify="start" className="search">
        <Col span="24">
          <div className="certain-category-search-wrapper" style={{ width: "100%" }}>
@ -98,7 +103,7 @@ class LeftMenu extends Component {
          </div>
        </Col>
      </Row>
-      <Menu defaultSelectedKeys={[location.hash]}>
+      <Menu mode='inline' defaultSelectedKeys={[location.hash]}>
        {content}
      </Menu>
    </div>
--- a/client/containers/User/Profile.js
+++ b/client/containers/User/Profile.js
@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Row, Col, Icon, Input, Button, Select, message } from 'antd'
+import { Row, Col, Input, Button, Select, message } from 'antd'
 import axios from 'axios';
 import {formatTime} from '../../common.js'
 import PropTypes from 'prop-types'
@ -131,7 +131,8 @@ class Profile extends Component {
    if (this.state.usernameEdit === false) {
      userNameEditHtml = <div >
        <span className="text">{userinfo.username}</span>&nbsp;&nbsp;
-        <span className="text-button"  onClick={() => { this.handleEdit('usernameEdit', true) }}><Icon type="edit" />修改</span>
+        {/*<span className="text-button"  onClick={() => { this.handleEdit('usernameEdit', true) }}><Icon type="edit" />修改</span>*/}
+        <Button size={'small'} icon="edit" onClick={() => { this.handleEdit('usernameEdit', true) }}>修改</Button>
      </div>
    } else {
      userNameEditHtml = <div>
@ -146,7 +147,8 @@ class Profile extends Component {
    if (this.state.emailEdit === false) {
      emailEditHtml = <div >
        <span className="text">{userinfo.email}</span>&nbsp;&nbsp;
-        <span className="text-button" onClick={() => { this.handleEdit('emailEdit', true) }} ><Icon type="edit" />修改</span>
+        {/*<span className="text-button" onClick={() => { this.handleEdit('emailEdit', true) }} ><Icon type="edit" />修改</span>*/}
+        <Button size={'small'} icon="edit" onClick={() => { this.handleEdit('emailEdit', true) }}>修改</Button>
      </div>
    } else {
      emailEditHtml = <div>
@ -161,7 +163,8 @@ class Profile extends Component {
    if (this.state.roleEdit === false) {
      roleEditHtml = <div>
        <span className="text">{roles[userinfo.role]}</span>&nbsp;&nbsp;
-        <span className="text-button" onClick={() => { this.handleEdit('roleEdit', true) }} ><Icon type="edit" />修改</span>
+        {/*<span className="text-button" onClick={() => { this.handleEdit('roleEdit', true) }} ><Icon type="edit" />修改</span>*/}
+        <Button size={'small'} icon="edit" onClick={() => { this.handleEdit('roleEdit', true) }}>修改</Button>
      </div>
    } else {
      roleEditHtml = <Select defaultValue={_userinfo.role} onChange={ this.changeRole} style={{ width: 150 }} >
--- a/client/containers/User/index.scss
+++ b/client/containers/User/index.scss
@ -6,7 +6,7 @@
  margin: .88rem auto 0 auto;
  // font-size: 0.14rem;
  
-  min-height:433px;
+  
  margin-top: 40px;
  margin-bottom: 55px;

@ -23,10 +23,21 @@
    }
    ul{border:none}
  }
-
+  .user-name{
+    padding: 10px 0px;
+    text-align: center;
+    background-color: #34495e;
+    color: white;
+    span{
+      margin-right: 10px;
+    }
+  }
+  .router-content{
+    min-height:calc(100% - 2.47rem);
+  }
  .user-table {
    -webkit-box-flex: 1;
-    padding: 15px;
+    padding: 24px;
    margin-left: 15px;   
    border-radius:5px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
--- a/client/reducer/Interface/InterfaceReducer.js
+++ b/client/reducer/Interface/InterfaceReducer.js
@ -2,13 +2,15 @@ import {
  FETCH_INTERFACE_DATA,
  LIST_INTERFACE_CLICK,
  PROJECT_MEMBER_INTERFACE,
-  DELETE_INTERFACE_DATA
+  DELETE_INTERFACE_DATA,
+  SAVE_INTERFACE_PROJECT_ID
 } from '../../constants/action-types.js'

 const initialState = {
  interfaceData: [],
  modalVisible: false,
-  interfaceName: ''
+  interfaceName: '',
+  projectId: ''
 }

 export default (state = initialState, action) => {
@ -33,6 +35,11 @@ export default (state = initialState, action) => {
        ...state,
        interfaceData: action.payload
      }
+    case SAVE_INTERFACE_PROJECT_ID:
+      return {
+        ...state,
+        projectId: action.payload
+      }
    default:
      return state
  }
--- a/client/reducer/interface/InterfaceReducer.js
+++ b/client/reducer/interface/InterfaceReducer.js
@ -2,13 +2,15 @@ import {
  FETCH_INTERFACE_DATA,
  LIST_INTERFACE_CLICK,
  PROJECT_MEMBER_INTERFACE,
-  DELETE_INTERFACE_DATA
+  DELETE_INTERFACE_DATA,
+  SAVE_INTERFACE_PROJECT_ID
 } from '../../constants/action-types.js'

 const initialState = {
  interfaceData: [],
  modalVisible: false,
-  interfaceName: ''
+  interfaceName: '',
+  projectId: ''
 }

 export default (state = initialState, action) => {
@ -33,6 +35,11 @@ export default (state = initialState, action) => {
        ...state,
        interfaceData: action.payload
      }
+    case SAVE_INTERFACE_PROJECT_ID:
+      return {
+        ...state,
+        projectId: action.payload
+      }
    default:
      return state
  }
--- a/gulpfile.js
+++ b/gulpfile.js
@ -1,32 +1,154 @@
 const fs = require('fs-extra');
+const path = require('path');
 const gulp = require('gulp');
 const babel = require('gulp-babel');
-const watch = require('gulp-watch');
-const nodemon = require('nodemon');
-const dist   = './server_dist/'
+const ora = require('ora');
+const chalk = require('chalk');
+const { spawn } = require('child_process');
+let spinner = ora('请稍等...').start();
+const DIST = 'server_dist/';
+const SRC = 'server/**/*.js';

-gulp.task('default', ['clearLib', 'compileJS']);
-
-gulp.task('clearLib', [], function() {
-    return fs.removeSync(dist)
-});
-
-gulp.task('compileJS', ['clearLib'], function() {
-	var babelProcess = babel({
-        presets: ['es2015',  "stage-3"],
+function generateBabel(status) {
+    const babelProcess = babel({
+        presets: ['es2015', "stage-3"],
        plugins: ['transform-runtime']
-    })
-
-    babelProcess.on('error', function(e) {
-        console.log(e);
-        process.exit(1);
    });

-    gulp.src('server/**/*.!(js)').pipe(gulp.dest(dist));
-    
+    babelProcess.on('error', function (e) {
+        const restart = status ? status.count < 2 : true;

-    return watch(['server/**/*.js'], {
-        verbose: true,
-        ignoreInitial: false
-    }).pipe(babelProcess).pipe(gulp.dest(dist));
-})
+        console.error(e);
+        output('error', 'babel 编译失败！', restart);
+
+        if (status) {
+            status.count++;
+        }
+    });
+
+    return babelProcess;
+}
+
+function excuteCmd(cmd, args, opts) {
+    const command = spawn(cmd, args, opts);
+
+    command.stdout.on('data', data => {
+        output('log', `${cmd}: ${data.toString()}`, true);
+    });
+
+    command.stderr.on('data', data => {
+        output('log', `${cmd}: ${data.toString()}`, true);
+    });
+
+    command.on('close', code => {
+        if (code !== 0) {
+            output('log', `${cmd}: ${data.toString()}`);
+        }
+    });
+}
+
+function output(type, message, restart = false) {
+    spinner.stop();
+
+    if (type === 'success') {
+        message = '✔ ' + message;
+        console.log(chalk.green(message));
+    } else if (type === 'error') {
+        message = '✖ ' + message;
+        console.log(chalk.red(message));
+    } else {
+        console.log(message);
+    }
+    if (restart) {
+        spinner.start();
+    }
+}
+
+gulp.task('removeDist', [], function () {
+    return fs.removeSync(DIST)
+});
+
+gulp.task('initialBuild', ['removeDist'], () => {
+    spinner.text = '初始编译...';
+
+    return gulp.src(SRC)
+        .pipe(generateBabel())
+        .pipe(gulp.dest(DIST))
+        .on('end', () => {
+            output('success', '初始编译成功！');
+            spinner = ora({
+                text: '等待文件变更...',
+                spinner: 'pong',
+                color: 'green'
+            }).start();
+
+            excuteCmd('node_modules/.bin/nodemon', ['-q', 'server_dist/app.js', 'dev'], {
+                cwd: __dirname
+            });
+
+            excuteCmd('ykit', ['s', '-p', '4000'], {
+                cwd: path.resolve(__dirname, '../')
+            });
+        });
+});
+
+gulp.task('default', ['initialBuild'], () => {
+    gulp.watch(SRC, (event) => {
+        spinner.text = `正在编译 ${event.path}...`;
+
+        gulp.src(event.path).pipe(generateBabel())
+            .pipe(gulp.dest(DIST)).on('end', () => {
+                output('success', `成功编译 ${event.path}`);
+                spinner = ora({
+                    text: 'waiting changes...',
+                    spinner: 'pong',
+                    color: 'green'
+                });
+                spinner.start();
+            });
+    });
+});
+
+gulp.task('build', () => {
+    let status = {
+        count: 0
+    };
+    let ykitOutput = '';
+
+    spinner.text = '正在编译...';
+
+    gulp.src(SRC)
+        .pipe(generateBabel(status))
+        .pipe(gulp.dest(DIST))
+        .on('error', (err) => {
+            status.count++;
+            output('error', err, status.count < 2);
+        })
+        .on('end', () => {
+            status.count++;
+            output('success', '后端编译成功！', status.count < 2);
+        });
+
+    const ykitBuild = spawn('ykit', ['pack', '-m'], {
+        cwd: __dirname
+    });
+
+    ykitBuild.stderr.on('data', data => {
+        ykitOutput += data.toString();
+    });
+
+    ykitBuild.stdout.on('data', data => {
+        ykitOutput += data.toString();
+    });
+
+    ykitBuild.on('close', code => {
+        if (code === 0) {
+            status.count++;
+            output('success', '前端编译成功！', status.count < 2);
+        } else {
+            status.count++;
+            output('error', '前端编译失败！', status.count < 2);
+            output('log', ykitOutput);
+        }
+    });
+});
--- a/package.json
+++ b/package.json
@ -5,23 +5,26 @@
  "main": "index.js",
  "scripts": {
    "build-server": "babel  server -d server_dist",
-    "dev-server": "nodemon server_dist/app.js"
+    "dev-server": "nodemon server_dist/app.js",
+    "install-server" : "node server_dist/install.js",
+    "dev": "gulp --silent",
+    "build": "gulp build --silent"
  },
  "repository": {
    "type": "git",
-    "url": "git@gitlab.corp.qunar.com:wenxiong.su/yapi.git"
+    "url": "git@gitlab.corp.qunar.com:mfe/yapi.git"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
-    "@qnpm/ykit-config-qunar": "^0.8.2",
    "assets-webpack-plugin": "^3.5.1",
    "axios": "^0.16.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "clipboard": "^1.7.1",
    "copy-webpack-plugin": "^4.0.1",
    "core-decorators": "^0.17.0",
-    "fast-sass-loader": "^1.2.5",
    "cross-request": "^1.0.1",
+    "fast-sass-loader": "^1.2.5",
    "fs-extra": "^3.0.1",
    "json2html": "0.0.8",
    "jsoneditor": "^5.9.3",
@ -75,6 +78,7 @@
    "babel-register": "^6.9.0",
    "babel-runtime": "^6.9.2",
    "buffer-shims": "^1.0.0",
+    "chalk": "^2.0.1",
    "css-loader": "^0.28.4",
    "eslint": "^3.19.0",
    "eslint-plugin-import": "^2.2.0",
@ -89,6 +93,7 @@
    "gulp-watch": "^4.3.11",
    "node-sass": "^4.5.3",
    "nodemon": "^1.11.0",
+    "ora": "^1.3.0",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",