简约网站版式开网站 主机 服务器
今天我来复盘一些react项目中的一些文件是做什么的。以及前端代码是如何和服务器交互的。
我们安装vscode编译器之后下载一个插件LiveServer，实现的效果是可以直接在浏览器打开html文件，极大提升开发体验。
我们在下载插件LiveServer之后，我们通过插件在浏览器打开html文件，这时候我们发现在地址栏上面127.0.0.1：5502/index.html，打开了我们的html文件，为什么会这样呢？为什么这个插件可以这样打开我们的html呢？
首先先提一个服务器这个抽象概念，我一直理解为一种硬件，就类似于铁皮疙瘩？里面是cpu啊什么高级处理器以及存储单元什么的，毕竟我一直理解为后端是服务器上面的软件，前端给后端传输数据中间有一个服务器，也就是说，我们要前端给后端传输数据，也就是后端接受数据处理，相当于银行办理业务，那么服务器就相当于银行，前端就是我们自己，我们去银行127.0.0.1然后对应的银行窗口5502办理我们的业务服务，也就是说，后端是我们要的服务，然后服务器是提供服务的场所，我们去服务器找我们需要的服务，也就是后端。
比如我们搜索b站打开之后发现路径是bilibili.com，其中bilibili是指的域名，一个域名对应多个服务器ip地址，也就是说如果一个服务器挂了，也就是出问题了，就可以用其他服务器，也就是更换ip地址就好了，然后我们在里面点击视频分类，b站就提供了视频观看服务，我们看漫画点击漫画就提供了漫画服务，也就是说，我们通过访问一个网站也就是我们前端网站，是一个客户端，通过在服务器上面运行之后，可以访问服务器里面的各种服务，通过我们设置的端口。
回归正题，我们现在可以对比发现我们的服务器地址就是127.0.0.1，这里指的是本地，也就是说插件给我们运行了一个本地服务器，把主机当作服务器给了我们一个访问.html文件的服务，然后我们关闭插件也就是停止服务器，服务消失也就失去访问能力。
这里的关键说明服务也是代码，只是这段代码被称为服务器。前端也就是客户端通过访问服务器里面的各种服务（通过对应端口）来让我们使用服务，比如我们在玩英雄联盟的时候，我们经常玩换肤模拟器，这是相当于我们在本地服务器中添加了皮肤数据，然后我们可以使用，但是其他人看不到，因为我们只是在本地服务器存储，而其他人通过游戏服务器来获取数据，当然没有我们本地添加的数据，也就是只有我们自己能看到。
现在介绍一些文件以及作用，首先就是package.json文件，在我们搭建项目的时候自动生成的文件，但是其实也是我们自己写的，比如
{"name": "vectr-next","version": "1.0.0","description": "my app","main": "index.js","scripts": {"test": "node server.js","start":"pwd"},"repository": {"type": "git","url": "https://436lcy.com"},"keywords": ["xwr"],"author": "lcy","license": "ISC","dependencies": {"axios": "^0.21.1"},"devDependencies": {"@types/jest": "^29.5.2"}
}
首先项目名称啊，项目版本，描述，main，不知道跳过吧，scripts就是我们的启动方式，格式是key value，也就是npm test就可以跑起来了，因为test是一个key对应的server.js其实是打开了这个服务器，然后服务器对应的打开文件路径也就是服务是打开index.html文件，所以就可以去我们在服务器设置的端口加地址打开了，respository也就是git仓库，地址就算是仓库地址，keywords是我们安装包的关键字，通过这些可以搜索到对应的包（依赖）。还有就是生产环境和开发环境对应的配置包文件，还有会自动生成package-lock.json，缓存包方便安装。
然后react项目的关键就是public中的静态资源里面的index.html 根节点，整个项目的root节点，以及src中的App.js 根组件以及index.js入口文件，入口文件渲染组件到根节点，整个项目的连接与启动，App.js是外壳组件，里面套用各种组件，入口文件一般只是渲染App组件。
然后就是node-modules一些包的模型，里面全是依赖包的相关文件。
这里就是对react项目文件了解的内容，大家发现理解的问题希望可以评论出来。