react目录结构

godlike-icy

于 2023-07-21 10:39:10 发布

阅读量427

点赞数

分类专栏： react web前端文章标签： react.js javascript 前端

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_43682422/article/details/130201167

版权

web前端同时被 2 个专栏收录

72 篇文章 3 订阅

订阅专栏

22 篇文章 0 订阅

订阅专栏

比较全面的react目录结构。
在这里插入图片描述

目录详解

assets：放置原始资源文件。

components：存放全局组件。

contants：常量文件夹，存放常量。

i18n：i18n国际化，各种语言的翻译。

pages：页面文件夹。

router：路由文件夹。

utils：存放一些常用函数的封装。

实际开发中也可以简单按照个人风格调整，比如const单独拿出来，不放在文件夹中，因为实际上并没有那么多常量去使用。

utils也可以放在最外层而不用放在文件夹中。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
react目录结构

实际开发中也可以简单按照个人风格调整，比如const单独拿出来，不放在文件夹中，因为实际上并没有那么多常量去使用。utils也可以放在最外层而不用放在文件夹中。i18n：i18n国际化，各种语言的翻译。contants：常量文件夹，存放常量。components：存放全局组件。utils：存放一些常用函数的封装。assets：放置原始资源文件。比较全面的react目录结构。router：路由文件夹。pages：页面文件夹。
复制链接

扫一扫

专栏目录

godlike-icy CSDN认证博客专家 CSDN认证企业博客

码龄6年

156: 原创

5万+: 周排名

4万+: 总排名

23万+: 访问

: 等级

2208: 积分

189: 粉丝

410: 获赞

103: 评论

902: 收藏

私信

关注

热门文章

分类专栏

web前端 72篇
前端性能优化 2篇
CSS 2篇
前端安全
TypeScript 2篇
react 22篇
前端知识点 16篇
算法题 39篇
vue 9篇
javaweb 2篇
安卓 1篇
Servelet 1篇
数据库 5篇

最新评论

【React】react-router v6 基础（含代码）
极简的liyi22: useSelectedRoutes
vscode配置用户代码片段（包括删除方法）
godlike-icy: 如果你发现你的代码片段在 .txt 文件中工作正常，但是在 .env 文件中不工作，那可能是因为 .env 文件没有被关联到一个特定的语言模式，因此它不触发任何代码片段。要解决这个问题，你可以尝试以下步骤：检查 .env 文件的语言模式：打开一个 .env 文件。查看 VSCode 右下角的状态栏，检查当前文件的语言模式（例如，“纯文本”）。点击语言模式，从弹出的菜单中选择一个合适的语言模式（比如 “环境变量” 或者 “Properties”）。关联 .env 文件到一个具体的语言：如果 .env 文件并没有一个默认的语言模式，你可以通过设置文件关联来强制 .env 文件使用某种语言模式。按照以下步骤进行：打开设置，可以通过命令面板（Ctrl+Shift+P 或 Cmd+Shift+P）输入 “Preferences: Open Settings (JSON)”。在 settings.json 文件中添加下面的代码： "files.associations": { "*.env": "plaintext" // 或者是你想要的任何其他语言 } 将 "plaintext" 替换为你希望 .env 文件关联的语言。自定义或添加代码片段：如果 .env 文件现在已经有了正确的语言模式，但依然没有触发代码片段，可能是因为还没有为这种语言模式定义代码片段。按照以下步骤添加或自定义代码片段：在命令面板中输入 “Preferences: Configure User Snippets”。选择你为 .env 文件设置的语言模式对应的代码片段文件。在代码片段文件中按照 JSON 格式添加你的代码片段。以上步骤应该能帮助你解决 .
vscode配置用户代码片段（包括删除方法）
hellopbc: 非常感谢，我还发现我得代码片段在txt文件可以生效，但是在env文件不生效，很奇怪
vscode配置用户代码片段（包括删除方法）
godlike-icy: 在一些代码编辑器中，比如 Visual Studio Code，当你使用代码片段（snippets）功能时，可以定义带有占位符的模板。这些占位符可以让你在填写一个变量后跳转到下一个变量。在 Visual Studio Code 中，当你通过代码片段插入代码后，可以使用 Tab 键在占位符之间跳转。每按一次 Tab，光标就会移动到下一个占位符位置，这样你就可以依次填写每个变量的值而不需要用鼠标点击。例如，一个简单的代码片段可能看起来像这样： { "Print to console": { "prefix": "log", "body": [ "console.log('${1:firstVariable}', ${2:secondVariable});", "$3" ], "description": "Log output to console" } } 在上面的代码片段中，${1:firstVariable} 和 ${2:secondVariable} 是带有占位符的变量。数字表示跳转的顺序，冒号后面是占位符的默认值或提示信息。当你插入这个代码片段并填写完 ${1:firstVariable} 后，按下 Tab 键会将光标移动到 ${2:secondVariable}。
vscode配置用户代码片段（包括删除方法）
hellopbc: 代码片段里定义了多个变量，怎么不使用鼠标，在一个变量编辑完了，就顺利跳到下一个要编辑的变量呢

您愿意向朋友推荐“博客详情页”吗？

强烈不推荐
不推荐
一般般
推荐
强烈推荐

提交

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

godlike-icy 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。