atellier：实践指南

工作中遇到相关需求时，atellier值得先读说明，因为它主要用于与您的团队共享交互式组件的最明智的方式。一旦进入日常自动化环节，输入边界、依赖和失败处理如果不清楚就很难稳定复用会直接影响交付，这也是我最关心的风险。更实际的做法是用一项范围明确的真实任务完成最小试跑，同时核对配置时间、输出质量、异常信息和维护痕迹，不要直接在关键项目上。对愿意先做小范围验证并复查原始文档的团队来说，这个仓库值得继续验证；只求即装即用的人则要先看维护成本。

一个 React 组件，其工作方式类似于其他组件的预览。一个很好的工具，可以展示您的组件如何工作和外观。易于安装和配置，您可以在 Atellier 的项目中拥有路由器，并可以与任何组件交互。

想象一下一个宇宙，您可以在其中实时测试工具（组件）！这太棒了！

在线演示

• 工作室和材料 UI

安装

npm install -g react-atellier

用途

导入工作室

对于版本：> v0.1.0 (NEWER)

...
import ReactAtellier from 'react-atellier';

对于版本：<= v0.0.14

...
var ReactAtellier = require('react-atellier')( React );

导入您的组件

import myComponent from 'myComponent';

const componentList = [{
  componentName : myComponent.displayName,
  component : myComponent
}];

OR 您的组件库

import myComponents from 'myComponent';

const componentList = myComponents.map( (comp)=> {
    return {
      componentName : comp.displayName,
      component : comp
    }
})

通过 Components 属性将您的组件传递给 Atellier。

var AtellierWrapper = React.createClass({
  render: function() {
    return (
      <ReactAtellier components={componentList} />
    );
  }
});

然后您需要在应用程序中的某个位置渲染 Atellier。

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="atellier" component={AtellierWrapper}/>
    </Route>
  </Router>
), document.body)

托多

• [ ] Atellier CLI（制作中）
• [ ] 导入组件并实时更新
• [ ] 移动 stage 中的组件

团队

• 吉尔赫姆·德·索萨
• 阿尔贝托
• 三石埃里卡
• 布鲁诺·阿古托利
• 丹尼尔·阿莱格雷蒂
• 若昂·内托
• 盖森