本文主要介绍如何用React开发的脚手架工具vite快速搭建一个符合实际业务项目结构的hello world网页项目并理解React的代码文件结构以及页面渲染流程。
文章目录
一、准备工作：安装node.js
Windows系统的node.js安装十分简易，没有环境安装经验的伙伴可以参考文章：Windows系统下安装node.js
二、项目搭建
创建项目目录
我们需要先创建一个用于放置项目文件的目录，之后该项目相关的命令操作都需要在该路径下执行。我们新建一个hello-react的目录，然后进入到该目录，命令行路径提示如下：C:\hello-react>
使用Vite创建并启动一个项目
vite是一个构建工具，可以理解为一个模块打包器。 它的主要目标是快速将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用。
我们可以使用命令npm create vite@latest my-app -- --template react来快速创建一个名为my-app的项目。比如我们的项目希望叫做hello-react，就可以把命令改为npm create vite@latest hello-react -- --template react
命令中间加了一个孤立的--，会让vite选择默认的配置(react+javascript)，如果需要调整可以去掉--，用命令npm create vite@latest my-app --template react来启动项目，然后根据提示选择相关工具配置。
看到控制台最终已经输出如下内容：
shell
VITE v7.1.12 ready in 297 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help根据输出，我们的项目已经运行起来了，浏览器访问http://localhost:5173/即可以到看到了。于是 我们浏览器访问指定地址后可以看到如下页面：
学会如何修改页面内容
网页内容是如何展示出来的
我们要修改网页内容，就要知道网页内容是如何展示出来的。
首先用你喜欢的编辑器打开项目（我个人偏爱并强推VS Code），可以看到如下右侧项目代码文件结构：
如果过了解过网页开发的基础知识，会知道我们看到的网页都是html，然后通过css和js在html上添加样式以及交互效果。所以我们可以点开项目根目录的index.html，看到代码内容如下：
index.html内容中的<title>与我们看到的页面tab名称是对应的，说明我们看到的确实是这个html里面的内容。但是<body>标签中并没有内容，那么我们在页面上看到的vite和react的图片和文本是哪来的呢？
这里提两种探索的方法：
方法一：搜索关键内容
我们看到页面有四个文本（三个纯文本内容和一个按钮文本内容），所以我们可以直接用IDE搜索这些文本所在位置，如下：
我们尝试修改一下找到的App.jsx中的Vite + React，改成Hello React World!并保存，然后刷新浏览器查看页面是否发生变化，可以看到页面如下：
页面内容确实跟预期一样发生了变化。再去看App.jsx文件中的其他内容，可以看到浏览器页面里展示的其他内容也都在这个代码文件中。
所以我们可以确定，如果我们想修改页面内容只需要修改App.jsx即可
同样地，当我们想进一步去探索React是如何知道要把App.jsx的内容渲染到浏览器页面上的，我们就可以搜索App.jsx，看哪里用到了这个文件，搜索结果如下：
我们可以看到，这是在一个src目录下main.jsx文件中，根据名称可以知道，src是source的缩写，代表源代码文件目录，main.jsx是主入口文件。代码中有一个.render()函数调用（render是渲染的意思），那么到这里我们可以大胆推测整个网页的渲染逻辑就是，React有一个主入口main.jsx，我们的页面具体内容App.jsx会被导入到这个入口文件中，然后放到渲染部分（即render()包裹的部分）中进行内容的渲染。所以我们可以通过浏览器地址http://localhost:5173/看到页面渲染的App.jsx中的内容。
方法二：看目录
使用标准化工具来组织代码的好处是，文件的位置和命令都有迹可循。我们看到根目录下index.html之外的文件名字都表明这些文件是一些配置相关的文件（比如eslint.config.js是eslint的配置文件、vite.config.js是vite的配置文件）。而其他文件夹根据名字可以知道：
node_modules存放项目相关的依赖包src是source的缩写，所以是存放源代码的地方pubilc是公开目录，存放可以公开访问的文件src/assets是资源/资产，所以存放我们在项目中用到的比如图片、视频或者音频等内部使用的内容资产
不同构建工具（比如用create-react-app、create-next-app、rsbuild等）或者不同框架（比如Vue）得到的项目文件结构可能不同，但是基本都会使用通用的名称，比如：
build是写好代码之后构建完毕用于部署到服务器上的文件夹config是用来放配置的目录static是静态的意思，该目录是用来存放一些静态文件的地方test是放代码测试文件的地方
所以如果我们要查找页面的内容（涉及代码，属于可改变的内容而非静态文件），应该在src目录下找，打开src目录，可以看到两个文件App.jsx和main.jsx。一般来说，直接存放在目录下的，是类似于"程序入口"一样的文件。根据文件名称，App代表的是Application（应用）内容，而main代表的应该是主入口，所以我们先尝试打开main.jsx，查看内容
可以看到main.js里面import 导入了一些东西，虽然我们不知道具体是什么，但是我们的代码是标准化的，所以根据命名，可以推测：
App作为appliaction（应用）的简写，应该代表跟应用相关的内容；getElementById('root')翻译过来是通过ID来获取元素的意思，获取了某一个id为root的元素，之前我们在index.html中看到<body>中就是一个id为root的元素，可以猜测这行代码就是获取了这个元素。。render是渲染的意思，在渲染的内容中放入了<StrictMode> <App /> </StrictMode>，所以这里应该是定位到了index.html的body位置，然后将App的内容渲染到了页面中。
根据以上三点，我们可以基本确定，我们在浏览器中看到的内容就是从这里传到index.html并被浏览器展示出来的。
进一步，我们查看App的内容，看页面的图片和文字是如何引入到页面的，打开App.jsx之后，可以看到内容如下：
我们看到App.jsx中有两个<img>分别引用了对应的logo，这就是页面展示的vitel和reactlogo图片来源。我们可以尝试删除其中一张logo图片或者修改文件中其他内容，然后检查页面展示的内容是否变成了我们修改后的内容。通过刷新浏览器页面，我们的推测可以得到验证，我们也明白了React是如何将代码渲染到浏览器的。