react-component / react-component.github.io

docs and site of react-component

react-component.github.io

docs and site of react-component

http://react-component.github.io

Docs

中文

• 如何开发一个 react 组件
• react 组件代码规范
• react 组件设计原则
• kissy 与 react 组件编写异同

third-party recommended react components

• search index
• react-bootstrap
• react-forms
• react-router
• flux-router-component

tutorials

• learning-react
• awesome-react
• react-learning
• react-starter-kit

react-component.github.io's Issues

remove redundancy object-assign

https://github.com/search?q=org%3Areact-component+object-assign&type=Code

since rc-tools and antd-tools both use babel-plugin-transform-object-assign, no need to use a third-party module.

cc @react-component/admin

• rc-canlendar

`pkg.entry` should change to `pkg.config.entry`

This rc-tools break change will cause rc-component won't build umd dist file.

react-component/rc-tools@4956bd4

cc @react-component/admin

fix components lint

lint 修复

删除 node_modules，重新 npm install，运行 npm run lint, warning 可以通过在文件头部加入：

/* eslint react/no-multi-comp:0 */

待修复组件列表

• tabs: @yiminghe
• input-number/progress/slider/switch: @本杰
• time-picker: @崖鹰
• queue-anim/table/form-validation/notification: @偏右
• pagination: @雨维
• tree: @然则

弹窗类组件，支持「所有正常事件」的触发

�如 TreeSelect 组件，需要在点击组件的时候，再做加载数据或其他动作。但现在这类组件不支持正常的 onClick、onMouseEnter等事件。 涉及到 Select、Dropdown 等

Components Plan

Docs

• docs @yiminghe
• badgeboard @yiminghe
• site @yiminghe
• ant-design @afc163

Infrastructure

• generator-rc @yiminghe

Components

ant-design

• calendar(日期选择控件) @yiminghe
• dialog/modal/confirm @yiminghe
• table(简单表格) @yiminghe
• tabs(选项卡) @yiminghe
• pager(分页)
• pagination(分页)
• menu(菜单) @warmhug
• select(下拉菜单) @warmhug/@yiminghe
• form-validator(表单验证) @yiminghe
• radio(单选框) @yiminghe
• checkbox(多选框) @yiminghe
• tree @warmhug
• slider(滑动选择器) @simaQ
• input-number(数字输入框) @yiminghe
• progress(进度条) @夏奈
• switch(开关) @yiminghe
• step(步鄹)
• tooltip(通用提示) @yiminghe
• dropdown(气泡弹出层) @yiminghe
• dropzone(拖放上传) @shepherdwind
• upload(通用上传) @shepherdwind
• notification(信息提示条) @yiminghe
• collapse(折叠面板) @翰文
• color-picker(颜色选择)

other (低优先级)

• Bar Chart ? prototype
• Pie Chart ?
• Line Chart ?

Refer

• 组件规范
• https://github.com/yiminghe/learning-react
• 火烧云组件库
• ant-design
• http://react-components.com

引入 monorepo

好处

• rc-tools 的更新可以统一推进，目前几个组件库依赖的 rc-tools 版本不一致，如果要给 rc-tools 加东西需要给几十个组件库升级一遍，耗时耗力容易遗漏；
• issue 可以统一管理。
• 方便集成测试，（比如 Menu 和 Select 需要一起测试）。

问题

add es

ant-design/antd-tools#39

@react-component/admin

• slider : react-component/slider@c9b262b...e9b6823

• util : react-component/util@7949fe3

• m-picker

• m-cascader

• table: react-component/table@a2d4b49

• select: react-component/select@8eee564

• tabs: (react-component/tabs@96755a6...2ff5b53)

• upload

• tree-select

• tree

• rc-pagination

• rc-checkbox

• rc-hammerjs

• rc-input-number

• rc-notification

• rc-touchable

• rc-progress

• rc-dialog

• rmc-date-picker

• rmc-list-view

react-component.github.io/table/examples/ isn't loading.

The Tables/Examples page from the rc-table docs is unresponsive.

Chrome console log:

(index):20 GET http://react-component.github.io/table/examples/runtime~main.411d3c3c7829aaabb366.bundle.js net::ERR_ABORTED 404 (Not Found)
(index):20 GET http://react-component.github.io/table/examples/runtime~main.411d3c3c7829aaabb366.bundle.js net::ERR_ABORTED 404 (Not Found)
(index):20 GET http://react-component.github.io/table/examples/runtime~main.411d3c3c7829aaabb366.bundle.js net::ERR_ABORTED 404 (Not Found)

Url in question: http://react-component.github.io/table/examples/

Tooltip Design

@sliuqin for refer

functionality

• http://spmjs.io/package/arale-tip

api

• http://react-bootstrap.github.io/components.html#tooltips

align util

• http://spmjs.io/docs/dom-align/latest/examples/

api

<Tip event='onmouse'  content={<a>xss</a>}>
<a>xxx</a>
</Tip>

react组件里面如何动态配置dom

按照react思维，所有的元素都是虚拟dom树，一般考虑一个组件，首先会把组件分为不同层级的组件。

遇到一个问题，如果我需要开发一个组件，但是组件的一个子元素是需要可配置。比如

<MyComponent>
  <p class="preview">hello world</p>
</MyComponent>

上面MyComponent是我开发的，但是中间那个p是用户自定义的一段html代码。这中间的代码如果传递到我定义的react class中？难道只能用dangerouslySetInnerHTML。

我觉得理想的方式，直接

React.render(<MyComponent><p>...</p></MyComponent>, el);

我希望p直接追加在MyComponent后面，不过实际中，我发现MyComponent渲染出来是没有p那么一段的。

简单demo可以看这个例子http://jsfiddle.net/69z2wepo/3678/ 。

DropDown/Combobox Design

• https://select2.github.io/examples.html

Weekly Report: 2015.03.27

react-component/tabs#4

react-component/menu#5

react-component/calendar#17

react-component/select#2

https://github.com/react-component/form-validation/issues/3

topics

2015-05-14

react-best-practice

2015-06-01

roof-preview

2015-06-18

ant-design-preview

react at alipay

react at alibaba data department

2015-07-30

react-europe 2015

2015-09-18

relay-falcor-roof

2015-11-12

jest

refactor test import path, remove redundancy index.js

ref: react-component/tree-select#62

踩了个坑，nodejs 读目录会优先尝试 pkg.main, 失败才会 fallback 到 index.js

https://github.com/nodejs/node/blob/master/lib/module.js#L115

所以用例里面 import TreeSelect from '..'; 会优先引用到 lib。

cc @react-component/admin

• tree-select

rc-server/tools 升级

dora

atool-build

为什么不用ES6 class, 必须用React.createClass?

ES6 是未来，mixin只是一个特殊时期的临时解决方案，mixin有很多设计上的问题。为什么在代码规范中强调，必须用React.createClass呢？

https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/code-style/js.md#代码格式

Mobile Components Plan

mobile components

• m-date-picker @yiminghe
  http://react-component.github.io/m-date-picker/examples/simple.html
• m-date-picker/Popup @warmhug
  http://react-component.github.io/m-date-picker/examples/popup.html
• m-cascader @warmhug
  http://react-component.github.io/m-cascader/
• m-select-list @warmhug
  http://react-component.github.io/m-select-list/
• navigator