一、开发
个人之前也粗略看过react的文档，但是程序员最怕的就是没有项目实操，看完后一段时间就全忘了，但是现在市面上react的使用又很多（我太难了）。最近因为疫情只能呆在家里，刚好利用这段时间搞一搞。当然也是粗略的搞，做完一个大屏展示后，发现react上手确实比vue要难点。react没有vue一样的模板语法，react更接近原生js的操作，而且配置项也比较多。
这篇文章把我开发中遇到的一些坑记录下来，方便以后查询
1、创建项目
直接利用react的脚手架进行创建，这里有两种方式:
如果你本地没有全局安装create-react-app，需要用npx
如果你本地全局安装了，就可以直接使用
个人建议先在本地全局安装create-react-app命令，因为使用npx安装的时候，是直接从服务器上去获取的，不是很稳定；本地安装后，要稍微快点。
2、项目目录结构
利用create-react-app创建项目后，就会生成如图的目录结构(此图借用)：
可以根据个人的习惯灵活组织项目结构，如加入路由、redux等。
3、使用css预编译
个人偏向less，但react默认不支持less，所以需要配置less-loader，但是我把所有的目录看了一遍，发现不知道在什么地方配置（要死了），后面百度了下，发现**create-react-app创建的项目默认是没有config目录的，需要执行npm run eject才能暴露出来。(**尴尬)
然后打开config目录中的webpack.config.js进行修改
具体修改哪些地方可以百度下，配置起来还是比较麻烦的，所以对新手不是那么友好。
4、本地运行
本地运行很方便，直接输入npm start命令就会开启一个本地服务器，并自动打开浏览器，react本地服务器默认端口3000，如果端口被占用，就会随机分配一个端口：
因为每次启动的端口都会被随机，不是很方便，因此你可以修改固定的端口。react要修改默认端口，需要修改scripts目录中的start.js，同样create-react-app创建的项目默认是没有scripts目录的，如果要生成scripts目录，同样需要执行npm run eject命令。执行完命令后才会暴露出这个目录，然后找到start.js里面的端口配置：
修改完成后重新执行npm start，就会在指定端口启动
二、线上部署
线上部署的时候遇到的问题就比较头痛了，每台服务器的情况不一样，你的问题也许别人没遇到过，别人给的答案可能根本就不能解决你的问题，只能按实际情况来。
1、服务器环境安装
首先确保你的服务器上安装了node，怎么安装可以网上找下，有很详细的文章说明，当然要求你懂点linux命令。
2、安装依赖
将本地处理好的代码放到服务器上，这里记得执行npm install命令来安装依赖，在项目的目录中执行npm install命令，node会根据package.json中的内容来安装依赖。
3、编译
这一步也不会有什么问题，因为服务器上是不能直接用npm start来运行，涉及到一些资源的路径问题。所以需要先执行npm run build命令来编译文件。编译成功后会生成一个build目录，里面就是编译过后的文件：
4、运行
运行分两种方式，一种是把build目录拷贝到nginx对应的目录中，或者用nginx代理到build目录，这中方式比较简单；第二种方式是用serve -s build来启动服务，然后用nginx代理到react服务，这里我遇到了问题：
安装了serve命令后，执行serve -s build时提示命令不可用
这个问题困扰了整整一个上午，网上查资料有几种说法，有说需要设置package.json中的homepage，我照着设置了，但是任然无法解决；有说是因为node版本太低的原因，所以我想升级node版本，于是我安装了n命令，结果发现n命令也无法使用。
到这里我打开明白了不是node的原因，问题应该在服务器上，终于我找到了一篇文章说是因为node的环境变量问题，需要修改/etc/profile文件
然后在文件最后加上
export PATH="$PATH:/usr/local/nodejs/bin"
/usr/local/nodejs/bin是你的nodejs安装目录，然后执行让变量生效的命令
然后重新安装serve命令
成功后，执行
就可以正常启动了
但是，这个时候你不太好访问，需要在nginx中添加代理，找到nginx的安装目录，然后找到nginx.conf文件添加代理：
location / {
proxy http://127.0.0.1:5500;
}
到这里就皆大欢喜了，页面跑起来了！当然，如果你也是这么做的，但是任然有问题也不要灰心，可以仔细找找问题。~~~~
