JSX组件如何构建高效长尾词解析器？

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

在这里，我们一同从0+开始构建一个组件系统。首先，通过上一篇《前端组件化基础知识》了解到，一个组件可以通过Markup和JavaScript访问的环境。因此，我们的第一步是建立一个可访问的组件。

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

所以我们的第一步就是建立一个可以使用 markup 的环境。这里我们会学习使用两种建立 markup 的风格。

第一种是基于与 React 一样的 JSX 去建立我们组件的风格。第二种则是我们去建立基于类似 Vue 的这种，基于标记语言的 Parser 的一种风格。

JSX 环境搭建

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

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

建立项目

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

mkdir jsx-component

初始化 NPM

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

npm init

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