MUI React - 编写一个简单的落地页

各位程序员朋友们好！

本文将介绍如何使用React MUI 库并编写一个简单的响应式落地页。该页面将完全使用 MUI 组件构建，不使用任何 HTML 元素。

Thanks for Reading!内容由App Generator提供

• 👉 MUI落地页- 示例在线演示
• 👉 MUI落地页- 源代码（所有组件）

以前React.js，构建 Web 应用程序可能是一项艰巨的任务。当时无法重用 Web 布局，也无法遵循 HTML 的 DRY（Don't Repeat Yourself，不要重复自己）原则。因此，我们编写了大量重复且难以理解的代码。

它是否React.js让构建 Web 应用程序变得更容易？让我们通过以下几个主题来了解一下：

• 👉什么是React
• 👉MUI引言 - 使用它的理由
• 👉MUI安装
• CRA👉 通过(create-react-app)生成项目
• 👉MUI使用makeStyles钩子进行样式设置
• 👉编码部分：Header，，，，HeroInformationContactFooter
• 👉 如何更改MUI字体
• 👉 介绍Open-SourceMUI 控制面板：Berry
• 👉 相关链接和资源（全部免费）

✨ 什么是 React

React.js 是一个 JavaScript 库，它允许你使用尽可能少的代码构建快速高效的 Web 应用程序。在 React.js 中，你可以将 Web 布局分解成组件——可重用的代码片段，这些片段会返回 HTML 元素。

它还允许我们将数据传递给这些组件，从而为网页创建动态内容。这些数据被称为 props。React.js 拥有优秀的文档，其中包含大量有用的资源，并且还有一个庞大的用户社区，他们乐于助人，帮助你高效学习。

New to React?请查看这份全面的React 入门指南。

✨ Material UI 库

Material UI是一个包含多个灵活、移动响应式且可用于生产环境的 React 组件的库。这些组件让您可以轻松创建精美的用户界面，并且您可以始终完全控制它们的外观和行为。

MUI 的文档由 2000 多名贡献者编写，对开发者友好，并为新用户提供令人兴奋的体验。

不过，在继续之前，让我们先来看看在 React.js 中使用 MUI 库的五个理由。

✨ MUI - 使用理由

MUI库之所以脱颖而出，是因为它提供了以下功能：

移动优先方法

MUI 鼓励在不同平台和屏幕尺寸上采用统一且用户友好的布局。它提供了多种辅助工具，帮助您构建移动友好的 Web 应用程序。MUI 为不同的屏幕尺寸提供了不同的断点，您也可以根据需要编辑默认屏幕尺寸。

更快的建造时间

MUI 拥有构建任何 Web 应用程序所需的所有 Web 组件，并且可以轻松集成到您的 Web 应用程序中。MUI 可以加快您的开发流程，让您更快地交付美观现代的 Web 应用程序。

优秀的文档

MUI 的文档非常清晰易懂。因此，您无需到其他地方查找所需功能的实现方法。每个 Web 组件、使用方法和代码示例都可以在文档中找到。

高度可定制

MUI 组件具有高度可定制性。您可以完全控制它们的外观和行为。MUI 允许您编写自定义 CSS 样式来编辑组件，或者传递文档中提到的某些属性。

精美的现成组件

MUI 为您提供美观且可直接用于生产环境的组件。只需复制粘贴代码，即可在几分钟内构建复杂的布局。

✨ MUI 安装和设置

要开始编写代码或使用本教程提供的免费示例，我们需要正确安装 NodeJS 并使其可在终端中访问。

New to NodeJS?请查看这份全面的Node.js 入门指南

一旦这些资源NodeJS tools可以访问，我们就可以继续编写示例代码了。以下是具体步骤：

• 使用 CRA 工具生成应用程序框架
• 安装 MUI 组件和 SVG 图标
• 使用像 VS Code 或 Sublime 这样的现代编辑器打开项目。
• 更新 App.js 文件，使其包含新安装的资源。

$ npx create-react-app reactmui
$ npm install @mui/material @emotion/react @emotion/styled
$ npm install @mui/icons-material 
$ npm start 

将会对其App.js进行编辑，以包含以下各节中编写的所有组件：

import CssBaseline from '@mui/material/CssBaseline';
function App() {
  return (
    <div>
      <CssBaseline />
      <Header />
      <Hero />
      <Section />
      <AboutUs />
      <Testimonial />
      <ContactUs />
      <Footer />
    </div>
  );
}

export default App;

该Web应用程序分为七个组件：header，，，，，，和。herosectionabout ustestimonialcontact usfooter

CSS Baseline该组件为 Web 应用程序添加了 MUI 提供的简单基础样式。它会移除所有浏览器中的边距，并将 box-sizing 属性设置为border-box。

✨ 造型MUI

对于初学者来说，MUI组件的样式设置一开始可能会让人感到困惑，因为它与传统的HTML或React应用程序的样式设置方式截然不同。但别担心，本文的目的就是为了清晰地解释这一点。

要编辑 MUI 提供的这些组件，您需要执行以下操作：

• 👉 安装mui/styles
• 👉 创建一个名为“新文件夹”的文件夹styles
• 👉 在目录中创建一个styles.js文件styles并添加代码：

// src/styles/styles.js

import { makeStyles } from '@mui/styles';

const styles = () => {
  return {
    //box: {
    //   backgroundColor: "red"
    // },
    // text: {
    //  color: "pink"
    //}
  };
};

const useStyles = makeStyles(styles);
export default useStyles; 

以上代码执行以下操作：

• makeStyles从……导入mui/styles。
• 调用makeStyles一个高阶函数，该函数接受一个子函数（另一个函数），该子函数返回一个包含classNames应用样式的对象。
• styles是我们的子功能，由makeStyles
• 定义useStyles一个自定义钩子，将上面创建的样式传递给makeStyles函数。useStyles简而言之，它帮助我们为后续章节中编写的所有新组件设置样式。

如何使用custom styling hook in MUI

让我们快速演示一下如何在 React 组件中应用上述样式。

import React from 'react';
import { Box, Typography } from '@mui/material';
import useStyles from '../styles/styles';         // <-- Import

const Component = () => {
  const classes = useStyles();

  return (
    <Box className={classes.box}>                 // <-- Use
      <Typography className={classes.text}>I am a text</Typography>
    </Box>
  );
};

export default Component; 

利用这种机制，我们可以借助 MUI 优美的架构，以简洁的语法将样式注入到每个组件中。

✨ 编写 MUI 头部组件

这里，头部组件就是我们的导航栏，但在 MUI 中构建导航栏与 HTML 有很大不同。在 MUI 中，导航栏被称为应用栏，它有不同的类型。我将使用Elevate App Bar.

头部组件- 源代码

GIF

相关代码提取自MUI 头部组件文件

<Box sx={{ marginBottom: '70px' }}>
      <ElevationScroll {..props}>
        <AppBar>
          <Toolbar className={classes.toolBar}>
            <Link href="#" underline="none">
              <Typography variant="h5" className={classes.logo}>
                MUI Sample
              </Typography>
            </Link>

              <Box>
              <IconButton
                size="large"
                edge="end"
                color="inherit"
                aria-label="menu"
                onClick={toggleDrawer('right', true)}
              >
                <MenuIcon className={classes.menuIcon} fontSize="" />
              </IconButton>

              <Drawer
                anchor="right"
                open={state['right']}
                onClose={toggleDrawer('right', false)}
              >
                {list('right')}
              </Drawer>
            </Box>

            {links.map((link) => (
               <Link href={link.url} key={link.id}>
                    <Typography>{link.route}</Typography>
                </Link>
              ))}
            </Box>}

          </Toolbar>
        </AppBar>
      </ElevationScroll>
    </Box>

上述（简化后的）代码执行以下操作：

• MUIApp Bar部分会在用户滚动页面时（当用户不在页面顶部时）提升导航栏。
• 使用这种类型的应用栏需要用标签包裹应用栏<ElevationScroll/>。
• Typography用于文本。它接受 variant 参数来指定是标题标签还是段落标签。box 类似于 HTML 中的 <code> 标签，它充当父元素。
• Link它类似于HTML 中的 <link> 标签。它可以在您的 Web 应用程序中创建指向内部和外部资源的超链接。
• 工具栏是MUI component包裹 AppBar 中所有元素的组件。
• 我还导入了useStyles我们在上一节中创建的钩子。这个钩子在组件内部声明，并传递给一个变量，这样const classes = useStyles()classes变量就变成了一个包含样式表中声明的所有类名的对象。

让我们编辑styles一下styles.js

const styles = () => {
  return {
    toolBar: {
      height: '10vh',
      display: 'flex',
      justifyContent: 'space-between',
      padding: '20px',
      backgroundColor: 'white',
    },
    logo: {
      color: 'blue',
      cursor: 'pointer',
    },
    link: {
      color: '#000',
    },
  };
};

const useStyles = makeStyles(styles);
export default useStyles; 

✨ MUI Hero 组件编码

本节介绍了网格布局。网格组件将屏幕划分为 12 个单元格，以响应式布局显示内容。

英雄组件- 源代码

与（之前的）头部组件相比，这段代码相当简单：

const Hero = () => {
  const classes = useStyles();

  return (
    <Box className={classes.heroBox}>
      <Grid container spacing={6} className={classes.gridContainer}>
        <Grid item xs={12} md={7}>
          <Typography variant="h3" className={classes.title}>
            Let s scale your business
          </Typography>
          <Typography variant="h6" className={classes.subtitle}>
            Hire professionals who [..truccated..] we are your best client.
          </Typography>
          <Button
            variant="contained"
            color="primary"
            sx={{ width: '200px', fontSize: '16px' }}
          >
            HIRE US
          </Button>
        </Grid>
        <Grid item xs={12} md={5}>
          <img src={myteam} alt="My Team" className={classes.largeImage} />
        </Grid>
      </Grid>
    </Box>
  );
};

export default Hero;

✨ 编码 MUI 部分组件

此组件显示一个包含三个网格项的网格容器。

章节组件- 源代码

该组件的源代码定义了由父MUI Grid组件管理的三个单元格。

    <Box sx={{ flexGrow: 1, minHeight: '400px' }}>
      <Grid container className={classes.sectionGridContainer}>
        {sectionItems.map((item) => (
          <Grid
            item
            xs={12}
            md={3.5}
            minHeight={300}
            key={item.id}
            className={classes.sectionGridItem}
          >
            {item.icon}
            <Typography>{item.sentence}</Typography>
          </Grid>
        ))}
      </Grid>
    </Box>

✨ 编写 MUI 联系组件

此组件实现了一个简单的表单，包含标题、三个输入字段和一个提交按钮。

联系表单组件- 源代码

以下是使用 MUI 实现的这个简单表单的代码：

<Box className={classes.formContainer}>

      <Typography variant="h4" className={classes.formHeading}>
        Contact Us
      </Typography>
      <Box
        className={classes.form}
        component="form"
        noValidate
        autoComplete="off"
      >
        <TextField
          label="Full Name"
          variant="outlined"
          fullWidth
          className={classes.inputField}
          value={firstName}
          onChange={(e) => setFirstName(e.target.value)}
        />

        <TextField
          label="Email"
          variant="outlined"
          fullWidth
          className={classes.inputField}
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />

        <TextareaAutosize
          aria-label="minimum height"
          minRows={6}
          placeholder="Enter a message"
          className={classes.textArea}
          spellCheck
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        />

        <Button
          variant="contained"
          type="submit"
          color="primary"
          sx={{ width: '200px', fontSize: '16px' }}
          onClick={submitForm}
        >
          Submit
        </Button>
      </Box>
    </Box>

✨ 编码 MUI 页脚

我们的 MUI 示例页面提供了一个简单的页脚，其中包含居中的文本，该文本基于Box、Typography和LinkMUI 组件精心制作而成。

页脚组件- 源代码

以下是 MUI 页脚组件的相关源代码

    <Box sx={{ flexGrow: 1 }} className={classes.footerContainer}>
      <Typography className={classes.footerText}>
        Provided by{' '}
        <Link href="https://appseed.us" underline="none">
          AppSeed
        </Link>
      </Typography>
      <Typography className={classes.footerDate}>
          Open-Source Sample - Buit with MUI
      </Typography>
    </Box>

✨ 如何更改 MUI 字体

Material UI 允许您使用任何您想要的字体。要更改所有 Material UI 组件的字体，请执行以下操作：

• 打开并从 MUI 核心App.js导入。createThemeThemeProvider
• 通过以下方式编辑font-family排版组件createTheme。

以下是我们的着陆页代码App.js，其中所有组件都使用了新字体样式：Poppins而不是默认字体Roboto。

const theme = createTheme({
  typography: {
    fontFamily: ['Poppins', 'sans-serif'].join(','),
  },
});

function App() {
  return (
    <>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Header />
        <Hero />
        <Section />
        <AboutUs />
        <Testimonial />
        <ContactUs />
        <Footer />
      </ThemeProvider>
    </>
  );
}

export default App; 

✨ 结论和免费资源

在本文中，我们使用各种 Material UI 组件构建了一个完整的网页。Material UI 提供了一套全面的 UI 工具，可用于创建现代 Web 应用程序。

👉 Material UI - 官方文档
👉开源 MUI 模板- 精选列表

凭借其简明易懂的文档，您可以轻松找到所需的网页布局，并在更短的时间内构建完整的 Web 应用程序。

✨ React Node JS Berry

Berry 是一款基于 Material-UI 构建的创意 React 控制面板。它旨在提供最佳用户体验，拥有高度可定制且功能丰富的页面。Berry 是一款颠覆性的 React 控制面板，在 Retina 显示屏或笔记本电脑上均采用简单直观的响应式设计。

• 👉 React Node JS Berry - 产品页面
• 👉 React Node JS Berry - 在线演示

该产品采用简单的JWT authentication流程：login/register/logout由开源Node JS API后端提供支持Passport Library。