React学习心得浅谈

React学习浅谈（1）-技术栈

这两天花了点时间学习了下React，本人并不是一名纯前端研发人员，之所以想学习React只是想补全自己的技术栈。之前一直都是使用jquery+bootstrap来开发页面，其实大多数情况下这种技术栈也够了。但是现在都流行前后端分离，所以诸如React和Vue这类MVVM前端框架才会大行其道。

这所以写这篇文章，主要还是为了对自己这两天的学习做个总结，免得后面遗忘。同时，也希望能给那些想学习React却比较迷茫的同行们来个抛砖引玉，说下我个人的学习路线。

我觉得React的优点在于组件化以及JSX语法。组件化实现了页面通用元素的封装，提高页面元素的复用性；而JSX语法则便于我们在js中编写html代码。

1. React技术栈

学习React是有一定的学习成本的，主要是如果想要用它进行项目开发，就需要学习一系列它的技术栈，包括基本知识、运行编译环境和一系列插件。而我也只是学了个冰山一角。

1.1. 运行编译环境

我采用的nodejs+npm+yarn+webpack。

• Nodes:javascript运行环境，我们编写的代码需要在nodejs上运行。

• npm：在安装完nodejs后，默认就已经按转了npm了。npm是包管理软件，能够快速地基于命令行的方式安装各种组建包，并对组建包进行管理。例如：

  npm install -g create-react-app --save-dev
  

• Yarn:yarn和npm功能类似，都是对包进行管理。yarn具有缓存包的功能，下载过一次，下次安装可以直接从本地进行安装。

  yarn add react-redux
  

• Webpack:打包工具，用于将javascript进行打包。

1.2. ES6

要学习并使用react，ES6是必须要学习的。在react开发过程中，会大量地使用到ES6中的各种特性。诸如：

• class类：例如class InputComponent extends React.Component；
• let/const：定义变量、函数会大量使用到let和const，而不会再去使用var；
• import/export：需要使用import引入组件，并将自己写的组件通过export输出，方便其他组件引用；
• 模板字符串：便于编写字符串，不需要通过+来组装字符串。
• Object.assign()：用于将两个对象进行合并。

还有其他很多特性会用到，所以对ES6的学习非常重要。

1.3. React

React是基于组件化的思想进行开发的js框架，所以我们需要有组件化的思想。学习React主要会用到：

• jsx语法：通过该语法方便在js中编写html代码；只能有一个顶级元素！
• React.Component：这是React组件的基类，所以编写的React组件都要继承这个类。组件之间的参数的传递采用this.props进行传递。
• ReactDOM：用于将组件渲染到页