V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Mr0C
V2EX  ›  React

React 入门有什么教材吗

  •  
  •   Mr0C · 2021-07-13 17:59:36 +08:00 · 4029 次点击
    这是一个创建于 1011 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前端写过 Vue,看 React 的文档感觉非常懵逼,求推荐教程

    22 条回复    2021-07-19 10:59:19 +08:00
    kop1989
        1
    kop1989  
       2021-07-13 18:02:02 +08:00
    你可以说说怎么个“懵逼”法。我个人视角看官方文档还是挺清晰的。

    包括但不限于 React 的界面组织思路、两种实现的优劣、React 能帮助开发者什么,适合什么样的开发场景等。
    zxCoder
        2
    zxCoder  
       2021-07-13 18:06:53 +08:00
    react 官方文档我也是看下来很懵逼,跟 vue 完全不一样的东西

    你最好是舍弃 vue 的思想,重新学一遍比较好
    Cbdy
        3
    Cbdy  
       2021-07-13 18:10:54 +08:00 via Android
    我是看官方文档学的,感觉还行
    emonc
        4
    emonc  
       2021-07-13 18:15:42 +08:00
    除了 HOOK 的状态比较难处理,其他的我觉得和 VUE 大差不差
    paullee
        5
    paullee  
       2021-07-13 18:17:02 +08:00 via iPhone
    学太极那样,忘掉已经学会的就好了
    Leviathann
        6
    Leviathann  
       2021-07-13 18:20:37 +08:00 via iPhone   ❤️ 2
    react 官方文档的确有点问题,整个圈叉棋的 demo,还有什么时间旅行来展示状态管理。。
    核心理念其实就一条
    UI = render(state)
    mxT52CRuqR6o5
        7
    mxT52CRuqR6o5  
       2021-07-13 18:22:40 +08:00
    你是 vue 的 sfc 用多了,vue 也可以用 jsx 、写 render 函数的,vue sfc 的模板编译出来其实也是 render 函数
    Jirajine
        8
    Jirajine  
       2021-07-13 18:30:03 +08:00 via Android
    推荐他的文章 lutaonan.com/blog/react-and-the-way-building-web-ui/
    理解以后看 react 小书。
    react 核心非常简单纯粹,f(state)=ui,没有任何多余的东西。
    fengfuliu
        9
    fengfuliu  
       2021-07-13 18:38:31 +08:00
    建议看官方教程的文档菜单而不是教程菜单
    zhuxiaoxi
        10
    zhuxiaoxi  
       2021-07-13 20:06:04 +08:00
    Vue 提供的语法糖太甜了,确实让很多先学 Vue 再接触 React 的人不适应
    mauve
        11
    mauve  
       2021-07-13 20:10:38 +08:00   ❤️ 1
    中国人体质不适合学 React 🐶
    beizhedenglong
        12
    beizhedenglong  
       2021-07-13 20:12:01 +08:00
    https://reactjs.org 这个入门不够么?
    karott7
        13
    karott7  
       2021-07-13 22:46:23 +08:00
    找个小项目来看吧或者实现几个常见案例,vue 的模板语法写多了一开始确实难理解 react,毕竟 react 太过简洁
    Rocketer
        14
    Rocketer  
       2021-07-14 01:32:53 +08:00
    React 简单说起来就三步:
    1 、设置界面与状态的关系(如何从状态生成界面)
    2 、设置状态与事件的关系(如何修改状态)
    3 、把太大或者可重用的部分拆成组件

    第三步是优化,初学也可以不管。
    无论是 class 还是 hooks,思想上都差不多,都是函数式编程(这一点很重要,否则你可能会想在 class 里直接修改 state 的属性),只是语法有点区别。
    ericls
        15
    ericls  
       2021-07-14 03:38:29 +08:00 via iPhone
    React 会 JavaScript 就能用
    不像 angular 和 vue 还有自己的语言
    andyxic
        16
    andyxic  
       2021-07-14 09:08:04 +08:00
    为什么我写 react,再去写 vue,发现 vue 并没有那么美好~v2 也就算了。v3 写起来感觉更难受。
    Torpedo
        17
    Torpedo  
       2021-07-14 10:13:22 +08:00
    官方文档真的不行。。。
    rioshikelong121
        18
    rioshikelong121  
       2021-07-14 10:29:45 +08:00   ❤️ 1
    我觉得 React 的官方文档很不错啊。唯一的问题是把 Function / Class 没有拆分的特别开。

    看了文档以后可以把 Dan 的 Blog 多看看。https://overreacted.io/

    尤其是以下几篇:
    https://overreacted.io/react-as-a-ui-runtime/
    https://overreacted.io/the-elements-of-ui-engineering/
    https://overreacted.io/a-complete-guide-to-useeffect/

    也可以上 Youtube 搜下历届 React Conf 的一些 Lecture 看看。

    囫囵吞枣的简单的理解 React 当下的 API/设计不难,难得是理解为什么他要演进成这个样子,为什么要这么设计?这么设计解决了什么问题?
    mightofcode
        19
    mightofcode  
       2021-07-14 11:19:44 +08:00   ❤️ 1
    可以看看我的项目 https://github.com/mightofcode/v3ex-react
    Nodejs 、React 、Nextjs 、Mongodb 、koa
    justin2018
        20
    justin2018  
       2021-07-14 11:21:48 +08:00   ❤️ 1
    https://hyf.js.org/react-naive-book/ 我是看这个入门的

    然后就写自己的项目了
    changwei
        21
    changwei  
       2021-07-14 23:50:59 +08:00
    react 的核心思想非常简单,就是 UI=render(props),并且 props 为不可变类型(你是可以强行修改 props 的,但是这样的修改不会产生视图渲染更新,也不是优雅的代码写法),所以是单项数据流

    学不会 react 的情况下应该想想自己的 ECMAScript6 学得如何,比如当我之前 ECMAScript6 没有学好的时候,看到 this.handleClick().bind(this)这种代码也会感到很奇怪,会纳闷为什么写 onClick={alert(1)}是错误的,会产生代码运行时自动执行事件函数的 BUG,而要写成 onClick={()=>alert(1)},直到后来我彻底把 ECMAScript6 和浏览器工作的整个流程弄懂以后才算明白这其中的原理

    react 的文档作者是默认你对 JS 非常熟悉,所以举出的例子和说明对于不熟悉 JS 的人来说会看得一头雾水(比如如上两个问题),因为作者写作文档针对的就是从传统开发过来的具有多年开发经验的前端工程师,确实对新手不太友好。

    React 官方文档自己对自己的定位就是 JavaScript 框架,是在 JS 的基础上引入 JSX 语法糖以及函数式组件,是从传统 HTML+CSS+JS 开发演进过来的,所以你得站在传统开发的视角上去看待 React 提供给你的语法糖,你就会觉得他比传统开发优雅很多。Vue 单文件组件那一套其实是从 W3C 的 web component 提案演进过来的,所以你会觉得它完全就是一套全新的开发思路,你不太方便从传统开发的视角上理解他的写法。

    https://github.com/cw1997/ez-react-dom/
    另外我推广一下自己写的一个简单的 react-dom 实现方案,不到三百行代码,如果你真的 JS 学的比较好(最好还是科班出身,至少知道有一个叫做递归的算法),应该很容易看懂,你能看懂这个实现,就能明白 React 的运作到底是怎么回事,为什么 react 的状态需要使用不可变数据,为什么 react 是单项数据流,为什么要用 onChange 反向进行状态更新。

    https://github.com/cw1997/ez-react
    另外我的这个代码里面做了一个小小的改进,就是有关我前面提到事件需要手动绑定 this 的操作,如果你对 JS 很熟悉的话,你可以看看这个项目里面是如何做到对事件 handle 函数自动绑定 this 的(用了 ES6 的 reflect 机制)

    写 React 需要非常深厚的 ES6 基础,写优雅的 React 还需要非常深厚的 TypeScript 基础和理解函数式编程的思想,加油!
    shilianmlxg
        22
    shilianmlxg  
       2021-07-19 10:59:19 +08:00
    @changwei 谢谢大佬 现在就去看 es6 相关的教程书籍
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1748 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 16:35 · PVG 00:35 · LAX 09:35 · JFK 12:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.