万丈高楼平地起 先找块地，挖个坑 进入项目根目录，执行npm init -y生成初始的package.json文件，并将其配置项的入口main删除，添加private:true

【万字长文】使用最新的webpack5新特性从零一步一步搭建完整的react18+ts构建环境，完善的模块热替换和构建速度和构建结果的优化。

Create React App（以下简称 CRA）是创建 React 应用的一个脚手架，它与其他脚手架不同的一个地方就是将一些复杂工具（比如 webpack）的配置封装了起来，让使用者不用关心这些工具的具体配置，从而降低了工具的使用难度。 使用 create-react-ap…

前端主题切换方案 现在我们经常可以看到一些网站会有类似暗黑模式/白天模式的主题切换功能，效果也是十分炫酷，在平时的开发场景中也有越来越多这样的需求，这里大致罗列一些常见的主题切换方案并分析其优劣，大家

大概的思路就是给html根标签设置一个data-theme属性，然后通过js切换data-theme的属性值，Scss根据此属性来判断使用对应主题变量。这里可以选择持久化Vux或接口来保存用户选择的主题。新建themes.$themes: (Red: ( //整体主色调/菜单栏背...

利用css优先级的原理覆盖掉原有样式的实现，每定义一套皮肤就要定义对应的sass变量，以及定义一套覆盖原有样式的皮肤样式。如果有多套皮肤的话，覆盖的代码量就会n套。 样式不易管理，查找样式复杂，开发效率低，拓展性差，维护成本高，多人协作沟通麻烦。 Sass Maps的函数map…

关于在线主题切换方案，特意去看了一些解决方案，并自己尝试了其中几种相对容易理解和使用的方案，这些实践都是基于umi3和React的，可能跟其他项目有所区别，具体使用还要注意一下。

国际化是一个很常见的需求，之前没有这方面的相关经验，所以决定练一下手。正好最近在写一个react骨架（新项目可直接移植的骨架），上网查了一下，常用的解决方案是yahoo的react-intl库，大致效果如下。 首先解决静态国际化，即根据浏览器的语言，自动加载对应的语言模板。这里…

新手学习React看这一篇就够了！手把手教你搭建标准React项目，覆盖绝大多数业务场景，良心整理编写！