前言
目前前端项目开发的主流大概就是 Vue、React了
Vue写起来与小程序非常相似，为html+js+css的形式，使用方式有所不同，一旦会了一个，学另一个很快
React 写法则是默认在 js代码块中写布局，当然可以封装，写法上与 React-native 很相似，很适合React-native经验的上手，可以接入 TypeScript，让代码更容易控制
React前端项目构建四部曲：
1、安装 node、npm、yarn
官网安装 node，或者homebrew安装，安装后会自带npm，可使用 npm 安装 yarn
windows 下 yarn 最好使用安装包，避免环境变量的配置
然后打开命令行准备操作
2、安装 create_react_app
npm install -g create-react-app
3、创建项目
可以 cd 到桌面，执行下面命令会生成一个测试案例（注意：最后一个project1是项目名称，可以改，大写可能失败）
npx create-react-app project1
或
yarn create react-app project1
如果想创建typescipt项目，直接执行下面命令 project1 仍然是项目名称，可以改
npx create-react-app project1 --template typescript
或
yarn create react-app project1 --template typescript
4、使用yarn或者npm install安装三方库
打开终端，进入到项目目录，执行yarn命令安装三方库
然后使用 yarn start 命令运行项目
当添加新的三方库的时候，使用 npm 或者 yarn
生成的项目中，主要有两个文件夹
public: 用来储存公共文件
src: 用来编写页面功能
javascript和typescript创建的项目目录对比
javascript
typescript
对比发现目录区别不大，主要是js文件的替换和 package.json中的依赖更新了
typescript 项目中会有响应的语法检测，其中 tsx 组件主要是应用在编写UI中， ts类型的文件，一般是用来申明类型，或者一些处理类使用，当然 typescript项目中，也可以混用 js 文件，在typescrip使用时需要注意类型的声明
另外，后面也我会编写一个简单的项目，分别是 javascript 和 typescript以便参考
Yarn和npm命令对比
| npm | yarn | |
|---|---|---|
| npm install | yarn | 安装三方库 |
| npm install react --save | yarn add react | 添加指定仓库(react) |
| npm uninstall react --save | yarn remove react | 删除指定仓库(react) |
| npm install react --save-dev | yarn add react --dev | 添加指定仓库到dev依赖 |
| npm update --save | yarn upgrade | 更新npm或者yarn |
开发UI库推荐
开发过程中可以使用 阿里的 ant.design，其里面包含的大多数常用的组件
打包：
打包运行到服务器中需要执行的步骤(没有yarn可以改成npm，也可以按照运行后的提示给命令)：
git pull 拉取最新代码
yarn(npm install) 更新三方库
yarn build(npm run build) 打包到build文件夹
然后服务端在目录下执行
//yarn的
yarn global add serve
serve -s build
//npm的
npm install global add serve
serve -s build
打包的操作让服务器写脚本执行步骤打包上传到响应服务器即可
