npm 包 bisheng-peer-react 使用教程

npm 包 bisheng-peer-react 使用教程

简介

bisheng-peer-react 是一个基于 React 和 Bisheng 框架的扩展包，提供了一种方便的方式来构建静态文档站点。它允许你用 Markdown 编写文档，展示 React 组件，并支持实时预览。

安装

使用 npm 安装 bisheng-peer-react 包：

$ npm install bisheng-peer-react --save-dev

配置

创建一个 bisheng.config.js 文件，并在其中配置 bisheng-peer-react。

module.exports = {
  source: './docs',
  theme: 'bisheng-theme-one',
  plugins: ['bisheng-peer-react'],
  port: 8080,
};

编写文档

在 ./docs 目录下创建一个 Markdown 文档。

# Hello World!

这是我的第一篇文档。

<MyComponent />

你可以在 Markdown 中展示你的 React 组件。只需使用 <MyComponent /> 的格式并在文件顶部导入组件。

运行

使用以下命令，在本地运行文档站点：

$ bisheng start

此命令将启动一个本地服务器，并可以在 http://localhost:8080 上访问你的文档站点。

示例

以下是一个示例组件的代码：

import React from 'react';

const Component = (props) => {
  return <div>Hello {props.name}!</div>;
}

export default Component;

使用以下代码在文档中展示这个组件：

# My Component

这是一个漂亮的组件：

<MyComponent name="bisheng" />

当你启动服务器并访问文档站点时，你将能够看到 Hello bisheng! 的输出。

结论

bisheng-peer-react 是一个非常有用的 npm 包。它可以帮助你快速创建漂亮的文档站点，并在其中展示 React 组件。使用它，你可以更轻松地记录你的工作，并与你的团队分享你的成果。希望这篇文章能够帮助到你入门并使用 bisheng-peer-react。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557ee81e8991b448d501f