去年，我开发了一款微信排版编辑器 MDX Editor。它可以自定义组件、样式，生成二维码，代码 Diff 高亮，并支持导出 Markdown 和 PDF 等功能。...演示 技术选型 开发 MDX Editor 桌面 App，我使用了如下核心技术栈: React (Next.js) Tauri —— 构建跨平台桌面应用的开发框架 Tailwind CSS —— 原子类样式框架...MDX 自定义组件 MDX 结合了 Markdown 和 JSX 的优点，它让你可以在 Markdown 文档中直接使用 React 组件，构建复杂的交互式文档。...你可以选择一个目录，或者将你的文档工作目录拖入编辑器，便能够实时地在编辑器中管理文档。 图片 当我在开发这个功能之前，我曾担心自己不熟悉 Rust，无法完成这个功能。...await readTextFile('app.conf', { dir: BaseDirectory.AppConfig }) 文档目录树采用了 Ant Design 的 Tree 组件实现，通过自定义样式使其与整体皮肤风格保持一致
也就是不用每次访问其他页面都加载一整个 HTML 以及其包含的需要加载的 JS 和 CSS。 生成的 HTML 中，首页展示最新 5 篇。...next-mdx-remote 默认会将图片和超链接直接解析为 HTML，但是可以通过 components 将其解析为 Next.js 自带的图片和链接优化组件。这部分还是挺简单的。...在功能方面，Atomic CSS 支持媒体查询和状态处理，而行内样式缺少这些功能。...使用 Atomic CSS 相较于传统 CSS 方法，CSS 产物大小与项目复杂程度和组件数量之间的关系不再是线性正相关。...杂项 一些杂的简单提一嘴，不展开了。 返回顶部使用了最简单的锚点，毕竟能用越少的 JS 越好。
Next.js 已经成为 React 应用程序最重要的框架之一。它可以帮助开发人员在没有模板的情况下构建更好的服务器端渲染 React 应用程序。...对于那些想要拥有一个简单但功能强大的博客的人来说，使用 Next.js 创建博客是当今的最佳选择。 SEO（搜索引擎优化）是改进应用程序在搜索引擎排名的过程。...我们将在本文中使用 Next.js 来构建博客。我们将介绍 SSG（静态站点生成）的工作原理，并完成 SEO 友好的博客。...remark-gfm 创建文章 根目录新增_posts目录，在_posts目录下创建两个mdx文件(_posts/js/helloWorld.mdx,_posts/demo.mdx)，为什么是mdx文件呢...内元素渲染的组件，参考MDX Components，mdx 提供默认的渲染组件，所以，这个是非必须的，不需要删除即可 个人比较喜欢 chakra-ui，所以将组件都转成了 chakra-ui 提供的组件
基本介绍 新文档地址在 https://github.com/reactjs/reactjs.org/ 中的 beta 目录下，外层代码是目前的文档代码，那么我们可以直接 git clone 并且拷贝...的分包也非常完美，每个 js 大小都差不多，并且根据页面按需加载。...MDX MDX 让 markdown 支持 jsx，我们一起来看看如何使用 import React from 'react'; import ReactDom from 'react-dom'; import...components 传入自定义组件，在 markdown 中就可以使用了。..., 可以直接再网页中渲染一个 https://codesandbox.io/ 并且文件可以引用文件，这就比较你牛了 我们发现 Sandpack 里面使用了 "@codesandbox/sandpack-react
前言 在 MDX 出现之前，将 JSX 与 Markdown 混合书写时，Markdown 的优势就不存在了。 通常采是用基于模板字符串的方式，因此就需要大量的转义和繁琐的语法。...MDX 试图让书写 Markdown 和 JSX 更简单、更具有表现力。当你将组件 （甚至可以是动态的或需要加载数据的组件）与 Markdown 混合书写时，你将写出更有趣的内容。...MDX 是什么 MDX 是一种书写格式，允许你在 Markdown 文档中无缝地插入 JSX 代码。 你还可以导入（import）组件，例如交互式图表或弹框，并将它们嵌入到内容当中。... 展示效果 如何使用 在 create-react-app 中 只需要安装 @mdx-js/loader， create-react-app...，限制其最大宽度，href 跳转要改成新窗口打开等 ，详情可以查看 unifiedjs.com 定义组件 在支持了 mdx 之后， 可以给 mdx 定义组件, 比如给 H1 传递默认样式等，或者加入默认组件
以组件为中心的自动文档生成 在 Storybook 7 中，你现在可以直接将文档附加到你的组件上。页面会出现在侧边栏中，与组件的 stories 一起显示，而不是以前的选项卡式用户界面。...使用 MDX 引用导入 stories Storybook 7 鼓励所有用户在 CSF3 中定义 stories，然后在 MDX 中引用它们。...更容易配置的样式插件 使用 Storybook 设置样式工具对许多开发人员来说是一个常见的挑战。...样式插件使你能够加载和应用全局样式到你的组件上，以及使用主题 Providers 包装 stories。甚至还提供了一个主题切换器，让你轻松切换主题。...在 7.x 版本中，我们将推出许多生活质量的改进，特别是在更好的模拟、全页面测试和兼容性方面。 参与进来 专业的 UI 开发人员每天都依赖于 Storybook。
无论你是编程新手，还是经验丰富的开发人员，都需要不断学习新的概念和语言 / 框架，才能跟得上这个快速变化的行业。...Vue构建聊天应用 你将学到什么内容： 在这个教程中，你将学习如何从头开始设置一款Vue应用，创建组件、处理状态、创建路由、连接到第三方服务，甚至处理身份验证。...04 使用Next.js构建电子商务购物车 你将学到什么： 在这个项目中，你将学习如何设置Next.js开发环境、创建新页面和组件、获取数据和样式并部署一个next应用程序。...技术栈和功能： Next.js 组件和页面 数据获取 样式 部署 SSR和SPA 教程：https://snipcart.com/blog/next-js-ecommerce-tutorial 05 使用...06 使用Gatsby建立博客 你将学到什么内容： 在本教程中，你将学习如何利用Gatsby构建出色的博客，可以很好地用来撰写自己的文章，同时利用React和GraphQL的能力。
因此，开发人员要么构建封装了对数据获取的严格观点的元框架，要么发明自己的数据获取方式。这通常意味着将基于组件的状态和副作用凑合在一起，或者使用更通用的状态管理库在应用程序中存储和提供异步数据。...这在实现当今应用程序中使用的其他行为时变得更加复杂： 跟踪加载状态以显示 UI 加载指示器 避免对相同数据进行重复请求 进行乐观更新以提高 UI 响应速度 随着用户与 UI 进行交互，管理缓存的生命周期...使用它来获取、缓存和修改应用程序数据，同时自动更新用户界面。 Apollo Client 帮助您以经济、可预测和声明式的方式组织代码，与现代开发实践一致。...如果你需要做任何特殊的操作，与表单进行交互就变得非常痛苦！ 因此，React 做了它最擅长的事情，将实现的工作交给了我们。事实上，这正是我喜欢 React 的原因！...Tailwind CSS Styled Components Emotion Taiwlind 就不需要多介绍了，最近太火热了，而且可以和 Styled Components 库结合使用。
无论您是刚开始编程还是已经是一名经验丰富的开发人员，在这个行业中，学习新的概念和语言/框架是跟上快速变化的必要条件。...您将学到什么 本教程将向您展示如何使用svelte3制作一个应用程序，从开始到结束。它使用组件、样式和事件处理程序。...该项目将向您展示如何构建一个如下所示的电子商务购物车： ? 您将学到什么 在这个项目中，您将学习如何设置一个Next.js开发环境——创建新页面和组件、获取数据、设置样式并部署下一个应用程序。...我个人很喜欢与Nuxt合作，因此您应该真正尝试使用它，因为它也会使您成为更好的Vue开发人员。...您将学到什么 在本教程中，您将学习如何利用Gatsby构建出色的博客，以便在使用React和GraphQL的同时编写自己的文章。
在此节中，我会分享在企业环境中使用 Next.js 所积累的原则。 模块化和组件化 原则：分而治之 在庞大的企业级应用领域，代码可以迅速变成一头难以驯服的野兽。...一个维护良好的代码库不仅更易于使用，也更少 Bug 和回归。我最近在工作中开发了一个组件库和一个基本的风格指南来规范我们的前端应用。请不要介意文档，它们还未完成 。...它们发挥指南针的作用，确保你的开发工作符合大规模应用的需求，使其健壮、可维护且对用户友好。在以下章节中，我们将深入探讨这些原则如何转化为可执行的策略和最佳实践。...src/styles： 这个目录存放全局样式(global.css)和其他与样式相关的文件。 src/public： 这个文件夹包含不经过构建过程的静态资源。...在企业应用中，验证各个组件的预期工作方式对健壮的应用非常关键。React Testing Library 允许彻底测试每个组件的隔离情况，以及与其他组件的结合情况。
在 Netlify 最近的开发者调查中，Astro 是 增长最快的 Web 框架，无论是使用率还是满意度。...Astro 的文档 将“岛屿”定义为“页面上的任何交互式 UI 组件”，并邀请开发者将岛屿视为“漂浮在一片静态、轻量级、服务器渲染的 HTML 海洋中的交互式小部件”。...在最近在 CFE 上的一次演讲中，运营着流行 YouTube 频道 的 JavaScript 开发者 James Q Quick 指出，大多数人开始使用 Astro 是因为它被称为“静态优先”框架——换句话说...他的个人博客之前在 Gatsby 上，他开始将其迁移到 Next.js，这是他在工作中花费大量时间使用的框架。但在此过程中，他试用了 Astro，并很快被开发者体验所吸引。...“我敢打赌，他们将继续在服务器上添加特性和功能，但他们会考虑到出色的开发者体验，因为他们已经通过他们已经完成的所有其他事情证明了这一点。”
这两三年一直专注于公司的开发工作，做了很多事情，但回头看看，感觉这两年一直在吃 ’老本‘，前端相关的技术也没怎么追了。 现在重新捡起笔吧！补补课，记录一些最近学到的新东西，以及过去几年总结。...SSR 也是在服务端渲染完整 HTML 树，但是在客户端依然需要加载完整的视图框架代码，然后进行水合(Hydration)，才能让页面变得可交互: 那 Astro 没有 JS，显然是无法与用户进行动态交互的...---- 有了‘岛屿’赋能的 Astro 架构： Astro 在服务端渲染完整的 HTML 树，然后在客户端中按需加载岛屿代码，并进行水合。看起来有点像微前端、或者 iframe 这样的机制。...在 Astro 的定位非常清晰，它把站点类型分为两种： 内容为中心 → 也称为 网站 → Astro 擅长 交互为中心的 → 也称为 Web 应用程序 → 应该使用 Next.js 或者 Nuxt.js...SPA (Next.js) – 65% 网络使用减少 Astro vs.
你将学到什么 在构建这个 App 时，你将使用相对较新的 Hooks API，这有助于提高你的 React 技能。...你将学到什么 这个教程将向你展示如何从头到尾使用 Svelte 3 开发 App。它使用了组件、样式和事件处理器。...这个项目将向你展示如何构建一个电子商务购物车，它看起来像这样。 你将学到什么 在这个项目中，你将学习如何搭建 Next.js 开发环境——创建新的页面和组件、获取数据、样式化和部署 App。...6 用 Nuxt.js 构建一个完整的多语言博客网站 Nuxt.js 之于 Vue 就像 Next.js 之于 React——一个结合了服务器端渲染和单页应用程序的强大框架。...你将学到什么 在这个教程中，你将学习如何利用 Gatsby、React 和 GraphQL 构建一个出色的博客。
我们将构建一个多页面的网站，包括一个博客。 在这篇文章末尾，你会很好地理解Astro是如何工作的，以及你如何使用它来更快地创建高效的网站。开始吧！ 什么是Astro框架？...因此，我们可以为我们的用户创建一个快速的网站，而不牺牲现代开发者的体验。 但Astro并没有止步不前。...在本教程中，我们主要使用.astro和.md文件来创建页面。注意，如果你使用.html页面，一些关键的Astro特性在HTML组件中不被支持。 现在让我们来创建第二个页面，看看它是如何工作的。...加载本地文件 在你的blog目录中添加更多的博客文章，这样我们就可以在我们的主页上创建一个列表。 Astro.glob()允许你将本地文件加载到你的静态页面上。...这样一来，我们的用户就有了快速、无缝的体验，而我们仍然可以享受到使用动态框架工作的所有好处。这对用户和开发者来说是一个双赢的局面！
在使用大型包时，Styleguidist 不能很好地伸缩，因为它会为包中的每一个示例渲染一个独立的沙盒，导致初始化加载时间和热加载时间变长。...我们希望新的 Storybook 语法与组件源代码保持一致，所以将使用 ES6。 应该让使用过 Styleguidist 的开发人员对 Storybook 中的文档也感到熟悉。...Storybook 支持 MDX，这是一种结合了 Markdown 和 JSX 的文件格式，可以用 Markdown 为文档页面渲染 React 组件，我们可以将现有的 Styleguidist Markdown...然后我们发现 MDX 代码块是在相同的上下文中运行的，而且我们关于保持沙盒与 Styleguidist 隔离的假设是不对的。...使用现有的 webpack 配置也意味着组件的外观和行为与实际页面中的完全一样。
为了解决这些问题，我们改用 Next.js，将初始页面加载时间减少了 70%，并将开发者的体验提升到一个新的水平。 什么是 Next.js？...样式 Causal 代码库中的许多旧的 CSS 文件是在团队对 CSS 模块的最佳实践进行标准化之前编写的。...许多 .scss 文件也一直在使用 @USE 和 @EXTEND SCSS 指令来使用其他共享的 .scss 文件来构建样式。...在评估部署我们新的 Next.js 前端的选项时，我们确定了三种可能性： 不要对 Next.js 使用任何服务器端渲染，使用 next export 构建，并将输出与 CRA 的静态输出完全相同。...将整个前端托管在 Vercel 上，指向我们的后端（托管在 GCP 中）。 为 Next.js 服务器编写一个自定义的 Docker 镜像，并将其与我们的后端和其他服务一起托管在 GCP 中。
热模块替换：Next.js 支持热模块替换（HMR），在开发过程中，您可以实时更新代码并立即看到变化，无需手动刷新页面。...CSS 模块支持：Next.js 内置了对 CSS 模块的支持，使得组件级别的样式隔离和管理变得更加简单。 如何开始使用 Next.js？...要开始使用 Next.js，您可以按照以下步骤进行： 创建新项目：使用命令行工具，在您选择的目录中创建一个新的 Next.js 项目。...定义路由和请求处理程序：在控制器文件中，使用装饰器和方法来定义路由和请求处理程序。...注册控制器：在模块文件中，将控制器注册到相应的模块中。您可以使用装饰器 @Module 和 controllers 属性来完成这一步骤。
开发者无需为后端任务手动创建 API 路由，现在可以直接在 React 组件中定义服务器端功能，从而允许客户端与服务器间实现无缝交互，甚至可以在 App Router 模型当中合并错误处理、缓存、重新验证与重新定向...此次更新的意义在于简化开发者工作流程，同时增强用户与应用之间的交互。对于各位 TypeScript 用户来说，稳定版功能还能更好地保障客户端与服务器间实现类型安全。...，与动态个性化响应的灵活性相结合。...通过将 PartyKit 与 Next.js 相结合，她演示了如何创建一款功能全面的实时民意调查应用，用户可以与之交互并查看代码和部署过程。...，实现 App“动态无限制”(https://www.infoq.cn/article/sITi66wc3mvcNs3PeRkb) 我们如何使用 Next.js 将 React 加载时间缩短 70%(https
结合服务器端组件和客户端组件，你可以将服务器端组件用于程序中快速加载、非交互性的部分，将客户端组件用于交互、浏览器 API 和其它功能。...其他升级 next/image Next.js 中的新 Image 组件包括更少的客户端 JavaScript、样式和配置，改进了可访问性。...next/font 你可以将 Google Fonts（或者任何其它自定义字体）与 @next/font 一起使用，无需浏览器提交任何查询。...甚至最新的 React 中一些尖端功能（这些功能被大量使用但仍处于 RFC 阶段）也经常不包括在内。 虽然我不建议在生产环境中使用 Next.js 13，但你上手应该试一试。...App“动态无限制”(https://www.infoq.cn/article/sITi66wc3mvcNs3PeRkb ) 我们如何使用 Next.js 将 React 加载时间缩短 70%(https
功能强大，与 Gatsby 相似（React）dumi - 一款 UmiJS 生态中的组件开发文档工具（React）Nextra - 一个基于 Next.js 的静态站点生成器。... { text:"新手入门", children:[ { text:'安装与使用...{ demoBlockPlugin } = require('vitepress-theme-demoblock') md.use(demoBlockPlugin) } }}注入主题与插件在...docs/.vitepress/theme/index.ts 中写入如下代码，其中 register-components.js 不需要自己创建，在 package.json 中注入脚本，执行脚本自动生成在...demo 中的 index.md 文件中使用特定的语法包裹代码，可以自动生成组件 demo 展示# Button 按钮:::demo 使用`type`，`plain`，`round`来定义 Button
领取专属 10元无门槛券
手把手带您无忧上云
