前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React的从入门到升仙

React的从入门到升仙

作者头像
前端bubucuo
发布2022-12-17 17:27:45
5790
发布2022-12-17 17:27:45
举报
文章被收录于专栏:bubucuobubucuo

自从出了《精通React》大专栏之后,经常有一部分小伙伴问我可以学吗,我的回答通常是下面这样:

其实,如果看过大纲之后,你感觉有用,那么这个课程就是适合你的。如果不知道有没有用,可以先看看我在b站的一些试听课的视频,听完有收获就可以跟着学。

这个课程是React的一个系列课,不仅包括了React进阶所需要的React原理源码的讲解和手写实现,还包括了React周边流行库的原理源码的讲解和手写实现。不仅是面试法宝,也是项目提升所需要基础知识。

当然,对于很多React 24K纯小白来说,上来就啃源码,会有点硬。这个时候通常建议先学下基础,关于如何入门React,接下来我说一些自己的经验。

入门要求

不要求多精通js,但是至少熟练掌握js,比如熟读《ES6入门教程》的前23章。

Vue基础

只要js基础扎实,有没有Vue基础无所谓,没有更好。

React入门指南

想学React直接写就行了。

入门建议使用基础脚手架,比如create react app或者 vite,至于UMI和DVA,建议熟练了React之后再使用。因为UMI和DVA都是经过封装的工具架,并不是单纯的React,新手容易混淆React和它的周边库。

create react app

文档地址:https://create-react-app.bootcss.com/docs/getting-started

只需要下面三条命令,一个基础的React项目就可以跑起来了。

代码语言:javascript
复制
npx create-react-app my-app
cd my-app
npm start

vite

https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project

用vite创建一个项目也很简单,根据自己的喜好,下面的命令任选一条就可以了。

代码语言:javascript
复制
# 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站了:

代码语言:javascript
复制
https://www.bilibili.com/video/BV1cD4y1R7UG?spm_id_from=333.999.0.0&vd_source=ce7ca0ac5a3d9bb363768d9e1ce9fbfb

UMI/DVA

状态管理和路由管理,学得差不多了之后,接下来就可以上手UMI/DVA了。

建议直接上手UMI就可以了,企业级应用框架,比较适合公司项目,可配置是否开启DVA。

DVA是一个数据流解决方案的框架,可以认为是一个Redux的封装版,现在几乎不用它直接做项目了。

UMI现在最新的版本是4,内置的React和Router也都是最新的版本。

最后

React的学习路线也许并没有那么简单,但其实也不难,坚持一段时间之后,你会慢慢发现,工作中没有解决不了的需求。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2022-08-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 bubucuo 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 入门要求
  • Vue基础
  • React入门指南
    • create react app
      • vite
        • 文档
          • 状态管理
            • 路由管理
              • UMI/DVA
              • 最后
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档