react.js 入门真心难,太多步骤太多东西要记了
不难,多写就会了,而且React在入门阶段,你理解为html, 本来html有不同的标签比如div,p, h1等之类的东西,这些东西有属性,比如 style,对应到react,你可以理解为,除了HML标签之外,可以自己定义一些标签,他的props就是标签的属性,之后你再去理解他的component,就是一个普通的javascript函数,然后你再理解生命周期
很灵活的啊,看看阮老师等入门教程就行了。比如webpack配合写个小例子,我用redux重写了阮元风老师的计数例子应用。本人喜欢react编写灵活,vue太死板。 https://github.com/hemingming/redux-counter
感觉难先学vue,建立对一些基本概念的认知,比如组件,生命周期,状态,然后再进去就简单多了,假如我学会了js的变量字符串,类,再去学java是不是简单很多。先从简单的入门 From Noder
react入门其实挺简单的,jsx的语法很符合直觉。跟随getting started一步一步修改代码,一个下午就能入门了。
当然这仅针对react本身,用于实际项目可能还要考虑其他东西,不如状态管理、引入UI组件、构建、SSR等,这些就属于react周边了。
从入门的角度来讲,Vue是语法兼容性最好的,中英文文档比较齐全,原理上学习难度较低。React 相对来讲会复杂一点,不仅没有官方的中文文档而且国内已存在的React中文翻译文档也没能同步更新,查阅上有一定的难度,其次JSX语法、UI组件、组件生命周期等等概念对新手还是需要些时间理解。
少说多做,按照官方文档一步一步的学习,其实MVVM的框架学习难度也不大,而且理解其一基本上就知其三了。
16年的时候,我们做项目,最开始的选型是vue,后来基于某些原因,我们放弃了vue而选择了react 那时候react还没有发布16.0.x,所以我们买了两本书,花了一周看完书,就开始做项目 现在18年了,真心觉得react好用,配合redux也很爽;可惜redux需要写的代码太多,而mobx又太灵活,没有一个规则去限制它 总的来说react还是很不错的一个框架,真心不难
@chapgaga 也没有特别复杂,就是一个单页实现文件的上传,然后后端转码,后端转码成功后返回给前端,前端状态改变,将文件下载到本地。 之前还做过一个分类管理,不过都不是什么特别复杂的东西
说实话,学到能独立完成react项目的开发及上线,是需要一段时间的,凡事开头难,贵在你是否喜欢react的思想(坚持) 正确里面react的生命周期函数很重要(数据注入及更新,以及销毁), 数据的处理主要是函数式编程 掌握了基础,还有一些常用的
- 单向数据流思想facebook/flux redux和这个类似
- 数据不可变facebook/immutable-js 项目越大,体现出的价值越大
- 路由的处理 ReactTraining/react-router 最好自己能实现一个简单的路由处理
- webpack的一些配置也需要掌握,比如预编译postcss ,项目大了分包(vendor),热加载也是需要配置的。
实操 react+redux+postcss 微信截图_20180716102928.png
我正在写的 react 第一个项目... 正在进行时😜...
https://github.com/pythonxCat/react-cnode
我也是刚开始学 react, 学了半个月左右了...可以关注下...会在readme 里面加解说 (:
如果有新手想采坑, 我推荐下我的学习路径...发现还没怎么觉得特别困难.
- 看视频课程:https://time.geekbang.org/course/intro/100 (非推广...只是个人是个很热心的妹砸) 01 ~10
- 边看然后边刷官方的 Main Concepts 部分的文档https://reactjs.org/docs/hello-world.html 做好第一步和第二步后,对 react 有基本的概念了...
- 看ruanyifeng 的 redux/react-redux 教程... 看教程第一二篇的时候,会有个基本的概念呢...
- 然后返回去看 11~ 15, 视频讲解的 redux、react 课程
- 当然你在刷课课程中,也会不时的去看看官方文档看看些细节. flux 等概念
- 在上述步骤(3~4) 中,你会做 Counter 的例子,了解 redux 的基本玩法... 也会把 Counter的例子改成结合 react-redux 类型的; 如果这两个例子完成了...可以试试这个视频教程...完成一个小demo: https://www.youtube.com/watch?v=93p3LxR9xfM&t=1168s 这部分想必,对新手会绕一段时间...特别是 redux 这部分如果你没进去看过源码...有时候会被 API 绕晕...觉得 API 多
https://github.com/pythonxCat/learn-react/tree/master/Notes/Redux 这边是我学习 redux/react-redux 快速开始的笔记...不吝分享(个人水平有限...也欢迎拍砖)
-
上述课程(react 基础, react-redux 基础)完成后, 咱们直奔 react-router 官网边试官方 demo 和文档学习 react-router. 当然如果你觉得自己看英文文档吃力...可以试试看这边人家翻译的中文档:https://www.jianshu.com/p/1781bc1dd938#24-history 试着把 demo 自己一个个的手动敲下来... 估计就能上手项目啦...
-
react-router 课程搞定后... 咱们试试看看如何对项目进行架构,代码拆分,这部分再次看视频课程:https://time.geekbang.org/course/detail/100-11278 22 ~25 讲的真的非常棒...老司机多年的经验...代码拆分让我之前的困惑一扫而光...
-
如果这些都搞完了...觉得好像招聘要求回前端各种测试,
-
- 咱们先学习基本的 javascript 单元测试:
-
基础的入门视频教程,快,爽(不过貌似要英语听力过的去) https://www.youtube.com/watch?v=MLTRHc5dk6s&t=325s http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html 9.2 react 测试 https://github.com/pythonxCat/frontend-testing#chapter-2-react-testing
前段时间刚用react开发的一个前端项目,楼主有兴趣可以看看,项目用的 create-react-app 初始化的 https://cnodejs.org/topic/5bad8135ede204052db8024a
有Vue的基础下学React其实不会太难,很多概念是相通的, 如果没有类似MVVM框架基础,但有ES6基础,单纯React难度还不算太大, 个人觉得学习陡峭度大的反而是Redux和Mobx这类状态管理,刚接触时够呛
React要反复的写组件, 反复的写, 边写边思考 Props和State应该怎么来安排, 大的组件怎么拆成小的组件. 不断的把State进行提升操作, 提着,提着,State就变成Reducer了. 一定要动手,一定要动手.
马上就开始着手学习Typescipt, TS+React 简直是绝配. TS学习也需要一定的迁移时间,要给大脑一定的转化时间,所以乘早开始学习,
TS里的类型约束实际是给了你一个思考的框架. 面对UI原型图的时候, 你就可以思考数据的类型应给是什么样子的,一条完整的数据应该是什么样子的, 一组数据是怎么形成的. 这些细节问题, 明确的写出来就像抽丝剥茧的,慢慢就清晰了,反之感觉就是一团乱麻.
这个和跑步一样, 你不去跑,永远不会有提高. 而且提高也不是几天就能达到的.
等你有一天恍然大悟之后, 发现现在的React就是一个个的函数. 里面的数据像面粉一样从一端输入, 然后在某个地方变成了可口的面条和面包,汉堡包. 等你把TS加入之后, 你会发现只要你的配方没问题,机器没开动,就可以知道最后的面包是否可口. 那种对局面的掌控真是让人着迷.
既然花了时间的就不要放弃, 因为学习React和React-Native觉得难的,看到Flutter又想去学. 但是页面的结构,布局和数据的处理方法都是一样的, 你不在React里解决, 学Flutter也必须要解决,否则还是觉得很难,flutter里不解决问题,之后还有新技术出来还是搞不定. 实际上Flutter现在只是渲染引擎比RN的好, 那里面的的代码他妈的不是给人看的.要是RN能用Flutter的引擎,flutter直接就完蛋了. 反之如果你React和Redux学的很好了, Flutter应该也是一周,两周就能够解决的问题,Redux的概念也是完全一样,因为Redux的思想也不是React独有的, 而是和React比较般配, 为什么般配, 因为Redux就适合和组件配对. flutter完全照搬了React的很多东西.其实这照搬的也不是React一家的东西,而是通用的组件化思想,所以在flutter用Redux也是水到渠成的东西. 如果你学习React没有解决Redux的问题, 在Flutter里还是要面对这个问题, Flutter也不会替你完成这个任务.