开始使用React Cosmos-一一网

简介

React的众多卖点之一是，用户可以构建组件并在特定的代码库中重复使用它们。在React Cosmos开发工具的帮助下，你可以进一步发挥这一功能。

React Cosmos用于构建孤立的、可扩展的React组件。它让你为你的React应用程序创建一个唯一的组件。在利用React Cosmos时，你可以考虑不同的用例以及不同的设计模式，这将使你能够创建非常通用的、隔离的组件，以适应许多其他条件。

使用React Cosmos的好处

React Cosmos通过利用组件的特性来工作。这些组件功能的总和就是构成你的组件库的内容。然后将其呈现在用户界面上，以便于追踪。使用React Cosmos的一个主要好处是，它可以扫描你的任何React项目，让你用任何道具组合或在任何状态下渲染每个项目中的组件。

在本节中，我们将介绍使用React Cosmos的许多好处。

可重复使用的组件创建

如前所述，React Cosmos将React的可重用性优势提升到了一个新的水平，允许创建隔离的、可重用的组件。这给了你更多的空间来创建一个强大的架构，同时防止你不得不重写一个已经定义好的UI。

不同项目间的UI共享

除了在一个给定的项目中重复使用一个UI之外，React Cosmos还允许在你的投资组合中的不同项目中重复使用一个组件。这对于在你的项目中创造坚实而统一的品牌形象真的很有帮助。

易于调试

当你使用React Cosmos时，识别和修复应用程序中的错误要容易得多，因为它将组件隔离成单独的单元，而不是强迫你使用非隔离的组件。这使得开发变得更加容易和快速，因为它更容易找出你的错误来源。

构建和发布你的组件库

你可以将你的任何React Cosmos组件公开给你的同事或互联网上的任何人使用。如果你决定建立或发布你自己的组件库供公众使用，这可以派上用场。

实时的外部API嘲弄

用户可以通过模拟外部API，实时看到他们的应用程序的当前状态。这使得开发速度更快，在调试时也能派上用场。

安装React Cosmos

React Cosmos可以用于任何React或React Native项目，但在这篇文章中，我们将专注于React。确保你已经事先用npx create-react-app安装了你的React项目。

现在，让我们使用npm（Node Package Manager）在React项目中安装React Cosmos。

npm i --D react-cosmos
复制代码

或Yarn。

yarn add --dev react-cosmos
复制代码

你可以通过检查React项目中的package.json 文件来确认安装是否成功。

安装后，下一步是在你的应用程序中创建一个package.json 脚本。这将使你能够启动你的Cosmos项目。在你的package.json 文件的脚本部分下包括以下代码。

"scripts": {
      "cosmos": "cosmos",
      "cosmos:export": "cosmos-export"
}

复制代码

你的整个package.json 文件应该看起来像这样。

{
"name": "reactcosmos",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "cosmos": "cosmos",
    "cosmos:export" : "cosmos-export"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "react-cosmos": "^5.6.2"
  }
}

复制代码

让我们继续启动我们的应用程序。

用React Cosmos启动我们的React应用

在你的终端中运行以下命令。

使用npm。

npm run cosmos
复制代码

或者，使用Yarn。

yarn cosmos
复制代码

你应该被提示访问localhost:5000 ，查看你的组件库。你不会在那里看到任何组件，因为我们还没有建立任何组件。

Your empty component library

如果你遇到了错误信息，你应该做以下事情。

创建一个名为babel.config.js 的文件，用下面的代码更新其内容：

module.exports = {
   presets: [
      ['@babel/preset-env', {targets: {node: 'current'}}],
      ['@babel/preset-react', {targets: {node: 'current'}}] // add this
   ]
};
复制代码

创建另一个名为postcss.config.js 的文件，并这样更新其内容：
```
module.exports = {}
复制代码
```

这应该可以解决任何Babel或PostCSS问题。如果错误仍然存在，那么你可以通读该信息并尝试排除故障，或者在你喜欢的浏览器上浏览错误信息。

构建我们的第一个React组件

为了构建我们的第一个组件，我们需要创建一个夹具。Fixture文件通常只包含一个默认的输出–要么是React组件，要么是React节点。要创建一个，我们需要在包含我们组件的文件名称中添加.fixture – 我们将使用main.fixture.js 。这样，React Cosmos可以很容易地跟踪它。

继续在你的React应用程序的src 文件夹中创建一个名为button.fixture.js 的文件。下一步是用下面的代码更新该文件。

// button.fixture.jsx
import React from 'react';

export default function Hello() {
  return <h1>Hello, World</h1>
}

复制代码

好啊!你刚刚使用React Cosmos创建了你的第一个孤立的组件。为了确认这一点，再次进入localhost:5000 ，在那里你应该看到你的第一个组件列在All Fixtures下。

Your first component has been created

更新你的React组件

现在我们已经成功地创建了我们的第一个组件，我们可以继续更新它。在本节中，我们将建立一个按钮组件。继续更新我们的button.fixture.js 文件的内容，如下所示。

import React from 'react';
import './button.fixture.css'

export default function Button() {

  return <button> Hey, Click me</button>;
}

复制代码

我们上面所做的是创建一个按钮标签，并链接我们尚未创建的CSS样式表。现在，为我们的按钮组件的样式创建另一个名为button.fixture.css 的文件。更新新文件的内容，如下所示。

button{
    padding:10px 20px;
    color:#fff;
    border:none;
    outline:none;
    background-color: teal;
    border-radius: 8px;
    display:block;
    margin:auto;
    margin-top:40px;
    cursor:pointer;
}

复制代码

这将为新创建的按钮设置样式。你可以再次进入localhost:5000 ，查看我们对组件所做的修改。

Your new button with changes in the component library

我们已经成功地创建并更新了我们的孤立的按钮组件!它现在可以用于我们不同的应用程序。当你创建更多的组件时，它们将显示在你的预渲染的仪表板内供你查看。

注意，夹具文件必须位于你的React应用程序的src 文件夹中。你可以通过在文件名中添加.fixture ，或者创建一个__fixtures__ 文件夹并将所有的夹具文件放在其中来创建一个夹具。

多夹具文件

从一个夹具文件中导出一个以上的组件是很有挑战性的，特别是当你只允许一个默认导出时。你可以通过把你的组件放在object ，如下图所示；这将使你能够用一个灯具文件导出多个组件，来解决这个问题。

export default {
  primary: <PrimaryButton>Click me</PrimaryButton>,
  primaryDisabled: <PrimaryButton disabled>Click me</PrimaryButton>,
  secondary: <SecondaryButton>Click me</SecondaryButton>,
  secondaryDisabled: <SecondaryButton disabled>Click me</SecondaryButton>,
};

复制代码