React前端企业级开发框架

React前端企业级开发框架

今天给发家梳理一下前端企业级三大框架之一的react框架的环境的搭建和项目的构建。

React

我们之前学习过搭建ssm框架，ssm框架是基于MVC思想的框架：
m：model => POJO类
v：view => jsp
c： controller => 控制器

越学到后面，我们必须向企业级框架靠拢，实行前后台分离，前台通过页面来获取后台的数据，后台有框架支持的话，前台也得有框架的支持，以此来方便、快速开发我们的项目。
react框架是基于MVVM思想的框架：
M：model => js对象，js数组
V： view => html/组件
VM：viewmodel => 数据单向绑定,双向数据绑定（表单）

上面是我们对框架的基础认知，了解框架的结构思想，下面我们来从零开始搭建我们的react的环境与项目。

一：首先在我们的电脑上实现cordova环境的安装与配置：
1、安装nodejs(自动包含npm)
2、在命令行中通过npm语句npm install -g cordova 安装cordova(如果提示网络连接失败，需要设置网络代理，搭理网址：npm config --global set registry http://registry.cnpmjs.org)
3、在命令行里通过安装成功的cordova,创建一个混合项目，创建语句：
cordova create CordovaDemo com.first.helloworld HelloWorld
CordovaDemo:项目文件夹名
com.first.helloworld:项目包名
Helloworld:项目 名
4、通过cd CordovaDemo 命令进入到文件夹内，通过以下命令cordova platform add android，为你的创建的项目添加安卓运行平台(ios平台添加也一样）

二：接下来我们用react框架创建项目：
1.安装create-react-app
$ npm install -g create-react-app
2.使用create-react-app创建react项目
$ create-react-app app01
app01目录下会产生以下文件
package.json
node_modules
build 产品代码
src 源代码（es6）
3. 启动
$ cd app01
$ npm run start

yarn与npm类似，用于模块管理，react项目中一般建议使用yarn。
> npm init
> npm install
遍历package.json文件中的所有依赖，依次进行安装
> npm install xxx@xxx
安装指定版本的模块
> npm install --save xxx
产品依赖
> npm install --save-dev xxx
环境依赖
> npm install -g xxx
全局安装
> npm uninstall xxx
> npm run xxx
运行指定命令，package.json script
npm start / npm run start

还可以用yarn命令
安装 yarn
> yarn --version
> yarn init
> yarn add xxx@xxx
产品依赖
> yarn add --dev xxx@xxx
环境依赖
> yarn upgrade xxx
> yarn remove xxx

完成上面的第三小步后，浏览器会出现一个html页面，带花的界面，说明你已经成功创建一个基于react框架的前端项目。