MDX用于在降价文档中加载、解析和呈现JSX。在本教程中，您将学习如何使用带React的Markdown来构建项目文档应用程序。如果您想直接研究代码，请查看这个GitHub存储库。"MDX结合了降价文件的可读性和JSX的表现力。"在推特上留言什么是MDX？MDX结合了降价文件的可读性和JSX的表现力。它是一种允许您在降价文档中无缝使用JSX的格式。MDX速度快，没有运行时编译，提供了可定制的布局，可以轻松地插入到现有项目中，并且可以导入组件（如交互式图表）和导出元数据。我们要建造什么有几个框架和项目用于为开放或封闭源代码软件建立文档网站。我们将使用MDX为一个虚构的JavaScript框架JollofJS构建一个文档应用程序，而不是为我们的文档设置任何项目。一旦应用程序功能完成，我们将使用Auth0保护它。入门首先，创建一个React应用程序。为了简化这一点，可以使用Facebook的create react app开源软件。#全局安装npm安装-g创建react应用程序在计算机上安装完create react app后，创建一个react app，如下所示：创建react app jollofjs doc另一个选择是通过npx创建一个新的React应用程序：npx创建react app jollofjs doc注意：确保您的系统上安装了node version>=v8.5，并且npx附带npm5.2+及更高版本。继续更改和新的工作目录，jollofjs doc:cd jollofjs文件现在，安装react应用程序重新布线：npm install react app rewired--保存开发使用react（react）创建react脚本时无需使用react和react。创建配置-覆盖.js在根目录中创建文件，并将以下代码添加到其中：const{getBabelLoader}=require（'react-app-rewired'）；模块.导出=（配置，环境）=>{const babelLoader=获取babelLoader(config.module.rules配置模块);config.module.rules配置模块.map（规则=>{如果（类型规则.测试!=='未定义'| |类型规则之一==='未定义'）{退货规则}规则.oneOf.unshift({测试：/\.mdx$/，使用：[{装载机：babelLoader.loader.loader,选项：babelLoader.options},"@mdx js/loader"]});退货规则});返回配置};不要太担心这个文件的内容。它是一个利用Babel加载多个包和插件的文件，比如mdxjs/loader和.mdx文件。继续安装以下软件包：npm安装节点sass chokidar@mdx js/loader@mdx js/mdx npm run all react router react router dom--保存@mdx js/loader:mdx的Webpack加载器。@mdx js/mdx:mdx实现，用于解析mdx文件。节点sass chokidar：用于监视scs并将其转换为css文件。npm run all：一个CLI工具，用于并行或顺序运行多个npm脚本。react router和react router dom：应用程序内路由的包。安装完成后，打开包.json在根目录中更改现有调用以在npm脚本中响应脚本..."脚本"：{"build css"："节点sass chokidar src/-o src/"，"watch css"："npm运行构建css&&node sass chokidar src/-o src/--watch--recursive"，"start js"："react app rewired start"，"start"："npm run all-p观察css start js"，"build js"："react app rewired build"，"build"："npm运行所有build css build js"，}现在，使用npmstart首次运行该应用程序，以确保软件包安装正确并且配置正常。让我们创建组件。创建React组件组件允许我们将UI分割成可重用的、独立的部分。现在，让我们继续创建以下目录：mkdir src/Page src/Header src/Nav src/GuardedRoute src/markdownmarkdown目录将包含包含我们的文档页面的所有markdown文件。要轻松获取.mdx文件，请执行以下过程：克隆mdx教程存储库。解压缩文件夹。从下载文件夹中的src/markdown复制文件。将复制的文件粘贴到项目的src/markdown文件夹中。收割台组件在src/Header目录中，创建页眉.js归档并添加以下内容：src/标题/页眉.js从"React"导入React；从"react router dom"导入{Link，withRouter}；函数头（道具）{返回(JollofJS文档应用程序登录);}使用路由器导出默认值（标头）；Header组件包含Sign-In按钮，当我们稍后在教程中添加身份验证时，它将包含Sign out按钮。让我们创建页面组件。这是处理降价文件处理的主要组件。页面组件在src/Page目录中，创建两个文件，第js页以及样式.scss按如下方式归档并添加代码：src/页码/第js页导入React，{Component}来自'React'；从"./Nav/Nav"导入Nav；导入'/样式表';类页扩展组件{建造师（道具）{超级（道具）；这个州= {组件：""，页码：23/46这个。道具。匹配.参数页}}异步添加组件（名称）{导入（`../markdown/${name}.mdx`）。然后（组件=>此设置状态({组件：组件.默认值})).catch（（）=>{此设置状态({组件：""})});}静态大写（文本）{返回文本.substr（0，1）.toUpperCase（）+文本.substr（1） ；}异步组件didmount（）{等待this.addComponent(页码大写(此.state.page));}async componentDidUpdate（prevProps，prevState）{如果(上一页!== 此.state.page) {等待this.addComponent(页码大写(此.state.page));}}静态getDerivedStateFromProps（nextProps，prevState）{如果(nextProps.match.params.页面！== 上一页) {返回{页码：23/46nextProps.match.params.页}}else返回null；}渲染（）{常数{Component}=这个州;返回(