为什么我选择[email protected]

最近在学习React Client Side Render,需要使用React18。为什么是React18呢,因为React19中引入了大量的Server Side Render的部分,我觉得Server Side Render也会是未来React的主流,但是虽然Server Side Render可能未来成为主流,但是还是有很多功能必须通过client side render实现,比如登录状态,主题偏好的持久化这些功能,所以对于React开发者来说,Client Side Render是必备的技能。

关于Client Side Rendering,Code with Mosh给了一个很好的instructions,如果有实力可以直接购买他的课程(我买了一个月,之后没实力就没买了),如果囊中羞涩可以去B站免费看或者在咸鱼上购买他课程,咸鱼的链接就不给了一搜就有。

Mosh教程中使用的是create vite 4.1.0版本,这个版本有两个out-of-box的功能,很好用,而且我发现这两个功能在create-vite 4.2.0后的版本中没有了(或者需要配置,我没仔细研究过):

node_modules中的文件自动补齐

这里我想引入bootstrap中的某个文件,[email protected]之前的版本支持自动补齐,之后的版本如[email protected]就不支持了,像这样:

我在bootstrap后输入/没有任何的补齐提示。

implicit index.ts导入

比如在scr/utils/index.t有这段代码:

typescript 复制代码
function printHello() {
  console.log('hello')
}

export default printHello

[email protected]之前的版本,支持在自动导入的时候不用包含index.ts,之后的版本就变成explicit的了。 比如,在main.ts文件中我要import这个printHello:

自动导入implicit的importindex.ts中的变量,很酷的功能。而在[email protected]中,自动导入就会加上这个index.ts,像这样:

可以看到,这里的自动补齐把index.ts文件名加上了。

总结

上面这两个功能,我很喜欢,加上我要写React18,所以如果你也要写React18的项目,使用[email protected]创建项目是不错的选择,可以使用下面的命令:

bash 复制代码
pnpm create [email protected] --template react-ts
相关推荐
windyrain17 分钟前
ant design pro 模版简化工具
前端·react.js·ant design
GISer_Jing1 小时前
React-Markdown详解
前端·react.js·前端框架
太阳花ˉ1 小时前
React(九)React Hooks
前端·react.js
旭久3 小时前
react+antd封装一个可回车自定义option的select并且与某些内容相互禁用
前端·javascript·react.js
阿丽塔~3 小时前
React 函数组件间怎么进行通信?
前端·javascript·react.js
前端菜鸟来报道4 小时前
前端react 实现分段进度条
前端·javascript·react.js·进度条
傻球7 小时前
Jotai 使用详解:React 轻量级状态管理库
前端·react.js
市民中心的蟋蟀10 小时前
第四章: 使用订阅来共享模块状态
前端·javascript·react.js
水煮白菜王11 小时前
首屏加载时间优化解决
前端·javascript·react.js
小满zs12 小时前
React-router v7 第一章(安装)
前端·react.js