react目录结构解析

最新推荐文章于 2024-05-09 18:14:19 发布
最新推荐文章于 2024-05-09 18:14:19 发布
阅读量1.8k 收藏 1
点赞数 1
分类专栏： react入门 文章标签： react结构 react工程结构
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lee727n/article/details/117298473
版权

结构图

通过脚手架搭建好最简单的react程序以后，结构目录如上图，对于有前端基础的同学来说，package.json  gitignore 这些都很熟悉了。我们主要介绍一下react中的核心文件

1.public中 index.html 这个文件是主页面 主页面的结构，后面我们写的页面都是加载到这个h5页面上。也就是说这个文件是我们程序的主结构页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link r
最低0.47元/天 解锁文章
MIKE-zi
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
React目录结构详细解析
李彬博客专栏
12-12 8482
总览 WebStorm创建工程后目录结构如图所示： 1、package.json 每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。 负责 管理 整个项目用到的 依赖包 列表配置 以及 项目打包的一些脚本命令 scripts 配置 1.1 name字段 项目工程名称 "name": "untitled" 项
React项目文件目录结构
weixin_43935061的博客
05-24 1607
React项目文件目录结构
最新React进阶（三）：React项目文件结构介绍，如何学习网页前端开发
最新发布
2401_84418883的博客
05-09 270
我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】自动生成的webpackeslint（代码检测）、url-loader（图片BASE64[小于10000kb的图片]）、ES6和JSX语法解析）、css-loaderCSS代码解析）、（产出HTML插件）等内容；仅仅是安装了react中最常用的。
react项目完整目录结构
weixin_43755104的博客
09-04 4671
文章目录react项目完整目录结构参考 react项目完整目录结构参考 参考 一个完整react项目的目录结构
一个完整react项目的目录结构
热门推荐
zhengming0929的博客
12-26 5万+
目录说明 │ .babelrc #babel配置文件 │ package-lock.json │ package.json │ README.MD │ webpack.config.js #webpack生产配置文件 │ webpack.dev.config.js #webpack...
react-deeplearn:React16原始解析React15模拟实现-源码解析
03-24
目录结构 ├──packages（带注释的React16.8源码来源 ） ├──src │├──index.js │├──React ││├──component.js ││├──createElement.js ││├──enqueueSetState.js ││└──index.js ...
React搭建文档.docx
03-08
项目结构通常包括以下几个关键部分： - `README.md`: 项目简介 - `package.json`: 项目配置文件，包括npm脚本、依赖包等 - `package-lock.json`: 锁定版本信息，确保团队成员有相同的依赖包版本 - `.gitignore`: Git...
react-15.6-source-parsing:react15.6版本源码解析-源码解析
03-24
1.jsx创建的虚拟元素会被编译成React的createElement方法 var ReactElement = function ( type , key , ref , self , source , owner , props ) { var element = { // 这个标签允许我们将其作为一个React元素进行...
详解如何优雅地在React项目中使用Redux
11-28
前言 或许你当前的项目还没有到应用Redux的程度，但提前了解一下也没有坏处，本文不会安利大家使用...目录结构 Tips：与Redux无关的目录已省略 |--src |-- store Redux目录 |-- actions.js |-- index.js |-- reduc
利用React高阶组件实现一个面包屑导航的示例
10-14
在React中，我们可以创建一个名为`BreadcrumbsComponent`的组件来呈现这种结构，它需要知道每个面包屑的文本、路径以及相邻面包屑之间的分隔符。 假设我们有如下的路由配置（以react-router v4为例）： ```...
React入门 - 02（工程目录结构解析）
千里之行，始于足下！
01-08 1420
React入门 - 02（工程目录结构解析）
react目录结构
qq_43682422的博客
07-21 442
实际开发中也可以简单按照个人风格调整，比如const单独拿出来，不放在文件夹中，因为实际上并没有那么多常量去使用。utils也可以放在最外层而不用放在文件夹中。i18n：i18n国际化，各种语言的翻译。contants：常量文件夹，存放常量。components：存放全局组件。utils：存放一些常用函数的封装。assets：放置原始资源文件。比较全面的react目录结构。router：路由文件夹。pages：页面文件夹。
React工程目录简介
孤星的博客
03-19 1016
通过React脚手架创建的项目，共会有以下文件 .git node_modules public src .gitignore package.json package-lock.json README.md .git 与 .gitignore .git是git初始化文件，.gitignore中的文件不会被存储至git中 .gitignore中的默认文件路径是脚手架生成的 node_modules 此目录下存放所有依赖的第三方模块，一般不会手动更改 public public下分别有3个文件favico.
React项目规范：目录结构、根目录别名、CSS重置、路由、redux、二次封装axios
weixin_42044763的博客
03-13 2810
说实话这里的封装还挺巧妙的，和之前做vue项目的封装不一样，这里面用类来存储axios的实例，发请求都会调用类的实例的方法，然后该方法再调用axios实例上的方法。用于修改默认配置，该文件中的一些配置（如webpack）会和脚手架中的配置合并。🆗，现在项目搭建的就差不多了，接下来就开始写里面的东西，放到下一篇文章中吧。因此我们配置别名解决这个问题, 我的配置是使用。安装：这里安装RTK同时也会安装redux的，除此之外我们还要一起安装。，这是给我们提供好的初始样式的一个模板吧。，然后换个图标，换个标题。
React-(2)React主要文件介绍
AG.『Feng』的博客
09-14 874
react全家桶
React学习之路 - 目录结构
Java_1710的博客
06-10 1465
node_modules — 存放项目依赖包public — 存放网站的静态资源文件src — 存放源代码，基于ES6规则的React代码gitignore — git的选择性上传的配置文件package.json — Webpack配置和项目包管理文件包含项目中依赖的第三方包（包的版本）和一些常用命令配置都在这个里边进行配置，当然脚手架已经为我们配置了一些了，目前位置，我们不需要改动。如果你对webpack了解，对这个一定也很熟悉。
react 目录结构
09-09
在一个完整的基础项目中，除了react和react-dom两个框架之外，通常还包含redux、react-redux、react-router等等。这些框架和库都是用来帮助我们构建和管理React应用程序的。 在一个简单的基础项目中，它的目录结构可能会有所不同。脚手架工具create-react-app会自动生成一个项目结构，并隐藏所有的webpack相关配置文件，因此在项目文件夹中可能找不到任何webpack配置文件。这样做的目的是为了保持项目的"优雅"，同时也使得在webpack中安装自定义的loader或plugin变得困难。 create-react-app自动生成的webpack集成了一些常用的功能和插件，例如eslint（代码检测）、url-loader（图片BASE64）、babel-loader（ES6和JSX语法解析）、style-loader、css-loader（CSS代码解析）、HtmlWebpackPlugin（HTML插件）等等。 在简单的基础项目中，可能仅安装了最常用的react和react-dom组件，其他的一些库和框架则根据需要进行安装，比如redux、react-redux、react-router-dom等。 在React-Redux库中，所有的组件被分为两类：UI组件（presentational component）和容器组件（container component）。UI组件通常只负责展示数据和处理用户事件，而容器组件则负责与Redux进行交互，获取数据和调度动作。 所以，一个React项目的目录结构可能包含以下内容：组件文件夹、Redux文件夹、路由文件夹、样式文件夹等等，具体的目录结构根据项目的规模和需求而定。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值