1.开发者之前亲自看过react文档，但是程序员最怕的就是没有项目实践。看完他就会忘得一干二净，但是现在react的用处很多（对我来说太难了）。最近因为疫情，只能宅在家里，正好利用这段时间做点事情。当然，也很粗糙。做完一个大屏展示，发现react入门确实比vue难。React没有与Vue.js相同的模板语法。React更接近于原生js的运行，配置项也更多。这篇文章记录了我在开发中遇到的一些坑，方便以后查询1.创建项目直接使用react脚手架来创建。这里有两种方式：如果本地没有全局安装create-react-app，需要使用npxnpxcreate-react-app项目名如果本地安装了，直接使用create-react-app项目名个人建议先在本地和全局安装create-react-app命令，因为使用npx安装时，是直接从服务器获取的，不是很稳定；本地安装后，应该会快一点。2、项目目录结构使用create-react-app创建项目后，会生成如图所示的目录结构：项目结构可以根据个人习惯灵活组织，比如添加路由、redux等3.使用css预编译个人比较喜欢less，但是react默认是不支持less的，所以需要配置less-loader，但是看了所有的目录，发现不知道配置在哪里（快死了)，后来又百度，发现create-react-app创建的工程默认是没有config目录的，需要执行npmruneject暴露出来。（尴尬）npmruneject然后打开config目录下的webpack.config.js进行修改。具体修改可以百度下载。配置起来还是比较麻烦，对新手不是很友好。4.本地运行在本地运行非常方便。直接输入npmstart命令启动本地服务器，自动打开浏览器。react本地服务器默认端口是3000，如果端口被占用，会随机分配一个端口：因为每次启动都会随机分配一个端口，不太方便，所以可以修改固定端口。修改react默认端口，需要修改scripts目录下的start.js。同样，create-react-app创建的项目默认是没有scripts目录的。如果要生成scripts目录，还需要执行npmruneject命令。命令执行后会暴露这个目录，然后在start.js中找到端口配置：修改完成后，再次执行npmstart，就会在指定的端口启动。2.线上部署线上部署遇到的问题是比较头疼的。每个服务器的情况都不一样。你的问题别人可能没有遇到过，别人给的答案也不一定能解决你的问题。您只能按照实际情况进行操作。1.服务器环境安装首先，确保你的服务器上安装了node。安装方法可以在网上找到。有非常详细的文章解释它。当然，你需要知道一些linux命令。2.安装依赖把本地处理好的代码放到服务器上。这里记得执行npminstall命令安装依赖。在项目目录下执行npminstall命令，node会根据package.json中的内容安装依赖。3、编译这一步不会有问题，因为服务器不能直接用npmstart运行，涉及到一些资源路径问题。所以需要先执行npmrunbuild命令编译文件。编译成功后，会生成一个build目录，里面有编译后的文件：4.有运行和运行两种方式。一种是将build目录复制到nginx的对应目录，或者使用nginx代理到build目录。比较简单；第二种方式是使用serve-sbuild启动服务，然后使用nginx代理到react服务。这里遇到了一个问题：安装serve命令后，执行serve-sbuild时提示命令不可用被这个问题困扰了整整一上午，网上搜资料有几种说法。有人说需要设置package.json中的主页。我按照设置设置了，还是解决不了；我升级了node版本，所以我安装了n命令，但是发现n命令也不可用了。此时打开一看，才明白不是node的原因。问题应该出在服务器上。最后找到一篇文章说是因为node的环境变量问题。我需要修改/etc/profile文件vim/etc/profile在文件末尾添加OnexportPATH="$PATH:/usr/local/nodejs/bin"/usr/local/nodejs/bin是你的nodejs安装目录，然后执行命令source/etc/profile使变量生效，然后重新安装serve命令npminstall-gserve成功后，执行serve-sbuild即可正常启动。但是，此时，您并不容易访问。需要在nginx中添加代理，找到nginx安装目录，然后找到添加代理的nginx.conf文件：location/{proxyhttp://127.0.0.1:5500;}到这里大家都很开心，页面运行起来了！当然，如果你也这样做了，但是如果还是有问题也不要气馁，你可以仔细找找问题所在。~~~~
