用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 计算机
说明
欢迎来到#1 文档推荐的学习 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 网格系统完美对齐复杂的布局
- 从 Adobe 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 开发人员正在寻找一种更简单、更快速的方式来启动和运行干净、一致设计的应用程序
TheItzy » 用Material-UI和ReactJS实现高保真设计 | Implement High Fidelity Designs with Material-UI and ReactJS