为什么我选择[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
相关推荐
Jet_closer_burning几秒前
axios封装
前端·javascript·vue.js·react.js·ajax
牧羊狼的狼2 小时前
React.memo 和 useMemo
前端·javascript·react.js
局外人LZ12 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
H5开发新纪元17 小时前
借助 GitHub Copilot 打造一个完美的 React 消息引用系统:从设计到实现的深度剖析
前端·react.js
哟哟耶耶17 小时前
react-09React生命周期
前端·javascript·react.js
进取星辰17 小时前
13、性能优化:魔法的流畅之道——React 19 memo/lazy
前端·react.js·前端框架
zwjapple17 小时前
React中createPortal 的详细用法
前端·javascript·react.js
小矮马17 小时前
React-组件通信
前端·javascript·react.js
火星思想18 小时前
React如何实现时间切片
前端·react.js
qq_25249639961 天前
react 子组件暴露,父组件接收
前端·javascript·react.js