随着网络的发展，web应用已经是大势所趋，桌面客户端的市占率越来越低，就业也越来越难。想保住饭碗就必须要跟上时代，转行！！Web前端是目前主流的技术方向，也是各大企业迫切的岗位，接下来就开始转行之旅了。

刚进入Web前端行列，你会发现这个世界跟以往写客户端有比较大的区别；比如，开发软件不一样，需要知道的知识面不一样，使用习惯不一样等等。

目前主流的web前端框架react已经是热火朝天，今天就以搭建react脚手架环境开始学起。

常用工具科普

Web前端需要依赖各种不同的技术支撑，包含有包管理器，node服务，webpack打包服务，Bable ES6编译，common.js规范等等。

nvm 管理工具

nvm 是用于管理node.js的版本以及npm的对应版本的工具。它可以帮助您下载安装node.js以及版本的切换，下载对应版本的node.js后，也会同时下载对应版本的npm工具。

npm 包管理工具

npm 是随同node.js一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

1. 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
2. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
3. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

yarn 包管理工具

Yarn 是类似于npm的包管理工具，效率更高，速度更快，更推荐使用。

环境部署

1. 根据上文链接，先将nvm（nvm-setup.exe）,yarn (yarn-1.22.5.msi) 等软件下载到本地（本次部署是基于windows操作系统），并安装。
2. 打开 cmd 命令行，输入nvm检查是否安装成功（yarn可以输入yarn -v 查看是否安装成功）。如果提示命令不存在，则重启操作系统后重试。因为要加入到环境变量，如果环境变量变更没有通知系统是需要重启电脑才能生效的。
3. 使用 nvm 安装 node.js。输入命令nvm install [node版本号 或用 stable 表示最新]。安装过程中，会同步安装npm。（如果安装失败，需要多重试几次，因为网络原因经常会出现失败的情况。如果nvm不是最新版本，建议升级到最新版本后重试。）
4. 安装成功后，使用命令nvm use [node版本号]即可。这里需要注意，如果没有使用命令去指定node的版本，node和npm的命令都不能被启用。也就是说，命令将无法识别。可以通过nvm list 或 nvm ls查看已安装的node版本,当前使用的版本会标明。如果要切换node版本，只需要使用nvm use [node版本号]就可以完成版本切换。

好了，到这里，最基本的环境就准备好了。接下来我们尝试搭建一个reactapp脚手架。

1. 找一个空的文件夹目录，打开vs code软件,并通过菜单Terminal进入到终端命令行界面。 输入以下命令：yarn create react-app myapp 或 npm init react-app myapp 进行创建reactapp脚手架。这里需要注意，myapp的命名只能是小写字母，否则会报错；如果执行该命令时，没有指定node版本，node指令将无法识别，命令执行报错，此时需要先指定node版本。 将myapp作为工作目录，切换到该工作目录 cd myapp，没有切换到工作目录，命令无法执行。
2. 创建好了后，使用命令yarn或npm install初始化和安装相关依赖包。如果该步骤没有执行，那么脚本中的命令将无法识别;使用npm初始化还可能会存在一些警告，可以通过命令npm audit fix来修复。
3. 通过命名yarn init或npm init 创建默认的打包配置文件package.json，该文件包含了项目的一些基础描述。
4. 使用命令yarn start或npm start启动项目。

最后再说一下，当你安装了yarn你会发现，使用npm指令的时候，实际上调用了yarn指令，所以后续的命令主要是针对yarn来进行学习使用。