使用react做前端的成长之旅，不断更新

2019年2月才接触到react，它都已经火了很长一段时间了，以前比较重视后端，也就是python+django开发。

现在才发现一个好的产品是多么需要与时俱进，那么框架的选择就至关重要了。以前的PC时代，会jquery的前端就已经不得了了，加上django的MTV模式，简直把前后端包揽。但是现在无论是UI还是用户体验，都需要花更多的时间去研究了。

前端框架： VUE 和 React 两家被大家认可程度非常高。 react更是Facebook开发，背后力量强大，比较哲学， vue比较晚，但是越来越火，对前端来说是一个福音，大家上手快，对表单处理非常出色。这两者都是需要去学习的框架，没有谁好谁坏，因为市场上一半一半都在用，当然是都会才行。而且它们两各有所长。 vue开发更快，更倾向小型化项目，和对成员要求低。 react学习可能会陡峭一些，倾向于大型项目和成员多的情况下，并且对人员要求会高一些。可以看的出来，它们面向的趋势确实当前看起来是有区别的，但是，这不是只选择一种的理由，需要两者都学。可以先学你工作更适合的那种，再去学习另一种。这样对职业好一些，仅此而已。

后端框架： Java 和 Python 这两者我只会 Python，当然python的热度也是越来越火，但是java仍然第一，他俩都是非常好的语言。 java学习陡峭，适合大项目，成员多，要求高。 python适合小项目，成员要求低，学习强度低。现阶段，web情况下，我不需要考虑java, python足以。

node: 我现在都不知道该怎么去描述它，因为我只限于用到安装node的时候附带的npm工具。在我看来，它是js语言的框架，它的插件很多，能完成很多的任务，更像是个八抓鱼。但是我只用它来做前端规划，这样的话，就姑且理解它是一个js框架，并且它有一个非常好用的npm。

说了这么多，还是要回到react的前端开发上来。

1. 按照文档来说的话，我们只需要引用三个js文件，就可以进行开发了

链接：https://www.runoob.com/react/react-install.html

但是，我们不能这样简单吧，我们需要 create-react-app 来帮助我们初始化一个react项目才显得高大上。它有facebook提供，不用说了，不再纠结了，就是它了。毕竟facebook。

它的安装很简单：cnpm install -g create-react-app

done

2. 那么还是说一下 node、 npm、 cnpm、 create-react-app、 react 的故事吧

不得不提一下后来看到的这篇文章，写的很好，说了node和npm的起源以及生态：

来源：  
node.js是javascript的一种运行环境，是对Google V8引擎进行的封装。是一个服务器端的javascript的解释器。
包含关系，nodejs中含有npm，比如说你安装好nodejs，你打开cmd输入npm -v会发现npm的版本号，说明npm已经安装好。
引用大神的总结:
其实npm是nodejs的包管理器（package manager）。我们在Node.js上开发时，会用到很多别人已经写好的javascript代码，
如果每当我们需要别人的代码时，都根据名字搜索一下，下载源码，解压，再使用，会非常麻烦。于是就出现了包管理器npm。
大家把自己写好的源码上传到npm官网上，如果要用某个或某些个，直接通过npm安装就可以了，不用管那个源码在哪里。
并且如果我们要使用模块A，而模块A又依赖模块B，模块B又依赖模块C和D，此时npm会根据依赖关系，
把所有依赖的包都下载下来并且管理起来。试想如果这些工作全靠我们自己去完成会多么麻烦！

node安装时候待的插件npm，可以安装cnpm, 然后可以cnpm install -g create-react-app，就有了create-react-app，就可以通过create-react-app myapp 创建一个名称叫myapp的react项目了。并且myapp有webpack做后盾，这样就齐活了。

其实，这个时候创建的myapp里面除了react以外，更多的是其他通过npm安装上的插件，比如webpack。说起来这似乎又是node社区和react社区的火爆，亦或者可以说是js的火爆。它真的是很灵活了。

3. react 语法是 jsx 既 javascript + xml 的写法。

react说是很哲学，数据流单项流转，数据替换 this.setState({...})写法和vue截然不同，也没有双向绑定。但是它不需要成本去学习那些模版上面的东西，更需要你去关注于逻辑，其他的交给html css javascript 这些最基础的语法去处理。

// todo ：怎么理解react路由，打包，处理接口跨域问题等。将后续更新

《使用react做前端的成长之旅，不断更新》