如何在React应用程序中使用PrimeReact
12月7日, 2021
React是关于组件的，这些组件帮助我们重复使用我们的JavaScript代码，一遍又一遍。它还可以帮助我们维护和更新页面。React可用于构建单页应用程序和用户界面。
PrimeReact就像CSS一样，可以在用户界面的造型中使用。但与CSS不同的是，PrimeReact对每个组件都有一个预定义的样式，可以在我们的React应用程序中使用。
内容表
- 导航
- 什么是PrimeReact
- 创建React应用程序
- 添加PrimeReact的依赖性
- 修改我们的React应用程序
- 创建一个导航组件
- 使我们的导航栏具有响应性
- 为我们的导航添加路线
前提条件
对于本教程，读者将需要。
- React.js的基本知识。
- 对npm有一点了解。
- 安装好visual studio代码和npm。
目标
- 在React.js应用程序中使用Prime React组件创建一个响应式的导航条。
- 在我们的项目中使用PrimeReact组件。
- 为PrimeReact组件添加路由。
让我们开始编码。
导航
在每个网站或多页面应用程序中，都有一个导航菜单，通常位于网站的顶部。这为访问者访问网站的各个页面提供了方向。它为网站提供了良好的用户体验，因为访问者可以轻松地访问网站的内容。
每个网站都必须有导航，除非该网站是一个静态网站。在本教程中，我们将学习如何使用PrimeReact组件来制作一个具有路由功能的响应式导航菜单。
什么是PrimeReact？
PrimeReact是一个用于React应用程序的UI组件库。PrimeReact有不同的主题、风格和图标的组件，可以导入到我们的React应用程序中使用。它是一个免费的开源库。
当创建一个React项目时，开发人员主要考虑的是项目的布局和用户界面。为React项目的特定组件设计样式可能很麻烦，也很耗时，但有了PrimeReact，我们就不必太担心样式问题了。
我们只需要导入我们想在项目中渲染的特定组件，PrimeReact就会处理这些样式。有时，我们渲染的组件可能不是我们想要的样式。PrimeReact允许我们修改我们项目中渲染的组件的样式和属性。
第1步 - 创建React应用程序
当创建一个React应用程序时，我们首先进入存储该应用程序的文件夹。要创建一个React应用程序，在终端或命令提示符中输入以下命令。
npx create-react-app my-prime
安装后，输入cd my-prime ，进入my-prime 文件夹。输入npm start ，启动开发服务器。在系统浏览器中的http://localhost:3000/ ，可以看到React网站。
第2步 - 添加PrimeReact依赖项
为了将PrimeReact的依赖性添加到我们的项目中，我们首先打开visual studio代码的终端。确保终端正在访问my-prime 文件夹。
输入npm install primereact primeicons --save ，然后按 "enter "来安装Prime react和prime icons。PrimeReact 组件的图标需要PrimeIcons 库，动画需要react-transition-group 。
输入npm install react-transition-group ，然后按 "回车键"，安装react-transition-group 。安装完毕后，我们再输入npm install react-router-dom ，然后按 "回车"。
如果我们安装的依赖项在package.json 文件中显示如下，那么我们的安装就成功了。
"dependencies": {
"primeicons": "^4.1.0",
"primereact": "^6.6.0",
"react-transition-group": "^4.4.2",
"react-router-dom": "^6.0.2"
},
第3步 - 修改我们的React应用程序
当我们创建一个react项目时，react有一些预定义的代码，我们需要修改。在你的浏览器中进入http://localhost:3000/ ，一个显示React标志的网站将被显示出来。
让我们通过在你的visual studio代码编辑器中编辑app.js 文件来修改网站代码，然后删除div 标签内的所有代码，除了import './App.css' 。
import React from 'react'; //for React
import './App.css' // for CSS
function App() {
return (
<div className="App">
</div>
);
}
export default App;
然后我们导入我们的Prime react主题和图标。
import "primereact/resources/themes/vela-blue/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";
上述由PrimeReact提供的CSS文件应该被添加到app.js 文件的顶部，以使primereact的图标、主题和样式在我们的浏览器中有效。
我们的app.js 文件应该是这样的。
import './App.css';
import "primereact/resources/themes/vela-blue/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";
function App() {
return (
<div className="App">
{/* code goes here */}
</div>
);
}
export default App;
第4步 - 创建一个导航组件
我们首先需要创建一个组件并将其导入到我们的app.js 。例如，在src 文件夹中，让我们创建一个单独的文件夹，称为components ，在那里我们将存储我们的导航代码。
在components 文件夹中，我们可以创建一个新文件，并将其命名为Nav.js 。然后，我们创建一个名为Navigation的React函数，在返回的括号内，我们使用HTML元素如div 标签、header 标签、nav 标签和ul 标签为浏览器创建一个导航条。
const Navigation = () => {
return(
<div>
<header>
<nav>
<ul></ul>
</nav>
</header>
</div>
)
}
export default Navigation;
在这之后，我们的Navigation函数应该被导入到我们的app.js 文件中，在我们的app.js 的div 内，我们添加我们的Navigation 函数，在浏览器上显示。
import Navigation from './component/Nav';
这应该是在我们的app.js 文件的顶部。在我们的app.js 文件的div标签内，我们添加我们的导航元素。
<div classname="App">
<Navigation />
</div>.
我们的app.js文件的截图。
可以添加CSS样式来改变预定义的样式。
第5步--使我们的导航栏具有响应性
在本教程中，我们将使用Menubar，这是PrimeReact为我们的导航提供的众多导航组件之一。在设计导航菜单的样式时，对小屏幕和大屏幕的样式都很重要。
有了Menubar 组件，我们不必对任何屏幕尺寸进行样式设计。我们可以编辑该组件，改变主题，并为我们的导航菜单添加图标。这使得我们的导航在所有的屏幕尺寸上都能响应，从而使我们的导航有更好的用户体验，并使其在移动设备上容易访问。
要在我们的项目中使用Menubar 组件，我们需要在我们的组件文件夹内的Nav.js 文件中导入它，然后在我们的nav 标签HTML元素中添加它，使它显示在我们的Navigation 函数中。
import { Menubar } from 'primereact/menubar';
const Navigation = () => {
return(
<div>
<header>
<nav>
<ul>
<Menubar />
</ul>
</nav>
</header>
</div>
)
}
export default Navigation;
如上图所示，Menubar 应该被添加在我们的Nav.js 文件的顶部。我们可以看到我们的Menubar被放置在一个ul 元素内，我们必须创建一个导航列表，它将在我们的Menubar中呈现。
我们可以在我们的Navigation 函数中创建这个列表，或者将其作为属性或道具导入。要呈现的列表必须存储在一个变量中，我们可以在这里调用我们想要的变量。
这将存储一个数组，里面嵌套着对象。在对象内，我们传入我们在导航上想要的值。然后我们将这些值分配给一个标签文本，这将存储这些值。
如果需要，PrimeReact允许我们为我们的值添加图标。在我们的导航中添加图标并不是必须的。图标有助于代表我们的值。我们的导航列表应该是这样的。在这里，我们可以随心所欲地调用变量和标签值。
const navlist = [
{label: 'Home', icon: 'pi pi-fw pi-home'},
{label: 'About', icon: 'pi pi-fw pi-file'},
{label: 'Contact', icon: 'pi pi-fw pi-phone'}
]
图标接收PrimeReact图标（pi），我们希望图标的位置，向前（pi-fw），以及图标的值（pi-home）。然后我们把我们的navlist 变量作为一个属性传递给Menubar 。
将持有navlist 的属性名称是一个模型，我们不能改变这个名称，如果我们这样做，我们的导航列表项目将不会被渲染到文档对象模型（DOM），我们上面的代码中的标签也是如此。
PrimeReact组件已经被编码为承载某些值，如果我们改变这些值，我们的代码将无法工作。模型在一个对象中接收变量，因为我们想在JSX中使用JavaScript值，并将其传递给Menubar，然后将变量渲染到我们的导航中。
我们的Nav.js 文件应该是这样的。
import { Menubar } from 'primereact/menubar';
const Navigation = () => {
const navlist = [
{ label: 'Home', icon: 'pi pi-fw pi-home'},
{ label: 'About', icon: 'pi pi-fw pi-file' },
{ label: 'Contact', icon: 'pi pi-fw pi-phone'}
];
return(
<div>
<header>
<nav>
<ul>
<Menubar
model={navlist}
/>
</ul>
</nav>
</header>
</div>
)
}
export default Navigation;
我们可以改变我们的PrimeReact组件的主题。PrimeReact给我们提供了许多主题可供选择，我们可以为我们的导航使用不同的主题。
它们会影响我们的Menubar的背景颜色和颜色。我们可以为我们的导航选择一个浅色主题或一个深色主题。
我们目前使用的是vela-blue 主题。它可以通过导航到我们的app.js 文件来改变，并在导入时将theme.css 编辑为所需的主题。
import "primereact/resources/themes/vela-blue/theme.css"; // edit vela-blue to change theme
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";
第6步 - 为我们的导航添加路由
在将我们的Menubar组件添加到导航中并在DOM上渲染后，如果我们点击任何渲染的navlist ，我们的网站将不会发生任何事情。统一资源定位器（URL）在点击时必须重定向到一个页面，但它没有。
Menubar 组件只向DOM渲染预定义的样式，但它没有路线，它不会为我们的网站导航，这是使用它的主要原因。为了使我们的导航对用户来说更容易，去他们点击的页面。
我们可以通过添加一个命令来解决这个问题，当点击我们的任何一个navlist 变量时，运行一个匿名函数。该函数将持有href ，我们将把所需的URL路径传递给它，但记住href ，主要用于HTML或React中的JavaScript语法扩展（JJSX）。
我们也可以通过windows使用href ，windows是一个DOM对象，通过使用它的一个名为location 的方法，其中包含一个href 的属性。为了通过窗口使用href ，我们将windows.location.href 赋给所需的路由，作为一个字符串。
const navlist = [
{label: 'Home', icon: 'pi pi-fw pi-home', command: () => {
window.location.href='/';
}},
{label: 'About', icon: 'pi pi-fw pi-calendar', command: () =>{
window.location.href='/about'
}},
{ label: 'Contact', icon: 'pi pi-fw pi-phone', command: () =>{
window.location.href='/contact'
}}
]
我们添加的代码，在点击href 路径时运行匿名函数，从而将我们的网站重定向到所点击的站点。/about 和/contact 没有 React 页面。我们将不得不手动创建它们。
在components 文件夹中，我们创建一个新的文件，并将其命名为About.js 。在About.js ，我们也创建一个React函数，就像我们在Nav.js 中所做的那样，称为About ，并将其导出为默认值，我们现在可以在这个组件中返回一些JSX。
让我们添加一个标题（h1），显示一些信息到DOM，如图所示。
const About = () => {
return(
<h1>This is the About page</h1>
)
}
export default About;
做完这些，在我们点击About ，在我们的Navigation ，我们需要将路由添加到组件中，并设置一个路径让它在DOM上显示，我们不能只是将它导入到我们的app.js 文件中。
为了给我们的关于组件添加路由，我们需要从react-router-dom中导入到我们的app.js 文件中。react-router-dom我们从BrowserRouter ，Routes ，和Route 。
如果不用Routes ，我们就不能使用Route ，它被包裹在BrowserRouter 。在Route 标签中，我们添加了两个属性，称为path 和element 。
path 接受我们希望组件被渲染的位置，element 接受我们希望渲染到DOM的组件，如图所示。
import './App.css';
import "primereact/resources/themes/vela-blue/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";
import Navigation from './component/Nav';
import { BrowserRouter, Routes, Route} from 'react-router-dom';
function App() {
return (
<div className="App">
<Navigation />
<BrowserRouter>
<Routes>
<Route/>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
然后，我们把我们的About 组件导入我们的app.js 文件，并把它作为一个属性传递给我们的Route，以便在指定的路径上渲染它。我们还可以为我们的导航中的Home 链接添加另一个Route ，但我们将只把路径传递给这个特定的路由。
现在，我们的App.js 文件应该看起来像这样。
import './App.css';
import "primereact/resources/themes/vela-blue/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";
import Navigation from './component/Nav';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import About from '/component/About';
function App() {
return (
<div className="App">
<Navigation />
<BrowserRouter>
<Routes>
<Route path='/about' element={<About/>}/>
<Route path="/" element={null} />
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
当About 在我们的导航上被点击时，上面的代码将我们的About.js 组件渲染到DOM中。而第二个Route 的元素是null ，因为我们想返回到我们的初始页面。我们可以对导航中的其他链接也这样做。
我们的app.js文件的屏幕截图。
从这个教程中，人们现在应该能够使用PrimeReact来制作一个具有路由功能的响应式导航栏。
总结
在本教程中，我们学习了什么。
- PrimeReact是什么以及它的用途。
- 如何在我们的应用程序中添加PrimeReact组件。
- 如何创建一个响应式的导航栏。
- 如何向我们的导航列表添加路线。
