最近在学习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.ruanyifeng.com/blog/2015/03/react.html

第二步：

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

学习笔记： http://blog.csdn.net/colorapp/article/details/49720217

第三步：

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

学习笔记： http://blog.csdn.net/colorapp/article/details/49720305

第四步：

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

学习笔记： http://blog.csdn.net/colorapp/article/details/49720375

React.js学习笔记

开发环境

学习笔记

参考

猜你喜欢