加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

React.js学习笔记

发布时间:2020-12-15 04:45:28 所属栏目:百科 来源:网络整理
导读:最近在学习ReactNative,在搜集学习资料探究学习方式的阶段发现,要想能在实际项目中做到应用RN的水平,就必须要先对React.js很了解才可以。在了解React.js的过程中,发现里面涉及的概念非常多,node.js/js/css/jsx/babel/es6/flux/redux等等,感觉前端的技
最近在学习ReactNative,在搜集学习资料探究学习方式的阶段发现,要想能在实际项目中做到应用RN的水平,就必须要先对React.js很了解才可以。在了解React.js的过程中,发现里面涉及的概念非常多,node.js/js/css/jsx/babel/es6/flux/redux等等,感觉前端的技术栈果然比较深一些。根据我自身的学习习惯,先对知识的整理学习完毕,做到对技术的可控状态才算学习完毕。于是画了一星期的工作之余的时间对React.js进行学习总结。下面介绍一些学习中遇到的坑。

学习demo我整理了一下放到了github上面: https://github.com/lihei12345/ReactJSDemo

开发环境


首先是开发环境,习惯了IDE的自动提示,首先需要找到一个合适的IDE可以支持auto completion。

学习JSX语法,最简单方式通过jsfiddle: https://jsfiddle.net/reactjs/69z2wepo/,不用任何IDE也可以有个比较不错的开发环境。

sublime支持babel语法: https://github.com/babel/babel-sublime,这个插件只能支持高亮,但是并没有自动提示。

atom + nuclide,facebook推荐的React.js/ReactNative的官方编辑环境,但是package问题比较大,CPU一直使用超过100%,基本上处于不可用的状态,上周更新了一个版本,不知道现在已经修复没有,Atom CPU过高的问题: https://github.com/atom/atom/issues/3426, https://github.com/facebook/nuclide/issues/199, http://longtimenoc.com/archives/react-nativereact%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%85%E5%8F%8A%E4%BD%BF%E7%94%A8-nuclide

最终我的选择是前端神器WebStorm,自动提示各方面都比较成熟,支持ES6/babel。下面是使用过程中遇到的一些问题。
1. 语法提示错误的问题:
这个问题的原因是,WebStomr暂时不支持HTML文件的<script/> inline之内的JSX自动提示,需要把JSX放到一个单独的文件中
http://blog.jetbrains.com/webstorm/2014/09/webstorm-9-eap-138-2406/
2. 在facebook的官方demo中,JS文件是放在CDN上面的,WebStrom做到自动提示CDN上面的JS文件
http://blog.jetbrains.com/webstorm/2014/07/how-webstorm-works-completion-for-javascript-libraries/
3. 当把JSX语法文件放到单独的JS文件时,通过chrome访问会报错,但是safari可以正常访问
https://facebook.github.io/react/docs/getting-started.html,在chrome下面,把jsx放到独立文件时,需要通过HTTP来访问,否则会报错。但是safari是可以正常渲染的。

学习笔记


第一步:
入门是通过阮一峰的博客学习的,通过他的博客中的例子可以快速入门,对JSX和Babel有个大概的理解,以及熟悉IDE开发环境。
http://www.52php.cn/article/p-rkowmlmt-bnx.html


第二步:
然后我学习了facebook官方的guide: https://facebook.github.io/react/docs/why-react.html和 https://facebook.github.io/react/docs/displaying-data.html,对JSX语法有了一个比较全面的认识,把里面的例子实现一遍了之后,对React的印象就比较深刻了。

学习笔记: http://www.52php.cn/article/p-zgghwyjx-vk.html

第三步:
然后学习了<React Up & Running> 这本书,首先学习最后一个章节,对JSX/babel/es6这些概念,以及JSX的原理有了比较全面详细的认识。官方的guide中,有些地方说的不够详细,原理讲解不够清晰,这本书作为补充很不错。

学习笔记: http://www.52php.cn/article/p-xxypmgtu-vk.html

第四步:
最后学习了<React Up & Running> 这本书的前3个章节,把里面的demo实现了一遍,感觉把握住一些React的写法。

学习笔记: http://www.52php.cn/article/p-vkkrfvif-vk.html


参考

  • https://facebook.github.io/react/index.html
  • http://www.52php.cn/article/p-rkowmlmt-bnx.html
  • <React Up & Running>
  • http://sahatyalkabov.com/create-a-character-voting-app-using-react-nodejs-mongodb-and-socketio/
  • http://segmentfault.com/a/1190000003501752
  • redux + React:https://github.com/matthew-sun/blog/issues/18
  • redux:http://camsong.github.io/redux-in-chinese/docs/introduction/index.html
  • https://github.com/enaqx/awesome-react
  • react-redux:https://github.com/rackt/react-redux

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读