关键词：
新的文档采用了全新的架构 next.js + Tailwind CSS ,改版后的文档界面有种焕然一新的感觉，支持暗黑模式，我们可以在线学习，并且写代码，采用了这种所见即所得的形式，大大降低了学习者的成本，我也被这种形式所深深吸引，那么这种所见即所得的形式是如何实现的呢？
git clone 并且拷贝 beta 目录下的内容这里面有 yarn.lock 文件，跟绝大多数 next 项目一样 yarn install 之后，运行 yarn dev 就可以运行开发环境
启动速度非常快，仅仅 3.3s， 打开 next.js 会再次编译，大概 是不支持 Markdown 的，我们需要让 next.js 支持 Markdown， 我们打开 next.js 的配置文件 next.config.js,
(process.env.ANALYZE)
BundleAnalyzerPlugin = config.plugins.push(
BundleAnalyzerPlugin(
? : )
);
config.module.rules.push(
use: [
options.defaultLoaders.babel,
remarkPlugins,
,
,
path.join(__dirname, ],
);
config;
,
首先是单独安装了 webpack-bundle-analyzer 这个是打包分享插件，通过 ANALYZE=true next build 就可以生成分析包含哪些模块包的网页
这里面还加了一个自定义 loader
( callback = content, data = fm(src);
pageParentDir = path
.dirname(path.relative( .split(path.sep)
.shift();
layoutMap =
;
layout = layoutMap[pageParentDir] || code =
+ content;
callback(让 markdown 支持 jsx，我们一起来看看如何使用React ReactDom Post Heading, Table components =
</>,
React ReactDom Post Heading, Table MDXProvider components =
< </>
</ 官网，非常酷炫的效果映入眼帘简单几个配置就可以渲染出在线代码编辑器
customSetup=
dependencies:
"react-markdown": "latest"
,
files:
"/App.js": `import ReactMarkdown from \'react-markdown\'
export default function App()
return (
<ReactMarkdown>
# Hello, *world*!
</ReactMarkdown>
)
`
/>;
1、React 新文档的架构我很喜欢，代码和目录也非常清晰，非常适合阅读
2、我们一些组件库文档是否可以往next架构迁移？
MDX: https://mdxjs.com/docs/using-mdx/#mdx-provider
1.如果觉得这篇文章还不错，来个分享、点赞、在看三连吧，让更多的人也看到～
2.关注公众号前端森林，定期为你推送新鲜干货好文。
3.特殊阶段，带好口罩，做好个人防护。
react官方文档终于更新了！(代码片段)
React一直被吐槽官方文档对新手不友好，而且自从v16.8出现Hooks后，Hooks逐渐成为React主要发展方向，新特性都会基于Hooks开发。但是当前官方文档还是基于classcomponent讲解。所以从去年10月开始，React团队的「RachelNabo... 查看详情
基于react开发了一个markdown文档站点生成工具(代码片段)
CreateReactDoc是一个使用React的markdown文档站点生成工具。就像create-react-app一样，开发者可以使用CreateReactDoc来开发、部署markdown站点或者博客而不用关心站点环境配置信息。特性零配置书写markdown文档站点。markdown文档支持懒加载以... 查看详情
谈谈spring中都用到了哪些设计模式？(代码片段)
...t创建bean对象。两者对比：BeanFactory：延迟注入(使用到某个bean的时候才会注入),相比于BeanFactory来说会占用更少的内存，程序启动速度更快。ApplicationContext：容器启动的时候，不管你 查看详情
玩转react-创造一个新的html标签(代码片段)
...avaScript的扩展语法JSX，相信大家已经知道了，所谓的创造新的HTML的能力，其实就是以极其类似HTML的JSX语法来使用 查看详情
面试官:“谈谈spring中都用到了哪些设计模式？”(代码片段)
JDK中用到了那些设计模式?Spring中用到了那些设计模式?这两个问题，在面试中比较常见。我在网上搜索了一下关于Spring中设计模式的讲解几乎都是千篇一律，而且大部分都年代久远。所以，花了几天时间自己总结了一下，由... 查看详情
dubbo用到哪些设计模式？(代码片段)
Dubbo框架在初始化和通信过程中使用了多种设计模式，可灵活控制类加载、权限控制等功能。工厂模式Provider在export服务时，会调用ServiceConfig的export方法。ServiceConfig中有个字段：privatestaticfinalProtocolprotocol=ExtensionLoa... 查看详情
实战！工作中常用到哪些设计模式(代码片段)
...聊日常工作中，我都使用过哪些设计模式。工作中常用到哪些设计模式 1.策略模式1.1业务场景假设有这样的业务场景，大数据系统把文件推送 查看详情
实战！工作中常用到哪些设计模式(代码片段)
...聊日常工作中，我都使用过哪些设计模式。工作中常用到哪些设计模式 1.策略模式1.1业务场景假设有这样的业务场景，大数据系统把文件推送 查看详情
实战！工作中常用到哪些设计模式(代码片段)
...聊日常工作中，我都使用过哪些设计模式。工作中常用到哪些设计模式1.策略模式1.1业务场景假设有这样的业务场景，大数据系统把文件推送过 查看详情
第08组beta冲刺（3/4）(代码片段)
...各个小组的进度与难以攻破的地方，晚上安排开会，安排新的冲刺任务。重新分配小组及个人任务。展示GitHub当日代码/文档签入记录接下来的计划优化软件界面还剩下哪些任务希望能让界面好看点燃尽图遇到了哪些困难界面不... 查看详情
第08组beta冲刺（3/4）(代码片段)
...各个小组的进度与难以攻破的地方，晚上安排开会，安排新的冲刺任务。重新分配小组及个人任务。展示GitHub当日代码/文档签入记录接下来的计划优化软件界面还剩下哪些任务希望能让界面好看点燃尽图遇到了哪些困难界面不... 查看详情
第08组beta冲刺（3/4）(代码片段)
...各个小组的进度与难以攻破的地方，晚上安排开会，安排新的冲刺任务。重新分配小组及个人任务。展示GitHub当日代码/文档签入记录接下来的计划优化软件界面还剩下哪些任务希望能让界面好看点燃尽图遇到了哪些困难界面不... 查看详情
react技术实践(代码片段)
...做到真正的前端（包括UI）的组件化。所以，前端组件化技术就自然成为首选方 查看详情
译让react组件如文档般展示的6大工具(代码片段)
...最好得让你的组件容易被找到、理解和使用。你需要将其文档化。目前，使用工具可以帮助我们实现自动化文档工作流程，并使 查看详情
react的diff算法详解
...16开始将同步更新重构成了可中断的异步更新，即采用了新的Reconciler(协调器，用于找出变化的组件），而新的Reconciler中采用了fiber架构。fiber架构的原理在此不再详细解释，我们目前只需要知道fiber节点可以保存dom信息，fiber节... 查看详情
soucrceinsight4使用(代码片段)
...以有好多个。右击关联窗口-新建窗口，则可以打开一个新的关联窗口。关联窗口的功能修改，右击关联窗口-窗口属性 查看详情
让markdown中的代码可以实时运行(代码片段)
...什么会有这样一个需求？在我们前端团队中，技术相关的文档都采用Markdown编写，文档中往往会伴随很多示例代码，我们希望大家在阅读文档的时候，可以运行示例代码，看到效果。需求让Markdown中的代码可以运行，并预览效果... 查看详情
react-routerv6该怎么用？(代码片段)
...6有着翻天覆地的变化，因为最近接触到了React的新项目，用到了v6版本的react-router吗？从api到原理都有较大的改动，所以今天就和大家一起看一下新版路由的变化。对于这次的改动，笔者的建议是：如果是新项目，可以尝试新版... 查看详情