使用 Material-UI 和 ReactJS 实现高保真设计

Implement High Fidelity Designs with Material-UI and ReactJS

弥合设计与开发之间的差距!使用 Material-UI/React 分解详细设计并使它们栩栩如生。

你将会学到的

  • 使用 Material-UI 从头开始​​创建设计精美的生产应用程序
  • 使用 Material-UI 的响应式设计系统构建在每个屏幕上看起来都很完美的应用程序
  • 改进 UX/UI 设计直觉并查看实​​际概念
  • React JS 中的搜索引擎优化
  • 从 create-react-app 迁移到 Next JS
  • 在 Firebase 中使用无服务器函数
  • 使用 react-lottie 导出并高效集成动画
  • 在 React JS 中使用 Google Analytics 收集数据和跟踪事件
  • 确保跨浏览器支持您在 Material-UI 中的样式
  • 部署生产 Material-UI/React JS 应用程序

要求

  • 熟悉 React JS——这是一门中级课程!
  • Mac 或 Windows 计算机

说明

欢迎来到排名第一的文档推荐学习 Material-UI 的付费资源!

35 小时200 多场讲座中,我将教您使用自 React 以来我学到的最有用的工具——Material-UI 来构建精心设计的应用程序的所有知识!

通过获得构建专业设计的应用程序的信心,将您的 Web 开发技能提升到一个全新的水平,并使您从普通的 React 开发人员中脱颖而出!

在学习 React 之后,我想很多开发者都会遇到一个共同的问题——实际构建自己的项目的最佳实践是什么!?您可能在脑海中有一个非常酷的应用程序或网站的想法,但感觉您不知道如何使用 React 来创建它。您是否应该从头开始构建每个小组件和功能?当然不!学习让 Material-UI 使用其全面的可定制组件库为您完成繁重的工作,该组件库具有集成的样式、主题、网格和响应式设计系统。

您在学习 React 时学习的大部分课程都侧重于教授您理解和构建 React 应用程序所需的核心概念和基本语法/结构。这通常是通过构建几个小项目来完成的,每个小项目都围绕一个特定的概念,或者通过构建一个大项目并在进行时合并每个概念。像这样学习很棒,而且对于理解这门学科绝对必要。

然而,我注意到由于关注底层概念和功能,大多数设计和布局并不是特别有趣!无论如何,这些设计都不是坏的——这不是纯 React 课程的重点,所以这不是问题——但它们通常不是你会给付费客户的东西,所以这确实留下了当你开始自己工作时,会有一点差距。这正是我开设这门课程的原因!

我们将仅基于设计文件从头开始构建两个完整的项目——包括我自己的实际生产网站!

我将向您介绍我在构建第一个生产应用程序时经历的学习过程——从以空白屏幕开始项目到部署完全响应式网站的所有过程。我真正想要强调的是在 Material-UI 中思考结构化布局的方式。我们将首先查看我们将要构建的设计的屏幕截图,并直观地分解实现每种外观所需的网格设置,以及相应的代码片段!然后我们实际上跳入代码编辑器以将其付诸实践。

在我们的项目中使用每个 Material-UI 组件之前,我们还将阅读它的文档,以便您熟悉所有不同的功能,而不仅仅是我们使用的功能!每个组件都非常灵活,本课程的目标之一是让您足够熟悉整个当前生态系统,以便为了解未来的任何更新做好准备。

构建生产应用程序的一个关键部分是确保您的样式和功能不仅适用于您的系统,而且对任何环境都具有灵活性和响应性。这就是我练习响应式设计实践的原因,这样您不仅会了解要牢记的概念,还会了解如何使用 Material-UI 实际实现它们,并在最大、最小以及介于两者之间的每个屏幕上获得完美的样式。这有望成为第二天性,我们都将在网络上享受更优化的用户体验。

我们还将涵盖额外的主题,例如 React 中的 SEO、将我们的项目切换到 Next.js 以及这样做的好处、连接 Google Analytics 以开始制定数据驱动的决策、集成来自 After Effects 的动画等等!

课程内容包括:

  • 使用 create-react-app、React Router 和 Material-UI设置一个新项目
  • 对几乎每个 Material-UI 组件的文档进行指导解释,然后在我们的项目中实现它们
  • 不同的图像优化策略
  • 通过掌握 Material-UI 的集中式样式系统为您的应用程序创建主题
  • 学习如何使用响应式设计来确保您的应用程序在任何屏幕尺寸和方向上看起来都很完美!
  • 使用Material-UI 网格系统完美对齐复杂的布局
  • 从 Adob​​e After Effects导出动画并使用 react-lottie 高效地将它们导入 React 应用程序
  • 利用Google Firebase Cloud Functions的无服务器功能
  • 通过 Node.js 发送电子邮件
  • 在 React 中发出网络请求,同时显示反馈,例如使用 Material-UI加载微调器
  • React 应用程序中的搜索引擎优化 (SEO)
  • 将项目从 create-react-app 迁移到Next.js以及原因
  • 跨浏览器测试和支持
  • 部署 Next.js 项目并添加自定义域名——用于两个不同的托管平台
  • 结合Google Analytics来收集有关谁在与您的应用程序交互以及他们在做什么的数据
  • 构建自定义组织功能以控制表格中显示的数据,包括搜索、过滤、删除和撤消

除了可以终生访问超过35 小时 的内容外,您还可以通过主动问答轻松获得支持。

您不会有任何损失——本课程提供30 天退款保证,以防您不完全满意!

应对挑战,模糊设计和开发之间的界限,并学习创建您设想的项目。

此课程面向哪些人:

  • React 开发人员希望弥合设计和开发之间的差距。
  • React 开发人员,他们觉得自己了解 React,但在构建精美的网站之前还需要学习更多。
  • 拥有出色设计但在实践中难以完美实现它们的 React 开发人员。
  • 希望能够构建交给他们的任何网站设计的 React 开发人员。
  • 想要掌握响应式设计的 React 开发者
  • 希望更好地理解 UX/UI 设计原则的 React 开发人员
  • React 开发人员正在寻找一种更简单、更快速的方式来启动和运行干净、设计一致的应用程序
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。