内容介绍
本专题假设你已经具备了基本的 HTML 5 、Javascript(ES6) 和 CSS 3 知识。本专题是为了补全 AXUM 全栈开发所需要的技术栈,而不是从零开始的前端课程,如果你还不具备以上知识,请通过其它途径学习完成之后,再来学习本专题。React: 简介与安装
本章将通过编程世界通用的“Hello World”程序,告诉你:创建 React 应用的几种方法、虚拟DOM、JSX以及将 React 挂载到真实 DOM 的步骤。- 支持试读
React:类式组件、函数式组件及state和props
本章将讨论 React 的类式组件、函数式组件以及 React 两个最重要的属性:`state` 和 `props`。 React: 组件的生命周期
本章将讨论 React 组件的常用生命周期。- 支持试读
React: 事件处理、表单处理及受控组件与非受控组件
本章讨论 React 的事件处理,以及表单处理时涉及两个策略:受控组件与非受控组件。 React: 流程控制与key
本章将讨论 React(JSX) 的条件判断和循环。React: 自定义组件及组件通讯
本章我们将正式开启 React 组件之路。虽然我们之前章节的都叫组件,但整个应用只有一个组件,略显单薄。同时,我们还将讨论组件之间如何进行通讯。React: 路由
本章将讨论 React 的路由:通过路由,你可以制作出“多页面”的系统。React: 状态共享
本章将通过一个非常典型的案例来讨论 React 的状态共享:只有登录用户才能看到某些内容。早期的 React 完全依靠其生态中的 redux 等第三方库来实现状态共享;现在 React 提供了官方的 `Context` 来实现这一目的。React: SEO挑战、服务端渲染及本地存储
经过紧张的学习,React 课程终于暂告一个段落了。本章将是一个相对轻松的内容,我们一起探讨一下 React 应用的 SEO 以及为什么需要服务端渲染,同时对 React 课程做个简单的小结。NextJS: 简介与安装
NextJS 是一个 React 框架,它提供了很多有用的功能把 React 的力量发挥地淋漓尽致。本章我们将开始 NextJS 之旅,首先自然是安装它,然后来一个「你好,NextJS」NextJS: 渲染模式和数据获取
趁你现在对我们刚刚讨论的有关 React 和 SEO 的问题还保持有较强的印象,我们先来讨论 NextJS 是如何利用多种渲染模式来应用 SEO 挑战的。NextJS: 内置组件及自动路由
NextJS 既然是 React 的框架,自然提供了一些内置组件来扩展 React。本章将介绍几个常用的 NextJS 内置组件,同时也将介绍 NextJS 的路由系统。NextJS: 开发博客系统
本章我们将使用 NextJS 开发一个小型的博客系统,你将学习到如何从远程服务器获取数据以及数据过滤、NextJS 常用组件的用法、NextJS 的自动路由等功能。Tailwind:简介与响应式设计的基本原则
TailwindCSS 是一款响应式的、移动设备优先的 CSS 工具类框架。本章对响应式布局、移动设备优先、断点等基本概念进行简要说明;并讨论几种安装 tailwind 的方式。Tailwind: 通过小示例体验它
本章通过两个小示例来体验一下 tailwind 的魔力。Tailwind: 默认配置
Tailwind 定义了一系列变量,比如颜色、大小、间距等。本章将介绍 tailwind 的一些默认设置。Tailwind: 撸一个按钮
本章将带你使用 tailwind 撸一个按钮Tailwind: 使用 flex 和 grid 进行响应式布局
本章我们将讨论使用 `flex` 和 `grid` 进行响应式布局,以及为什么不建议再使用 `float` 进行布局。- 支持试读
Tailwind: 撸一个带图标和动画效果的下拉框
本章将使用 tailwind 实现一个没有任何 Javscript 代码的纯 CSS 的下拉框,把应用到导航栏、菜单栏时,也被称为下拉菜单。同时我们将讨论如何在 tailwind 中使用图标,包括图标的进化史:从字体文件到SVG。 Tailwind: 撸一个报价卡片
本章我们将使用 tailwind 撸一个报价卡片。Tailwind: 撸一个响应式的纯CSS导航栏
本章将使用 tailwind 撸一个响应式的、纯 CSS 的导航栏。Tailwind: 集成到React/NextJS
本章将介绍如何将 Tailwind 集成到 React 或 NextJS 项目中。Tailwind: 复用
本章通过将之前撸的按钮改成 NextJS 版,进而讨论 Tailwind 的复用原则。Tailwind: 配置和插件
本章将讨论如何配置 tailwind,以及几个 tailwind 官方插件。Tailwind: 制作响应式博客
本章我们使用 tailwind 将之前课程中 NextJS 迷你博客改造为响应式的布局。
Tailwind: 复用
本章通过将之前撸的按钮改成 NextJS 版,进而讨论 Tailwind 的复用原则。
先来回顾一下我们之前撸的按钮:
<button class="bg-blue-600 text-gray-50 px-6 py-2 rounded shadow hover:bg-blue-700 hover:-translate-y-1 hover:shadow-md transition-all duration-500">点我</button>
Tailwind 的复用方式
使用 CSS 复用
使用 CSS 复用可能是很多人第一想法,毕竟像上面那个按钮那样,它的 class
属性太长了。我们可以将其抽取成一个 .btn
:
<button class="btn">点我</button>
相应的,在 CSS 文件里(比如 nextjs 的 styles/globals.css
)定义这个 .btn
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn {
@apply bg-blue-600 text-gray-50 px-6 py-2 rounded shadow hover:bg-blue-700 hover:-translate-y-1 hover:shadow-md transition-all duration-500;
}
}
@tailwind
是 Tailwind 定义的,用于引用其预定义的模块@layer
指定我们自定义的 CSS 隶属于哪个模块。很显然,因为我们是要定义一个按钮,所以它是属于components
@apply
允许在我们自定义的 CSS 里直接使用 Tailwind 预定义的 CSS 类
Tailwind 并不推荐通过 CSS 复用,而是通过下文说的,封装成React组件进行复用。但是,有时候我们避免不了要定义一些辅助性的样式,这时就可以按上面的方法进行定义。
本小节代码:axum-rs-nextjs-with-tailwind-btn-css
使用 React/NextJS 的组件进行复用
首先,我们创建一个 Button
组件:
// components/Button.jsx
export default function Button({ children }) {
return (
<button className="bg-blue-600 text-gray-50 px-6 py-2 rounded shadow hover:bg-blue-700 hover:-translate-y-1 hover:shadow-md transition-all duration-500">
{children}
</button>
);
}
然后就可以使用它了:
本小节代码:axum-rs-nextjs-with-tailwind-btn-1
复用原则
通过 React/NextJS/Vue 的组件进行复用 Tailwind。当需要一些辅助性的样式时,可以通过 CSS 进行定义。
扩展这个按钮组件
目前我们这个按钮组件只有一种蓝色,在实际项目中需要多种颜色,我们可以通过增加 color
来接收需要的颜色:
<Button>蓝色按钮</Button>
<Button color="red">红色按钮</Button>
<Button color="gray">灰色按钮</Button>
然后你可能在 Button
组件里这样写:
export default function Button({ children,color }) {
return (
<button className={`bg-${color}-600 text-gray-50 px-6 py-2 rounded shadow hover:bg-${color}-700 hover:-translate-y-1 hover:shadow-md transition-all duration-500`}>
{children}
</button>
);
}
这是一个严重的错误!
不要通过变量值来拼接 Tailwind 的类名
上面例子中,通过变量 color
的值,直接拼接了两个 tailwind 类:bg-${color}-600
和hover:bg-${color}-700
。这是行不通的!由于 tailwind 的体积非常大,所以利用 PostCSS 进行处理:只打包项目中真实用到的 tailwind 类,这样就能显著地减少项目的体积。
PostCSS 是按 tailwind 的类名进行处理的,它并不会处理 bg-${color}-600
这样的 JS 表达式,而是把它当成一个字符串,显然我们并没有定义 .bg-${color}-600
这样的 CSS 类,所以最终结果就是样式丢失。
而是通过JS的条件判断给定完整的 Tailwind 的类名
为了更具合理性,我们把上面说的 color
属性改为 type
属性:
然后实现 Button
组件:
- 针对不同的
type
设置不同的颜色 - 把具体颜色和其它 CSS 类组成完整的列表
- 将这个列表传递给
<button>
元素
你或许会有疑问:
- 不是说 JSX 里只能用表达式吗,这里怎么跑出来了
switch
语句- 我们说的 JSX 是指具体的 JSX 语句,不是指
*.jsx
文件。 - 在
<button className={classList}>{children}</button>
里,只能用 JS 表达式,因为它是 JSX 语句;而在其它地方是 JS 环境,自然可以用包括语句在内的任何 JS 语法
- 我们说的 JSX 是指具体的 JSX 语句,不是指
classList
不也是在拼接吗- 它拼接的是完整的列表,里面的每一项都是完整的 CSS 类名
- 我们说的是不要拼接 CSS 类名
- 我们说的 JSX 是指具体的 JSX 语句,不是指
*.jsx
文件。 - 在
<button className={classList}>{children}</button>
里,只能用 JS 表达式,因为它是 JSX 语句;而在其它地方是 JS 环境,自然可以用包括语句在内的任何 JS 语法
- 它拼接的是完整的列表,里面的每一项都是完整的 CSS 类名
- 我们说的是不要拼接 CSS 类名