All Posts with TAG: React

该文章介绍了作者完成 Space tourism website 多页面网站开发的关键技术。本次开发主要涉及到使用自定义字体、使用图片资源作为背景以及响应式布局等方面，作者主要使用了React、Next.js、Tailwind CSS等技术。通过该练习，作者学习到了如何添加自定义字体、使用图片作为背景、实现响应式布局等技巧。最终实现了高保真还原设计稿。

本文通过一个实际的组件练习，介绍了React组件和状态的基础知识，并介绍了如何使用tailwindcss实现不同大小屏幕的布局。除此之外，还涉及了一些其他技术点，例如props、map函数和条件渲染等。

本文通过一个实际的组件练习，介绍了如何使用React和Tailwind CSS框架创建一个分数汇总组件。文章从需求分析开始，逐步讲解了如何使用React组件和Tailwind CSS的类来实现灵活的布局和样式。同时，文章还详细介绍了如何使用Flexbox布局来实现水平和垂直对齐，并解释了如何引用和使用SVG图标

在 Tailwind 的文档中，我们可以看到很多有趣的样式，其中包括各种颜色的条纹背景。但是，Tailwind 并没有提供这样的属性。本文将介绍如何通过 Tailwind 的插件机制来实现自定义样式，以及如何使用自定义插件来添加斜线条纹背景。

本文介绍了如何使用Next.js SSG（静态站点生成）技术为博客网站添加标签，并实现点击标签后跳转至同一标签的文章列表。通过使用getStaticProps和getStaticPaths方法，我们可以在不牺牲性能和SEO的情况下，实现动态内容的展示。文章详细介绍了静态生成的原理和主要操作步骤，适合前端开发者和博客网站的维护者参考。

MDX 是一种结合了 Markdown 和 JSX 语法的文档格式，而 React 是一个广泛应用于前端开发的 JavaScript 库，使用 React 组件可以方便地实现页面的组件化。本文通过一个实际的例子演示了如何在 MDX 文件中引入和使用 React 组件。并结合代码示例和效果展示，详细讲解了每个步骤的实现方法。通过本文的学习，读者可以快速掌握在 MDX 文件中使用 React 组件的技巧，提高页面的可重用性和开发效率。

这篇文章介绍了如何使用 Next.js，MDX，Tailwind CSS和 @code-hike/mdx 技术来搭建一个博客网站。通过这些技术的结合，可以方便快捷地创建一个支持 Markdown 格式的静态博客网站，并实现优雅的 UI 设计和灵活的布局调整。文章详细介绍了如何在 Next.js 框架下使用MDX来管理页面内容，以及如何使用 Tailwind CSS 来美化页面 UI，最后还介绍了 @code-hike/mdx 这一工具的使用，它可以让读者更方便地学习代码和实现。