[译] Say Hello to React CDK

ReactCDK是一个由Kadira提供的强大的React组件开发工具包,它集成了Yeoman构造器和一系列构建工具,如ReactStorybook、Mocha、Enzyme等,帮助开发者简化组件开发流程,实现快速构建、实时开发环境、自动化测试等功能,同时提供一键升级工具,确保开发者无需担心构建工具的更新问题。

这是一个 React 的 Componment Development Kit (CDK)。它是一个功能强大得多的工具,而不只只是又一个脚手架。它是由Kadira 出品并提供支持。

Why?

React非常棒!!你可以用它来创造一些很酷的东西,而且你想把你的作品分享到社区。但是,这会很难。

构建开发环境真的是非常的困难和繁琐。我们已经讨论过这个问题。(JS Fatigue)

即使你已经很擅长搭建起正确的构建工具,但是维持他们并且更新它们仍然困难繁琐。如果你同时在维持几个 React 项目,这个问题将会变得更加困难。

React CDK 并不是 JS Fatigue 的答案,但是它可以使你在写 React 组件和业务的时候不必担心构建工具和其他的东西。你将会得到最大的自由度,你也不需要再重新发明什么轮子。

?: 听起来很酷,告诉我更多的东西。

What React CDK Is?

React CDK 是一个 [yeoman] 构造器,包括一系列使 React 组件开发更加简单和有趣的构建工具。你可以用它来做很多事情,包括:

  • 用一条命令构建一个项目。

  • 用 ES2015+ 语法写 React 组件。

  • 使用React Storybook,一个实时开发环境。

  • 使用 Mocha 和 Enzyme 来写测试。

  • 使用 Eslint,按照 Airbnb 的推荐语言规范。

  • 输出正确的编译后代码到 NPM。

  • 部署你的 storybook 到 Github Pages。

  • 升级核心的构建工具(所以,你总会保持最新)

?: 好吧,那我该怎么开始?

很简单。安装 React CDK 只需下面这样:

npm install -g yo generator-react-cdk

如果你之前安装过 yo,你可以不安装。如果你不知道 yo 是什么,也不用担心。

然后你可以创建一个项目:

yo react-cdk react-wizard

bash

它会在react-wizard文件夹下生成一个项目和一系列文件。它是一个典型的React和其他工具配置的 NPM 模块。

所有的源代码文件都放在src文件夹下,这也是你需要关心的地方。你可以用你最喜欢的编辑器来编写src/index.js,开始开发一个组件。

?: 这些都不是什么新东西。我们有一大堆的 yeoman 构建器和 React 脚手架。

是的!下面才是不一样的地方。请继续阅读。

Live Development Environment

你总是需要一个示例 app 来测试你的组件。你可以用你自己的 app,但是应该有更好的解决方案。我们最近发布了 React Storybook。它是解决这个问题的完美工具。

一个简单的命令:

npm run storybook

然后你就拥有了一个 storybook console, 来配置你的测试组件。

storybook

你可以在src/stories文件夹里 write stories了。

用这个方法,在组件开发时你就可以看到组件的样子。同时,你还可以虚拟的测试组件的各个状态。

Testing, Linking and More

React CDK 会使用最好的 JavaScript代码质量工具来配置你的项目。它推荐使用 Airbnb JavaScript style guide。它还配置了Enzyme 和 JSDOM 来做简单的 React 测试。

你甚至可以使用一条简单的命令将你的 storybook 发布到 GitHub Pages。

了解更多的关于 React CDK 的信息,请访问这里

Support and Updates

不同于其他的脚手架和构造器,使用CDK你可以用一条简单的命令来升级你项目中用到的工具。这意味着你完全不用担心构造工具的升级问题。让我们 CDK 来担心这个。

下面是升级的命令:

## update react-cdk
npm install -g generator-react-cdk

## update your project
## First visit your component, then apply:
yo react-cdk:update

这些命令会把你的组建的开发和构造工具升级到最新的版本。你完全不用手动的去更新它们。

?: 这确实很棒,但是我可以按照我的需要来随意配置这些构建工具吗?

当然可以。我们提供了一种方式,让你可以按照你想要的方式来配置你的构建工具。关于这个,你可以查看 configuration guide

Build, Share and Help

我希望你们可以迸发很多很酷的想法并且分享你的很酷的项目(或者你公司)中的组件。

让我们一起来分享它们到 React 社区。大家会喜欢它们的。我们希望 React CDK 可以让这件事变得简单并且节省你的时间。

你也可以把你现有的组件整合进 React CDK 。你只需要把你源代码挪进来并且在package.json添加依赖即可。

我希望了解你们如何使用React CDK,并且让我们知道如何改进项目,使 CDK 变得更好。

译自 Say Hello to React CDK

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值