如何使用React Cosmos

DebugUsery
234 阅读7分钟

开始使用React Cosmos

React库已经迅速确立了自己作为一个流行的JavaScript UI库的地位。作为一个组件库，开发者可以构建可重用的UI组件。然而，在组件中重复使用和实现测试是一项复杂的任务。

React Cosmos是一个React库，它提供了一个环境来重用、测试和孤立地开发UI组件。使用React Cosmos沙盒，我们可以交互式地改变组件道具，并在开发过程中获得即时变化。

在这篇文章中，我们将使用一个订餐的React应用程序来介绍React Cosmos的基础知识。让我们开始吧!

前提条件

要想继续学习，你需要具备以下条件。

  • React 16.8版本和Node 10或更新版本。
  • 一个网络浏览器。我将使用[谷歌浏览器]。
  • 一个IDE，如[Visual Studio Code]。
  • 对[React]库和[JavaScript]编程语言有基本了解。

React Cosmos在React应用中的好处

React已经永远地革新了前端开发。作为前端开发者，我们的大部分任务都涉及到制作干净和功能性的UI。

然而，要确保它们在大型应用中完美无缺地工作，需要大量的测试、兼容性支持等。

为了解决这个问题，我们需要确保各组件设计的一致性。

使用React Cosmos的主要好处包括。

  • 我们可以使用它的实时外部API模拟进行可视化回归测试，甚至是快照测试。
  • 由于隔离的组件，调试要容易得多。
  • 使用像React这样的基于组件的库是设计系统中必不可少的。使用React Cosmos构建组件可以确保跨多个项目的重用性。这就避免了在整个产品套件中创建一致的品牌的重复工作。

项目设置

为了开始使用React Cosmos，我们将从这个资源库克隆一个应用程序。这是一个使用React和tailwind CSS制作的简单订餐应用。

在你的系统上使用git，用下面的命令克隆这个仓库中的启动代码。

git clone https://github.com/marienjus/React-Cosmos.git

一旦你克隆了版本库，通过在终端运行yarn install 或npm install 来安装依赖性，并在你最喜欢的IDE中打开该应用程序。下面是我们在这个应用程序中的组件的结构。

我们的src/components 文件夹有。

  • 一个简单的可重复使用的Button 组件。
  • 一个显示购物车项目详情的CartCard 组件。
  • 一个总结购物车的Checkout 组件，如总价、小计价和送货费。
  • 一个FoodCard 组件，显示食物的细节，并有一个按钮来添加食物。

在我们的src/pages ，我们有。

  • cart 组件页面，显示我们的购物车项目和结账组件。
  • home 页面组件是我们的登陆页面。它渲染了一个导航条和FoodCard 组件。

用下面的命令启动开发服务器。

yarn start

对于npm的使用。

npm start

React开发服务器启动在http://localhost:3000/ 。浏览器中的应用程序应该看起来像这样。

cosmos landing page

cosmos cart page

让我们把React Cosmos包作为开发依赖项来安装。在你的终端上，执行下面的命令。

yarn add -D react-cosmos

如果你使用的是npm，运行下面的命令。

 npm i -D react-cosmos

为了确保React Cosmos与create-react-app一起工作，在你的项目根目录下添加一个cosmos.config.json 文件，代码如下。

{
	"staticPath": "public",
	"watchDirs": ["src"],
	"webpack": {
		"configPath": "react-scripts/config/webpack.config"
	},
	"globalImports": ["src/styles/main.css"]
}

在这里，watchDirs 和staticPath 属性告诉 React Cosmos 观察我们的src 目录中的任何静态资产在公共文件夹中。

最后，我们接着需要指向我们的webpack配置文件，并使用globalImports 来启用我们的CSS全局文件。

接下来，我们需要安装一个cross-env 包来解决React Cosmos和热重载问题。要安装它，请运行以下命令。

yarn add cross-env -D

或者使用npm。

npm install cross-env -D

最后，我们需要将React Cosmos添加到我们的package.json 文件的scripts部分。

  "scripts": {
    "cosmos": "cross-env FAST_REFRESH=false cosmos",
    "cosmos:export": "cross-env FAST_REFRESH=false cosmos-export"
  }

祝贺你!你现在已经设置了React Cosmos。在下面的部分，我们将开始在我们的React应用程序中使用React Cosmos。

使用React Cosmos运行React应用程序

要在你的终端上使用React Cosmos服务器启动应用程序，请运行以下命令。

npm run cosmos

如果你喜欢yarn。

yarn cosmos

当服务器启动并运行时，在你喜欢的浏览器中导航到http://localhost/5000 ，你应该看到像这样的东西。

cosmos starter

使用Fixtures创建组件

在React Cosmos中，我们通过创建固定装置来构建组件。固定装置是包含默认输出的文件（作为React Component或React Node）。

React Cosmos在沙盒资源管理器中显示这些夹具。因此，为了使React Cosmos能够跟踪我们的组件，我们需要在包含它的文件名后加上.fixture 。

要开始，在你的src 文件夹中创建一个文件，并将其命名为Button.fixture.jsx 。

在该文件中，导入Button组件为。

import Button from "./components/Button/Button";

然后把它导出为默认值。

export default (
	<div>
		<div className="w-50 mx-auto">
			<Button>Cosmos</Button>
		</div>
	</div>
);

在我们的Cosmos Explorer中的ALL FIXTURES下，我们应该看到。

cosmos button

在右边的面板上，我们可以编辑按钮组件的任何属性。让我们在一个变体道具中添加一个二级和一级Button变体。

回到你的src/component 文件夹，用下面的代码更新Button.jsx 组件。

export default function Button({ children, variant = "primary" }) => {
  return (
    <div>
    <button
      className={`w-full block h-12 ${
        variant === 'primary' ? "bg-black" : "bg-blue-500"
      } hover:opacity-60 rounded-sm mt-3`}
      style={{ color: 'white', border: "none", outline: "none" }}
      type="button"
    >
      {children}
    </button>
    </div>
  )
}

接下来，从react-cosmos 和Button 组件导入夹具特征。

// import useSelect to use enable the selection feature
import { useSelect } from "react-cosmos/fixture";

// Add the Button component to the fixture file
import Button from "./components/Button/Button";

最后，在我们的Buttton.fixtures.js 文件中把Button组件导出为默认值。

export default () => {
	const [variant] = useSelect("variant", {
		options: ["primary", "secondary"],
	});

	return (
		<div className="w-60 mx-auto">
			<Button variant={variant}>Cosmos</Button>
		</div>
	);
};

让我们简单地剖析一下上面的代码。

我们的Button夹具包括一个带有控制面板钩子的变体道具useSelect 。我们导入useSelect 钩子，使我们能够为变体道具设置选项。因此，在我们的沙盒中，我们可以手动选择，而不是输入。

让我们在沙盒中运行一个演示。

cosmos variants

我们可以在两个变体选项中的任何一个之间进行切换。试着改变变体道具，确认我们的背景颜色有相应的变化。

为结帐组件创建一个夹具

在你的src 文件夹中，添加另一个文件为Checkout.fixture.jsx 。

从components/Checkout/Checkout 文件中导入Checkout组件。

import Checkout from "./components/Checkout/Checkout";

接下来，在结账夹具文件中添加模拟数据，并将其导出为默认值。

const dummyData = {
	subTotalPrice: 150,
	deliveryFee: 15,
	totalPrice: 165,
};

export default (
	<div className="mx-auto w-50">
		<Checkout
			subTotal={dummyData.subTotalPrice}
			deliveryFee={dummyData.deliveryFee}
			total={dummyData.totalPrice}
		/>
	</div>
);

点击左侧面板上的ALL FIXTURE选项。在这里，我们通过向我们的dummyData 对象传递不同的道具值来进行任何视觉测试，并在沙盒中玩弄它。

卡片夹具

对于这个夹具，在src 文件夹中创建一个Cards.fixture.jsx 文件。我们的卡片夹具将多个夹具导出为具有React的export default 关键字的对象。

首先，导入CartCard和FoodCard组件。

import CartCard from "./components/CartCard/CartCard";
import FoodCard from "./components/FoodCard/FoodCard";
import foodImg from "./images/food1.jpg";

接下来，包括食物和订单对象，它们将作为道具的数据。

const order = {
	orderId: 1,
	name: "Chicken",
	price: "8.00",
	quantity: 1,
	updateList: () => {},
};

const food = {
	foodId: 2,
	name: "Hot Chicken",
	price: "8.00",
};

最后，导出FoodCard 和CartCard 固定装置。

export default {
	FoodCard: (
		<FoodCard
			id={food.foodId}
			name={food.name}
			price={food.price}
			imgSrc={foodImg}
		/>
	),
	CartCard: (
		<CartCard
			id={order.orderId}
			name={order.name}
			price={order.price}
			imgSrc={foodImg}
			quantity={order.quantity}
			updateList={order.updateList}
		/>
	),
};

我们的沙盒有一个Cards 固定装置，在它里面，导出CartCard 和FoodCard 作为组件。

这使一切变得更有条理，特别是当沙盒得到更多的固定装置时。

静态导出

当把我们的夹具作为组件库托管在任何静态托管服务（如Netlify）时，React Cosmos允许我们导出我们的夹具。

运行下面的命令。

yarn cosmos: export

或

npm run cosmos: export

我们执行的导出排除了一些可用的开发功能以减少依赖性。然而，它将允许你浏览固定程序，并像在开发沙盒中一样玩弄组件输入。

结论

未能重复使用你的组件会拖累你的开发。

React Cosmos通过使迭代和隔离地构建UI组件成为可能，从而改善了开发者的体验。

此外，拥有快照和可视化回归测试等为我们量身定做的功能，使开发人员的工作效率更高。

avatar
文章
阅读
粉丝