React 项目搭建及目录结构

最新推荐文章于 2024-05-06 23:58:49 发布
最新推荐文章于 2024-05-06 23:58:49 发布
阅读量1.6w 收藏 3
点赞数
分类专栏： FE node
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33358824/article/details/80693862
版权
FE 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
node
10 篇文章 0 订阅
订阅专栏

首先，关于React的配置可以先参考之前的博客。（React代码规范建议阅读 Airbnb React代码规范，提高代码质量。）

上面就是前端项目的目录结构。static是静态资源目录。component是经过react编写的组件。css是整体布局的样式。util是写模块化的函数或工具函数。下面这张图是component的组成。

每一个文件夹都是内部具体的组件。router是用来管理路由文件。 utilIndex 用于引入外部的util文件夹内的工具函数、模块化代码。这样在组件内就可以方便引用。

util文件夹内主要是对于一些常用函数的封装以及请求接口和其他功能函数。例如Ajax.js就是所有网络请求封装。API.js就储存着所有后台接口路由。
（除此之外，推荐使用React-dev-tools插件来方便开发和debug）
zhouhaoxiangcn
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react架构
dimash1996的博客
12-01 3598
一、简介 相对于vue，在react中很多东西需要自己去构建，比如网络请求、路由、redux、导航条，如果直接写会产生大量重复代码，并且后期难以维护，通过封装，将以上提到的功能封装成一个个文件夹，需要添加或修改直接去对应的地方找即可，维护成本会降低很多。 二、准备 1、全局安装 npm install -gcreate-react-app 2、创建一个react项目（eact-demo为项目名） create-react-app react-demo 3、进入项目目录安装需要的的插件 ...
react项目结构初探(第一天)
qq_48954441的博客
10-20 1964
react项目结构与vue结构基本一致，附上图示便于理解。1. dist文件夹 -- 打包之后的文件夹2.node_modules文件夹 -- 依赖包所在文件3.public文件夹 -- 存放静态资源4.src文件夹 -- 代码编写的主要文件5.webpack文件 webpack的一些配置。
2024年前端最新React进阶（三）：React项目文件结构介绍(1)，深入分析
2401_84447233的博客
05-06 732
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
react之旅（二）react项目目录结构，创建组件，绑定数据
07-15
react之旅（二）代码资源；代码主要包含react目录结构，react组件新建，react jsx，react数据绑定
react hooks项目中【前端路径、静态资源（js和图片）、后端接口】中添加一个路径的全过程
BeSentimental的博客
08-25 645
*
【React教程】一、React简介
我有满天星辰的博客
03-10 1785
React是一个用于构建用户界面的JavaScript库，它是Facebook的内部项目，用来架设Instagram的网站,并于2013年5月开源。React主要用于构建Ul，很多人认为React 是 MVC 中的 V（视图）。由于拥有较高的性能，且代码逻辑非常简单，越来越多的人已开始关注和使用它。中文官网：https://react.docschina.orgReact推荐使用npx create-react-app来创建React项目。
基于Webpack4和React hooks搭建项目的方法
10-17
在本文中，我们将深入探讨如何基于Webpack4和React Hooks来搭建一个项目。Webpack4作为现代前端项目构建的利器，提供了一套强大的模块打包方案，而React Hooks则是React库中的一个创新特性，它允许我们在函数组件中...
从零开始学习搭建React脚手架项目
10-18
Create-React-App是一个官方提供的脚手架工具，可以帮助我们快速搭建一个React项目。我们可以使用以下命令来安装Create-React-App： `npm install -g create-react-app` 如果您位于中国大陆，可以使用以下命令来...
React脚手架，用于快速搭建React项目
最新发布
06-04
在创建React项目时，CRA会生成一个包含以下基本结构的项目： 1. `public`目录：包含静态资源，如HTML索引文件、图标和其他非JavaScript资产。 2. `src`目录：放置所有的源代码，包括React组件、样式、配置文件等。 ...
react项目搭建步骤.pdf
08-25
"React 项目搭建步骤" React 项目搭建是指使用 React 库创建一个新的项目，并进行基本的配置和设置。...React 项目搭建需要完成这些步骤，以便创建一个基本的 React 项目结构，并配置好项目的路由和样式。
cesium使用webpack搭建react项目
10-08
在这个过程中，我们利用Webpack进行模块管理和打包，使用Babel将ES6+代码转换为浏览器兼容的JavaScript，同时结合React的组件化思想，将Cesium与React结合，实现了在React项目中无缝使用Cesium的功能。这样的项目...
React-Projects:开源React项目
04-19
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递性依赖项（w
project-structure:React项目结构
04-04
资料夹结构 整体结构 / -- package.json -- webpack.config.js -- tsconfig.json -- .gitignore -+ node_modules -+ /src ---- index.jsx ---- index.scss ---+ public/ ------ index.html ------ favicon.ico -----+ app --------- App.jsx --------- App.scss --------+ store ---------- index.js ---------- rootReducer.js --------+ assets -----
React项目规范：目录结构、根目录别名、CSS重置、路由、redux、二次封装axios
weixin_42044763的博客
03-13 2837
说实话这里的封装还挺巧妙的，和之前做vue项目的封装不一样，这里面用类来存储axios的实例，发请求都会调用类的实例的方法，然后该方法再调用axios实例上的方法。用于修改默认配置，该文件中的一些配置（如webpack）会和脚手架中的配置合并。🆗，现在项目搭建的就差不多了，接下来就开始写里面的东西，放到下一篇文章中吧。因此我们配置别名解决这个问题, 我的配置是使用。安装：这里安装RTK同时也会安装redux的，除此之外我们还要一起安装。，这是给我们提供好的初始样式的一个模板吧。，然后换个图标，换个标题。
React全家桶详细讲解-图文并茂(1)
m0_60634964的博客
03-17 940
组件通讯介绍组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通，这个过程就是组件通讯组件的props组件时封闭的，要接受外部数据应该通过props来实现props的作用：接收传递给组件的数据传递数据：给组件标签添加属性组件时封闭的，要接受外部数据应该通过props来实现。
React目录结构详细解析
李彬博客专栏
12-12 8488
总览 WebStorm创建工程后目录结构如图所示： 1、package.json 每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。 负责 管理 整个项目用到的 依赖包 列表配置 以及 项目打包的一些脚本命令 scripts 配置 1.1 name字段 项目工程名称 "name": "untitled" 项
React 修改打包后静态资源引入路径：资源文件路径“/“修改为相对路径“.“
大白的博客
07-23 1万+
问题：由于部署的时候增加了二级域名，但是打包后的index.html中引入的静态资源路径是从根目录引入的，其实在根域名下并没有这个静态资源，导致引入失败，无法加载，如下图所示 解决办法： 在package.json 里边增加该配置 （当然，配置的地址可以由部署环境决定，可以是 './' , 也可以是 ‘../’,根据需要配置即可） "homepage":".", 修改完成后，打包后的index.html 的引入路径就如下图所示， ...
React 项目结构小结
GoldenaArcher的博客
11-03 823
其实大体上主要还是 redux 的配置比较多一些，其他部分都挺灵活的，而且和业务绑定的比较多，我也不方便说，说了也不一定有参考意义项目的结构是一个比较风格化的东西，我用的比较喜欢的风格有点变态的说已经把这个项目变成了我喜欢的样子……？并不代表这一定是一门项目会用的风格，这是 react 的优点也是缺点完成 redux 部分的 refactor 之后，下一步考虑的就是使用 lerna 对项目升级，做成一个 micro-frontend 的项目。
解决create-react-app build 后静态资源文件夹(static)路径不对
热门推荐
Chad97的博客
08-07 1万+
Reason 在我们对我们的react项目进行打包上线的时候可能我们的文件夹 build 并不是在更不了下，这样的情况就好出现服务器访问 index 找不到static 下面的资源，仔细看我们会发现访问路径变成了根文件 例如： www.test/build/static/cs.css # 变成 www.test/static/cs.css 因为我们的webpack 默认以项目为根目录 ho...
react项目结构搭建
07-25
在项目中，通常可以按照以下方式搭建项目结构： 1. 创建一个新的React项目： 使用`create-react-app`命令行工具来创建一个新的React项目，可以运行以下命令来安装并创建项目： ``` npx create-react-app my-app cd my-app ``` 2. 项目结构： `create-react-app`默认会生成一个基本的项目结构，包含以下文件和文件夹： - `public/`：存放静态资源文件，如HTML模板、图片等。 - `src/`：存放React组件和相关代码。 - `src/index.js`：应用的入口文件，包含ReactDOM.render方法，用于渲染根组件。 - `src/App.js`：根组件，可以在此文件中定义应用的主要结构和布局。 - `src/App.css`：根组件的样式文件。 - `src/index.css`：全局样式文件。 - `src/logo.svg`：示例静态资源文件。 3. 组件目录： 在`src/`目录下，可以创建多个子目录来组织React组件，例如： ``` src/ ├── components/ │ ├── Header/ │ │ ├── Header.js │ │ └── Header.css │ ├── Footer/ │ │ ├── Footer.js │ │ └── Footer.css │ └── ... ├── pages/ │ ├── Home/ │ │ ├── Home.js │ │ └── Home.css │ ├── About/ │ │ ├── About.js │ │ └── About.css │ └── ... └── ... ``` 4. 路由配置： 如果你的项目需要使用路由来管理页面切换，可以使用React Router库。在`src/`目录下创建一个`routes/`目录，用于存放路由相关的文件，例如： ``` src/ ├── routes/ │ ├── Home/ │ │ ├── Home.js │ │ └── Home.css │ ├── About/ │ │ ├── About.js │ │ └── About.css │ └── ... ├── App.js ├── App.css └── ... ``` 在`App.js`中配置路由，并将不同的页面组件与对应的路由路径进行匹配。 这只是一个基本的React项目结构示例，根据实际需求，你可以根据项目的规模和复杂度来组织更复杂的结构。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值