如何用JSX构建风格独特的长尾词式Markup组件？

本文共计8123个文字，预计阅读时间需要33分钟。

在这里，我们共同从0开始搭建一个组件系统。首先，通过阅读《前端组件化基础知识》和《用JSX建立组件Parser（解析器）》两篇文章，了解到一个组件可以通过Markup和JavaScript访问的环境来构建。

这里我们一起从 0 开始搭建一个组件系统。首先通过上一篇《前端组件化基础知识》和《用 JSX 建立组件 Parser（解析器）》中知道，一个组件可以通过 Markup 和 JavaScript 访问的一个环境。

所以我们的第一步就是建立一个可以使用 markup 的环境。这里我们会学习使用 JSX 来建立 markup 的风格。这里我们基于与 React 一样的 JSX 去建立我们组件的风格。

---

JSX 环境搭建

JSX 在大家一般认知里面，它是属于 React 的一部分。其实 Facebook 公司会把 JSX 定义为一种纯粹的语言扩展。而这个 JSX 也是可以被其他组件体系去使用的。

甚至我们可以把它单独作为一种，快捷创建 HTML 标签的方式去使用。

建立项目

那么我们就从最基础的开始，首先我们需要创建一个新的项目目录：

mkdir jsx-component

初始化 NPM

当然在你们喜欢的目录下创建这个项目文件夹。建立好文件夹之后，我们就可以进入到这个目录里面并且初始化 npm。

npm init

执行以上命令之后，会出现一些项目配置的选项问题，如果有需要可以自行填写。不过我们也可以直接一直按回车，然后有需要的同学可以后面自己打开 package.json 自行修改。