全栈：AXUM、React、NextJS 和 TailWindCSS

本专题假设你已经具备了基本的 HTML 5 、Javascript(ES6) 和 CSS 3 知识。本专题是为了补全 AXUM 全栈开发所需要的技术栈，而不是从零开始的前端课程，如果你还不具备以上知识，请通过其它途径学习完成之后，再来学习本专题。

本章将通过编程世界通用的“Hello World”程序，告诉你：创建 React 应用的几种方法、虚拟DOM、JSX以及将 React 挂载到真实 DOM 的步骤。

本章将讨论 React 的类式组件、函数式组件以及 React 两个最重要的属性：`state` 和 `props`。

本章将讨论 React 组件的常用生命周期。

本章讨论 React 的事件处理，以及表单处理时涉及两个策略：受控组件与非受控组件。

本章将讨论 React(JSX) 的条件判断和循环。

本章我们将正式开启 React 组件之路。虽然我们之前章节的都叫组件，但整个应用只有一个组件，略显单薄。同时，我们还将讨论组件之间如何进行通讯。

本章将讨论 React 的路由：通过路由，你可以制作出“多页面”的系统。

本章将通过一个非常典型的案例来讨论 React 的状态共享：只有登录用户才能看到某些内容。早期的 React 完全依靠其生态中的 redux 等第三方库来实现状态共享；现在 React 提供了官方的 `Context` 来实现这一目的。

经过紧张的学习，React 课程终于暂告一个段落了。本章将是一个相对轻松的内容，我们一起探讨一下 React 应用的 SEO 以及为什么需要服务端渲染，同时对 React 课程做个简单的小结。

NextJS 是一个 React 框架，它提供了很多有用的功能把 React 的力量发挥地淋漓尽致。本章我们将开始 NextJS 之旅，首先自然是安装它，然后来一个「你好，NextJS」

趁你现在对我们刚刚讨论的有关 React 和 SEO 的问题还保持有较强的印象，我们先来讨论 NextJS 是如何利用多种渲染模式来应用 SEO 挑战的。

NextJS 既然是 React 的框架，自然提供了一些内置组件来扩展 React。本章将介绍几个常用的 NextJS 内置组件，同时也将介绍 NextJS 的路由系统。

本章我们将使用 NextJS 开发一个小型的博客系统，你将学习到如何从远程服务器获取数据以及数据过滤、NextJS 常用组件的用法、NextJS 的自动路由等功能。

TailwindCSS 是一款响应式的、移动设备优先的 CSS 工具类框架。本章对响应式布局、移动设备优先、断点等基本概念进行简要说明；并讨论几种安装 tailwind 的方式。

本章通过两个小示例来体验一下 tailwind 的魔力。

Tailwind 定义了一系列变量，比如颜色、大小、间距等。本章将介绍 tailwind 的一些默认设置。

本章将带你使用 tailwind 撸一个按钮

本章我们将讨论使用 `flex` 和 `grid` 进行响应式布局，以及为什么不建议再使用 `float` 进行布局。

本章将使用 tailwind 实现一个没有任何 Javscript 代码的纯 CSS 的下拉框，把应用到导航栏、菜单栏时，也被称为下拉菜单。同时我们将讨论如何在 tailwind 中使用图标，包括图标的进化史：从字体文件到SVG。

本章我们将使用 tailwind 撸一个报价卡片。

本章将使用 tailwind 撸一个响应式的、纯 CSS 的导航栏。

本章将介绍如何将 Tailwind 集成到 React 或 NextJS 项目中。

本章通过将之前撸的按钮改成 NextJS 版，进而讨论 Tailwind 的复用原则。

本章将讨论如何配置 tailwind，以及几个 tailwind 官方插件。

本章我们使用 tailwind 将之前课程中 NextJS 迷你博客改造为响应式的布局。