react——vite快速搭建一个react项目

为什么选vite?从 React 初学者的角度,可以选择使用 Vite + React,因为它尽可能地接近 React 的基本原理。如果只需要一个轻量级的单页应用/客户端渲染解决方案,也可以选择 Vite + React。对于我们初学者来说,vite毫无疑问是个不错的选择。

vite搭建react项目

Vite 需要 Node.js 版本 18+ 或 20+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。

npm create vite@latest / npm init vite

选择vite是因为他快,确实很快,如果你有兴趣了解为何它这么快?可以参考这篇文章。为什么vite这么快 这里 作为初学者,我们先快速的搭建好项目并且进行开发。

根据提示,在Project name后输入你的项目名称就行,然后选择react -> JavaScript 等待片刻就好了

cd test npm install npm run dev

进入到项目目录 初始化 运行项目 相比于CRA 还是很快的昂

进入到项目文件夹

node_modules

这就没啥说的,node包管理工具下载安装的包的文件夹

package.json

每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。负责管理整个项目用到的依赖包列表配置以及项目打包的一些脚本命令scripts配置。

favicon.ico

是浏览器tab上图标,也是这个项目的一个标志,也可以说是代表一个公司的标志。可以替换。

index.html

项目的入口文件,引用了第三方类库 <div id="root"></div>是项目的总容器,所有的内容存储在这个容器中。这个容器有且只能有一个。

App.jsx

export default App;是为了将App公开.

return的内容是类似于html结构的内容,就是jsx,jsx语法是react的主要语法。内部的div的className是为了区分html语法的一个类名,这个是div的样式引用。在这个文件中,只能用一个div容器,如果在div的同级目录添加别的内容,便会报错 className="App",是引用到App.css的样式。注意,页面内容样式是就近原则,首先用App.css的样式,App.css是组件的样式,index.css是全局的样式。

main.jsx

main.jsx文件通常作为项目的入口文件,用于初始化应用程序并将根组件渲染到 DOM 中。这个文件通常包含以下几个主要步骤:

  1. 引入 React 和 ReactDOM:引入必要的库来创建 React 组件和将它们渲染到 DOM 中。
  2. 引入根组件 :引入应用程序的根组件(通常是 App.jsApp.jsx)。
  3. 引入全局样式 :引入全局样式文件(如 index.css)。
  4. 渲染根组件 :使用 ReactDOM.renderReactDOM.createRoot 将根组件渲染到 HTML 文件中的某个元素(通常是带有 id="root"div 元素)。

根据需要创建的文件夹

components/

存放项目的所有 React 组件。每个组件通常有自己的目录,包含组件的 JavaScript 文件和样式文件。

开发

了解了基本的项目架构,我们就可以开始进行开发了 当你进入到react开发

相关推荐
RaidenLiu9 分钟前
告别陷阱:精通Flutter Signals的生命周期、高级API与调试之道
前端·flutter·前端框架
非凡ghost10 分钟前
HWiNFO(专业系统信息检测工具)
前端·javascript·后端
非凡ghost12 分钟前
FireAlpaca(免费数字绘图软件)
前端·javascript·后端
非凡ghost18 分钟前
Sucrose Wallpaper Engine(动态壁纸管理工具)
前端·javascript·后端
拉不动的猪20 分钟前
为什么不建议项目里用延时器作为规定时间内的业务操作
前端·javascript·vue.js
该用户已不存在27 分钟前
Gemini CLI 扩展,把Nano Banana 搬到终端
前端·后端·ai编程
地方地方29 分钟前
前端踩坑记:解决图片与 Div 换行间隙的隐藏元凶
前端·javascript
小猫由里香34 分钟前
小程序打开文件(文件流、地址链接)封装
前端
Tzarevich37 分钟前
使用n8n工作流自动化生成每日科技新闻速览:告别信息过载,拥抱智能阅读
前端
掘金一周1 小时前
一个前端工程师的年度作品:从零开发媲美商业级应用的后台管理系统 | 掘金一周 10.23
前端·人工智能·后端