我们首先介绍一下React。React是由Facebook公司开源的一个JSLibrary,官方说法是:
Adeclarative,efficient,andflexibleJavaScriptlibraryforbuildinguserinterfaces.
从中可以看出React不是一个框架,它只是一个库。它只提供UI层面的解决方案。在实际的项目当中,它并不能解决我们所有的问题,需要结合其它的库,例如Redux、React-router等来协助提供完整的解决方法。
我们在开发过程中常常听到组件化这个词,在前端开发中,组件化可以帮助我们解决前端结构的复用性问题,整个页面可以由这样的不同的组件组合、嵌套构成。
一个组件有自己的显示形态和行为,组件的显示形态和行为可以由数据状态(state)和配置参数(props)共同决定。数据状态和配置参数的改变都会影响到这个组件的显示形态。
当数据变化的时候,组件的显示需要更新。所以如果组件化的模式能提供一种高效的方式自动化地帮助我们更新页面,那也就可以大大地降低我们代码的复杂度,带来更好的可维护性。
React基本环境安装
想要使用React不论实在开发还是生产环境,都需要一堆的库以及工具来辅助:编译阶段需要babel,帮助管理状态需要Redux,构建单页面应用需要React-router等等,这也就是所谓的React全家桶。
npm的安装配置
在正式学习React技术栈之前,我们先来介绍一下之后经常要使用到的npm。npm是一个基于nodejs的JavaScript包管理工具,全称叫做nodepackagemanager。(类似于iOS开发中的Cocoapods,C#中的NuGet)。所谓的包呢,其实就是可复用的代码,每个人都可以把自己编写的代码库发布到npm的源(registry)上面进行管理,你也可以下载别人开发好的包,在你自己的应用当中使用。通过使用npm作为项目的包管理工具,我们可以很方便地在我们的开发项目中引入以及管理第三方的框架或者库,而不需要像以前,手动下载复制粘贴代码文件。
npm的安装非常简单,不管你是用的是什么操作系统,我们只需要打开nodejs