内容介绍
本专题假设你已经具备了基本的 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: 撸一个响应式的纯CSS导航栏
你可以点击这里查看代码和效果：
- 只显示LOGO和展开图标
- 鼠标悬停【在直接的手机上，需要点击】在上面会展开菜单
- 展开的菜单将垂直布局
- 显示LOGO和水平布局的菜单
- 展开图标隐藏
话不多说，直接开撸：
<div class="bg-white shadow" id="navbar-cta">
<nav class="group container relative mx-auto flex items-center justify-between space-x-4 py-5 px-3" id="navbar">
<a href="https://axum.rs" class="flex items-center justify-start space-x-2" id="logo">
<img src="https://file.axum.rs/asset/logo.png" alt="LOGO" class="block w-6 object-cover" />
<h2>AXUM中文网</h2>
</a>
<ul id="navbar-menu" class="absolute right-1 top-[4.05rem] z-10 hidden w-full flex-col items-center justify-center bg-white px-3 shadow-md group-hover:flex md:static md:flex md:w-auto md:flex-row md:space-y-0 md:space-x-4 md:shadow-none">
<li class="px-3 py-1 md:p-0"><a href="#" class="block hover:text-red-600 hover:underline hover:decoration-red-600">首页</a></li>
<li class="px-3 py-1 md:p-0"><a href="#" class="block hover:text-red-600 hover:underline hover:decoration-red-600">专题</a></li>
<li class="px-3 py-1 md:p-0"><a href="#" class="block hover:text-red-600 hover:underline hover:decoration-red-600">标签</a></li>
<li class="px-3 py-1 md:p-0"><a href="#" class="block hover:text-red-600 hover:underline hover:decoration-red-600">文章</a></li>
<li class="px-3 py-1 md:p-0"><a href="#" class="block hover:text-red-600 hover:underline hover:decoration-red-600">关于</a></li>
</ul>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:hidden" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</nav>
</div>
group：启用分组功能container：使用容器类relative：相对定位mx-auto：水平居中flex items-center justify-between space-x-4：flex水平布局，子元素在水平方向两侧分布并垂直居中，水平间隙为4py-5 px-3：垂直内边距为5，水平内边距为3
- 绝对定位
- 右方1个单位
- 上方
4.05rem。tailwind 允许这种直接传递值的方式。当 tailwind 预置的值不能满足需求时，可以用这种方式
- 静态定位（top/left/right/bottom将失效）
- flex 布局
- flex 水平布局
- 垂直间隙为0
- 水平间隙为4
- 去除阴影