primer-react 是 GitHub 上的一个 npm 包，主要用于构建 React 组件和 UI 库。它提供了一些基础的 CSS 样式和 React 组件，方便我们在实践中快速创建优美的 UI 界面。本文将介绍如何使用 primer-react 包构建前端页面。
安装使用 primer-react
首先，在安装 primer-react 之前，需要使用 npm 安装 React 和 ReactDOM。具体的 npm 命令如下：
npm install react react-dom --save
然后，再使用 npm 安装 primer-react：
npm install primer-react --save
成功安装 primer-react 后，我们就可以在项目中引用相应的 React 组件了。
使用 primer-react 组件
primer-react 提供了很多常用的 React 组件，如按钮、表格、卡片等。使用这些组件可以避免我们手动编写样式和布局，提高开发效率。下面我们通过一个实例来介绍如何使用 primer-react 的组件。
实例说明
本实例中，我们将使用 primer-react 来实现一个登录界面。登录界面包含两个输入框和一个登录按钮，我们将使用 primer-react 的组件来创建这个页面。
步骤一：导入所需组件
首先，我们需要先导入所需的组件，如下：
import React from 'react';
import { Box, Heading, Text, TextInput, Button } from 'primer-react';在导入组件时，我们使用了解构赋值的方式，只导入了我们需要用到的组件。
步骤二：创建页面布局
接下来，我们需要定义登录页面的布局，可以使用 Box 组件来实现。我们将输入框和按钮放在一个 Box 组件内，如下：
-- -------------------- ---- -------
---- ------
-------- ------------ -------
-----
----------
---- --------------- --------------------------
---- ------
---------- ------------------- --
------
---- ------
---------- ---------------------- --
------
---- ------
------------ -----------
------
------
------在上面的代码中，我们使用了 Box 组件来实现页面的布局，其中 m、p、borderWidth 和 borderColor 等属性用于控制外边距、内边距、边框宽度和边框颜色。Heading 组件用于显示页面标题，TextInput 组件用于显示输入框，Button 组件用于显示登录按钮。
步骤三：设置页面样式
最后，我们需要为页面设置一些样式，来使其更加美观。我们可以在 Box 组件中使用 sx 属性来设置样式，如下：
-- -------------------- ---- -------
----
-----
------------- --
---------- -- --- --- ------- -- -- ------
---------------- ----------
--
-
---
------在上面的代码中，我们使用了 sx 属性来设置圆角、阴影和背景颜色等样式。
完整代码
最终的完整代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- -------- ----- ---------- ------ - ---- ---------------
-------- ----- -
------ -
---- ------
-------- ------------ -------
-----
----------
----
---------------
-------------------------
-----
------------- --
---------- -- --- --- ------- -- -- ------
---------------- ----------
---
---- ------
---------- ------------------- --
------
---- ------
---------- ---------------------- --
------
---- ------
------------ -----------
------
------
------
--
-
------ ------- ----结束语
通过本文的介绍，我们了解了如何使用 primer-react 包来构建前端页面。在实践中，我们可以使用 primer-react 的组件来快速创建复杂的 UI 界面，从而提高我们的开发效率。同时，对于初学者来说，本文也提供了一些实用的技巧和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f713b71a9b7065299ccbb34