自从出了《精通React》大专栏之后,经常有一部分小伙伴问我可以学吗,我的回答通常是下面这样:
其实,如果看过大纲之后,你感觉有用,那么这个课程就是适合你的。如果不知道有没有用,可以先看看我在b站的一些试听课的视频,听完有收获就可以跟着学。
这个课程是React的一个系列课,不仅包括了React进阶所需要的React原理源码的讲解和手写实现,还包括了React周边流行库的原理源码的讲解和手写实现。不仅是面试法宝,也是项目提升所需要基础知识。
当然,对于很多React 24K纯小白来说,上来就啃源码,会有点硬。这个时候通常建议先学下基础,关于如何入门React,接下来我说一些自己的经验。
不要求多精通js,但是至少熟练掌握js,比如熟读《ES6入门教程》的前23章。
只要js基础扎实,有没有Vue基础无所谓,没有更好。
想学React直接写就行了。
入门建议使用基础脚手架,比如create react app或者 vite,至于UMI和DVA,建议熟练了React之后再使用。因为UMI和DVA都是经过封装的工具架,并不是单纯的React,新手容易混淆React和它的周边库。
文档地址:https://create-react-app.bootcss.com/docs/getting-started
只需要下面三条命令,一个基础的React项目就可以跑起来了。
npx create-react-app my-app
cd my-app
npm start
https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project
用vite创建一个项目也很简单,根据自己的喜好,下面的命令任选一条就可以了。
# npm 6.x
npm create vite@latest my-react-app --template react
# npm 7+, extra double-dash is needed:
npm create vite@latest my-react-app -- --template react
# yarn
yarn create vite my-react-app --template react
# pnpm
pnpm create vite my-react-app --template react
创建好项目之后,接下来就可以写React了。一边写,一边查询文档。
最好的文档,毫无疑问是官网:https://zh-hans.reactjs.org/docs/hello-world.html
当然这个文档也许对于小白并没有那么友好,但是比较通用干货,没什么废话。接下来建议来写一写基础功能,比如累加器、todo list等。
一边写例子,一边查询文档,你会逐渐认识到一些概念,比如状态(State)、属性(Props)、Context、Hooks、路由(Router)等。也许你本来就听说过这些概念,但是看过文档之后,感觉更混乱了,没关系,别急,很多写了不少React的人还是分不清这些概念,初步的话你只需要能完成一些基础功能就可以了~
如何判断一个人是否精通React,只需要看他是否精通状态管理就可以了。
React的常见状态管理库有Redux、MobX,也许你还听说过Recoil,或者Form解决方案。
对于小白来说,首先比较推荐Redux,因为简单且使用率更广泛。
再次是MobX,也许写过Vue的小伙伴更喜欢MobX~
最后是经常被忽略的Form解决方案,从HOC到Hooks,再到响应式。
说了这些,小白使用Redux上手就可以了,其它的以后可以慢慢再学。
React的路由库,选择React-Router就可以了,现在React-Router的最新版本是6,小白的话,手生的小伙伴可以先从版本5上手,因为简单,方便入门路由,版本6的学习曲线稍微陡峭一点。
版本5的基础和学习视频,我之前录制过,放在b站了:
https://www.bilibili.com/video/BV1cD4y1R7UG?spm_id_from=333.999.0.0&vd_source=ce7ca0ac5a3d9bb363768d9e1ce9fbfb
状态管理和路由管理,学得差不多了之后,接下来就可以上手UMI/DVA了。
建议直接上手UMI就可以了,企业级应用框架,比较适合公司项目,可配置是否开启DVA。
DVA是一个数据流解决方案的框架,可以认为是一个Redux的封装版,现在几乎不用它直接做项目了。
UMI现在最新的版本是4,内置的React和Router也都是最新的版本。
React的学习路线也许并没有那么简单,但其实也不难,坚持一段时间之后,你会慢慢发现,工作中没有解决不了的需求。