在React中组合布局
Composing Layouts in React
在本课程中,我们将向您展示如何通过组合一些基本布局原语来在 React 中构建复杂的布局。在此过程中,您将学习现代 CSS 布局工具,例如 Normal Flow、Flexbox 和 Grid。
课程大纲
-
构建布局意味着什么以及为什么应该这样做
-
如何在我们的 React 组件中应用封装 CSS 的原则
-
每个开发人员都应该了解的基本布局原语
CSS 布局已经发展成为一套强大的工具,可以完成一些奇妙的现代布局。问题是,我们仍然将 CSS 教授为通过使用“技巧”来“破解”在一起的东西,以获得我们想要的网页布局。像这样学习 CSS 通常会引导我们走两条路之一:我们要么使用 CSS 的“看看什么粘住”方法构建脆弱的页面布局,要么我们放弃并声明 CSS 太棘手并引入 X 列网格系统,例如推特引导程序。
在 CSS 中创建页面布局并不一定很复杂。就像您如何仅使用一小部分词汇组合来进行日常演讲一样,您可以通过以独特的方式组合简单的低级布局基元来实现复杂的布局。
在本课程中,您将学习基本的布局基元,您可以使用它们来构建许多更复杂的布局。您还将学习如何应用“封装 CSS”的原理来扩展这些基元以及创建自定义布局基元。为此,我们将使用上述原则重新创建许多在野外发现的布局。
本课程不需要广泛的 CSS 知识。它假设您对 CSS 盒模型、CSS 特异性、CSS 选择器和 CSS 大小调整单位有基本的了解。尽管您可以将本课程中的原理应用于任何现代 Web 框架(包括非框架开发),但本课程将使用 React 并假设您对 React、JSX 和 React hooks 有基本的了解。
在 React 中组合布局适合希望将布局技能提升到新水平的新手和经验丰富的开发人员。本课程将教您构建现代 Web 布局所需的实用技能,而无需依赖繁重的 CSS 框架。与单独教授每个布局属性的课程和博客文章不同,我们的产品教授实用的布局模式,您可以每天在解决布局挑战时使用这些模式。
评论(0)