这是一个 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


MrDream
750 声望42 粉丝

爱恋不过是一场高烧,思念是紧跟着的好不了的咳。