React脚手架安装，react项目创建运行，react打包生产build

一：安装React脚手架

1.安装node

这里就不详细说了

2.npm全局设置淘宝镜像

原因：

由于网络限制，外网无法直接访问，很多人无法直接安装react脚手架，也无法通过指令npx create-react-app来创建react项目。即使会科学上网也无济于事，因为有一些依赖还是不能完整的拉下来，说到底还是因为网络不通畅的原因。

解决办法：

使用国内淘宝镜像来安装react脚手架：

打开终端，比如win+R键，输入cmd，然后回车，即可打开一个终端

输入指令：

npm config set registry https://registry.npmmirror.com

上面的指令是全局设置淘宝镜像 ，这样就成功使用国内淘宝镜像了 

3.安装react脚手架：

随便在一个文件夹下面打开终端

输入指令：

 npm --registry https://registry.npmmirror.com install  -g create-react-app

上面的指令是使用淘宝镜像来全局安装react的脚手架 

二：创建react项目

在此之前一定要确保npm全局配置了淘宝镜像，因为即使你科学上网也不能完整的把所有的项目依赖全下载下来。

随便在一个文件夹下面打开终端，执行指令

npx create-react-app react-app-lee

即可创建react项目

解释一下：

从 npm 7 开始，官方推荐使用 npx 来运行 create-react-app 。不用担心，npx是npm内置的，直接执行上面的命令就行了，就可以创建react项目了。react-app-lee这个是你要创建项目的项目名称，也就是创建项目成功后的项目文件夹名称，建议用纯英文，并且小写，不要出现其他的字符，不然会报错。

三：运行react项目

终端执行指令：

cd react-app-lee

解释：切换到刚刚创建的项目的文件夹

运行或者说启动这个react项目：

执行指令

npm start

这个也可以运行项目哦，npm start是npm run start这个指令的简写

npm run start

然后，浏览器访问控制台输出的项目运行地址即可

浏览器看见这个页面，就说明成功创建了react项目，并且成功运行。

四：react项目打包生产

打包生产指令：

在项目文件夹下面打开终端，执行命令

npm run build

然后你就可以看见，react项目打包后的项目文件到了build文件夹下面 

注意：

build文件夹下面的index.html这个文件是不能直接用live server这样的插件来运行的，你会发现报错，页面没有效果。

很正常，但是代码没有问题的。用正规正式web服务器即可，比如我用的阿帕奇apache来运行这个生产项目，就可以正常访问。至于什么原因，浅浅的解释一下，还是服务器作用域的原因，也就是这个服务的配置的根路径是什么，相对或者绝对文件路径不准确，或者文件不在这个服务根路径下都会导致生产的一些文件访问不到，浏览器就不能正确的访问到这个生产项目的所有的文件。

所以建议使用阿帕奇服务来运行生产的前端项目。