如何在 React.js 中创建标题？

页眉是网站设计的重要元素。这是网站的第一印象。它提供了用户可能想要访问的网站其他区域的有用链接。在本文中，我们将使用 React.js 和 Material UI 创建一个正常运行的 Header。

方法：首先，我们将使用一些安装创建一个基本的 React 应用程序。我们将使用 Material-UI 制作带有一些样式的新 Header 组件。要创建 Header，我们将使用 Material UI 中的 App Bar，它将提供屏幕标题、导航和操作。此外，我们需要一个 ToolBar 来设置子组件的属性，使它们都水平对齐。然后我们将通过将新创建的 Header 导入其中来对我们的默认主页（即 App.js 文件）进行一些更改。现在让我们开始创建它。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

第 3 步：创建 React.js 应用程序后，使用以下命令安装 material-ui 模块。

npm install @material-ui/core
npm install @mui/icons-material
npm install @mui/material

项目结构：现在在名为“src”的文件夹中创建一个新文件Header.js 。我们的标头组件将驻留在此文件中。现在新的项目结构将如下所示：

更新的项目结构

第 3 步：现在我们将制作标题组件。我们将使用来自 Material UI 的 App Bar 组件。顶部的 App Bar 提供与当前屏幕相关的内容和操作。它用于品牌、屏幕标题、导航和操作。它可以转换为上下文操作栏或用作导航栏。 Material UI 中的 Tool Bar 不像其他 Material-UI 组件那样独立工作，它与 AppBar 一起工作。工具栏组件将属性设置为子组件，使它们全部水平对齐。

Header.js

import * as React from "react";
  
// importing material UI components
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
  
export default function Header() {
  return (
      
        
          {/*Inside the IconButton, we 
           can render various icons*/}
          
            {/*This is a simple Menu 
             Icon wrapped in Icon */}
            
          
          {/* The Typography component applies 
           default font weights and sizes */}
  
          
            GeeksforGeeks Header
          
          
        
      
  );
}

App.js

import React from "react";
import Header from "./Header";
  
function App() {
  return (
  
   // Using the newly created Header 
   // component in this main component
   
  );
}
export default App;

第四步：创建 Header 组件后，我们将其导入 App.js 并在 App.js 中进行如下更改。

应用程序.js

import React from "react";
import Header from "./Header";
  
function App() {
  return (
  
   // Using the newly created Header 
   // component in this main component
   
  );
}
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并访问 http://localhost:3000/，您将看到以下输出：