首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么react creat应用中缺少src和public文件夹?

在React应用中,缺少src和public文件夹是因为react-create-app脚手架提供了一种快速构建React应用的方式。该脚手架遵循了一种约定优于配置的理念,旨在简化React应用的初始化和开发过程。

具体解释如下:

  • src文件夹:在react-create-app中,src文件夹是用于存放React应用的源代码的地方。它包含了应用的入口文件index.js以及其他组件、样式、图像等资源文件。
  • public文件夹:public文件夹用于存放不需要经过构建处理的静态资源,如HTML模板、favicon.ico等。这些文件将直接复制到构建后的目录中,并可以通过相对路径访问。

通过这种约定的方式,react-create-app能够快速生成一个基本的React应用结构,并且提供了默认的配置,以便开发者快速开始项目的开发工作。这种方式可以减少配置的复杂性,同时提供了一些默认设置,让开发者可以专注于业务逻辑的实现。

在使用react-create-app创建的React应用中,开发者可以根据项目需要自行创建和组织其他文件夹和文件,如添加src和public文件夹来存放源码和静态资源。这样做的好处是能够更好地组织和管理代码,使其更具可读性和可维护性。

腾讯云相关产品:腾讯云提供了Serverless Cloud Function(SCF)服务,可以帮助开发者无需搭建和维护服务器,快速部署和运行自己的代码逻辑。您可以使用SCF服务来部署和托管React应用,以便快速响应和处理前端请求。

更多关于腾讯云SCF的信息和介绍,请访问:https://cloud.tencent.com/product/scf

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React 项目路径添加指定的访问前缀 - SPA

---- 前言 之前我们讨论了怎么在 Angular 项目路径添加指定的访问前缀,该项目针对 SPA 应用;当然,我们也讨论了 Next 项目路径添加指定的访问前缀,该项目是使用 React 框架完成的...本文,我们讨论 React 的 SPA 应用,怎么为该应用添加指定的访问前缀呢? 项目开发准备 这里我们使用了 creat-react-app 进行创建。...react 版本 ^18.2.0 我们将使用到其默认的命令行进行项目打包: "build": "react-scripts build" 但是,我们更改下,打包到自定义的文件夹,名为 jimmy:...直接更改 script 命令行 如果你是在同个仓库里面,同份 package.json 维护多个应用,建议你在 package.json 的 scripts 更改,如下: { "scripts":...{ "build": "PUBLIC_URL=/jimmy/ react-scripts build && mv build jimmy" } } 部署项目 运行 npm

2.3K10

react打包优化【第三方库使用cdn】

前言 对于 reactreact-router、redux、axiosantd等等这些不经常改动的库、我们让webpack不对他们进行打包,通过cdn引入,可以减少代码的大小、也可以减少服务器的带宽...为什么说是首次,因为只有首次进入一个网站需要请求服务器获取资源,需要一定时间下载,完后就会变成缓存。...等第二次加载就会直接读取缓存,就不存在快慢一说了 webpack配置 这里以creat-react-app为例 webpack的配置文件默认是隐藏的,yarn eject可将配置文件暴露出来. 1....打开 config 文件夹下的 webpack.config.js 文件 图片 2....新增 externals 配置项,第三步的 plugins 同级(用于配置webpack排除打包的模块) 图片 1external: {}, 4.配置 scripts 文件夹下的 build.js

2.7K30
  • webpack构建自定义react应用

    ​ 在上一篇文章我们用webpack与webpack-cli搭建了最简单的前端应用,通常在项目中我们会用vue或者react,我们看下如何利用我们自己搭的工程来适配react 正文开始......前置 首先我们要确定,react并不是在webpack像插件一样安装就可以直接使用,我们需要支持jsx以及一些es6的一些比较新的语法,在creat-react-app这个脚手架已经帮我们高度封装了...这两个核心库 npm i react react-dom --save-dev 在src目录下新建一个App.jsx // App.jsx import React, {Component} from...App 我们在app.js引入App.jsx // app.js import React from 'react'; import { createRoot } from 'react-dom...应用就已经ok了 总结 1、react需要的一些插件,@babel/core、@babel/cli、@babel/preset-env、@babel/preset-react、babel-loader

    51920

    React 入门学习(五)-- 认识脚手架

    为什么?怎么办? 什么是脚手架? 为什么要用脚手架? 怎么用脚手架? 1. 什么是 React 脚手架?...安装 React 脚手架 首先确保安装了 npm Node,版本不要太古老,具体是多少不大清楚,建议还是用 npm update 更新一下 然后打开 cmd 命令行工具,全局安装 create-react-app...npm i create-react-app -g 然后可以新建一个文件夹用于存放项目 在当前的文件夹下执行 create-react-app hello-react 快速搭建项目 再在生成好的 hello-react...文件夹执行 npm start 启动项目 接下来我们看看这些文件都有什么作用 2..../ 同上 │ ├─ manifest.json // 应用加壳的配置文件 │ └─ robots.txt // 爬虫给协议文件 ├─ src

    48220

    React 入门学习(五)-- 认识脚手架

    为什么?怎么办? 什么是脚手架? 为什么要用脚手架? 怎么用脚手架? 1. 什么是 React 脚手架?...安装 React 脚手架 首先确保安装了 npm Node,版本不要太古老,具体是多少不大清楚,建议还是用 npm update 更新一下 然后打开 cmd 命令行工具,全局安装 create-react-app...npm i create-react-app -g 然后可以新建一个文件夹用于存放项目 在当前的文件夹下执行 create-react-app hello-react 快速搭建项目 再在生成好的 hello-react...文件夹执行 npm start 启动项目 接下来我们看看这些文件都有什么作用 2..../ 同上 │ ├─ manifest.json // 应用加壳的配置文件 │ └─ robots.txt // 爬虫给协议文件 ├─ src

    53620

    使用Yarn workspace,TypeScript,esbuild,ReactExpress构建 K8S 云原生应用(一)

    在后续部分,我们将开始构建前端后端应用程序。 准备 Git 如果计划使用 Git 作为版本控制工具,强烈建议忽略生成的文件,例如二进制文件或日志。...文件 在本教程,common 软件包将非常简单。首先,从添加新文件夹开始: src/ 文件夹,包含包的代码。..."@types/react-dom": "^17.0.2" } } 文件 要创建我们的 React 应用程序,我们将需要添加两个新文件夹: 一个 public/ 文件夹,它将保存基本 HTML 页面和我们的...一个 src/ 文件夹,其中包含我们应用程序的代码。 一旦创建了这两个文件夹,我们就可以开始添加 HTML 文件,该文件将成为我们应用程序的宿主。 public/index.html <!.../index.tsx'], // 我们从这个入口点读 React 应用程序 outfile: 'packages/app/public/script.js', // 我们在 public/ 文件夹输出一个文件

    4.1K31

    storybook的介绍使用 比较火的响应式UI开发及测试环境

    可以可视化开发调试react,vue组件 官网:https://github.com/storybooks/storybook 至于为什么叫storybook,应该是敏捷开发的user story...下来带大家简单使用一下: 首先全局安装storybook命令: npm i -g @storybook/cli 来到一个已存在的react项目,可以是由creat-react-app创建的 在根目录执行...image.png 然后又多出来个名为.storybook的目录,里面有附件组件文件 addons.js config.js 安装后根据提示执行 yarn run storybook 启动storybook...image.png 这个页面是咋生成的呢,我们打开\src\stories\index.js一看便知 import React from 'react'; import { storiesOf...Storybook', () => ); // 使用action让storybook去记录log,可以在页面的action logger查看

    3.1K40

    React + webpack 开发单页面应用简明中文文档教程(三)目录说明以及调整项目构架文件

    开发单页面应用简明中文文档教程(六)渲染一个列表,初识 jsx 文件 React + webpack 开发单页面应用简明中文文档教程(七)jsx 组件调用组件、父组件给子组件传值 React...webpack 开发单页面应用简明中文文档教程(十)在 jsx scss 中使用图片 React + webpack 开发单页面应用简明中文文档教程(十一)将项目打包到子目录运行 ---- 在上一篇博文中...# npm 脚本文件夹,不用管 └── src # 开发目录 如上所示,这就是我们的项目目录结构了。...我这里主要是演示,如何在入口文件引入静态文件的 js 文件。 经过了这些调整,我们的项目应该是跑不起来的。因为我们的 src 目录的文件并没有配置完成。...不过为避免博文太长,不便阅读,我们下一篇再讲 src 的文件内容。 本文由 FungLeo 原创,允许转载,但转载必须保留首发链接。

    52630

    React Native构建启动屏

    在这个教程,我们将演示如何在React Native构建一个启动屏幕。我们将指导你如何使用 react-native-splash-screen 为iOSAndroid应用构建出色的欢迎界面。...可以说,启动画面是让您的移动应用的品牌名称图标深入用户记忆的最佳方式。 在网络应用,我们使用预加载器为用户提供动画娱乐,同时服务器操作正在处理。...在这个教程,我们将使用 App Icon Generator,这是一个用于创建AndroidiOS应用图标图片的在线平台。...勾选 iOS Android,然后点击生成: 接下来,解压下载的文件,并将 iOS Android 文件夹复制到你克隆的启动项目的 assets 目录的 assets 文件夹里: 在React...更改Android的启动屏幕颜色 要更改Android应用的启动屏幕背景颜色,请在values文件夹创建一个名为 colors.xml 的文件,并复制下面的代码: /* app/src/main/res

    51710

    借助Babel 7Webpack构建React Toolchain

    它使用了一些最近node才支持的关键字语法(在本教程我使用了v 9.3.0版本)。因此需要一些很麻烦的设置,但是Facebook为此提供了一个可以轻松创建React应用的方案。...第一个障碍就是你当前的node不能处理所有的语法(比如 import/export jsx )。第二点是你在开发过程需要用React去构建文件或者提供服务给你当前的应用——后者尤为常见。...然后在工程目录下创建以下文件夹: . +-- dist +-- public +-- src 这里注意到我们最终需要构建我们的应用,但是我们并不想提交我们构建生成的文件以及我们使用npm拉取的包目录,所以让我们再创建...public目录用来存储静态样式文件,其中最关键的是入口文件index.html,React将利用它来渲染你的应用。...现在,在src文件夹下创建另一个名为App.js的文件。如果你用create-react-app创建过项目的话你会发现下面的文件和它创建出的内容是很相似的。

    1.1K40

    React 应用架构实战 0x1:初始化项目项目结构概览

    在上一节,我们看到了构建 React 应用程序时的所有挑战以及一些可以帮助我们处理这些挑战的很好的解决方案。在这一节,我们将查看项目结构初始化工具,这些工具构成了我们项目的良好基础。...: .next:包含通过运行 Next.js 的 build 命令生成的可以应用于生产环境的应用程序文件 public:包含应用程序的静态资源,如图像、字体等 src/pages 所有在此定义的页面都可以在相应的路由处使用...通过基于文件的路由机制实现 页面文件夹也可以位于项目的根目录,但将所有内容保存在 src 文件夹更好 src/pages/_app.tsx 导出一个 React 组件,每个页面都包装在该组件渲染...帮助程序、实用程序配置 types:包含在整个应用程序中使用的基本 TypeScript 类型定义 utils:包含应用程序中使用的所有共享工具函数 当项目开始时,根据类型将文件分组并将它们放在同一个文件夹并没有什么问题...# 按领域/功能拆分 为了以最简单可维护的方式扩展应用程序,可以将大部分应用程序代码放在 features 文件夹,该文件夹应包含不同的基于功能的内容。每个功能文件夹应包含给定功能的特定领域代码。

    1.1K10

    dotnet X11 简单使用 MIT-SHM 共享内存推送图片

    IPC_CREAT 是两个常量,定义如下 // #define IPC_CREAT 01000 /* create key if key does not exist */ // #define...IPC_PRIVATE ((key_t) 0) /* private key */ public const int IPC_CREAT = 01000; public const...(display); 此 XShmPutImage 的参数使用方法 XPutImage 非常相同。...这是 Lib C 共享内存的一个设计问题,共享内存的读取是不带通知的,即生产端消费端之间的写入读取完成是没有带通知的,需要通过第三方方式进行通知。...我整个代码仓库比较庞大,使用以下命令行可以进行部分拉取,拉取速度比较快 先创建一个空文件夹,接着使用命令行 cd 命令进入此空文件夹,在命令行里面输入以下代码,即可获取到本文的代码 git init git

    13310

    WPF 框架开发 ColumnDefinition RowDefinition 的代码在哪

    本文将此基础上继续进行解决在 VisualStudio 2022 预览版构建失败的坑,顺便告诉大家在 WPF 仓库里面那些有趣的代码存放方法 本文非新手友好,本文的 WPF 框架开发不是说开发一个基于 WPF 框架的应用...,也不是指开发 WPF 应用。...原因是在 WPF ,上古的开发者觉得 RowDefinitionCollection ColumnDefinitionCollection 的代码差不多,而 ColumnDefinition ...可以在 WPF 仓库的 src\Microsoft.DotNet.Wpf\src\PresentationFramework\MS\Utility 文件夹看到很多有趣的逻辑,在此文件夹可以看到如下的几个文件...ColumnDefinition.cs f:\lindexi\Code\wpf\artifacts\obj\PresentationFramework\Debug\net6.0\RowDefinition.cs 那为什么我在本文开始依然构建失败呢

    80330

    react脚手架(create-react-app)配置antdcss按需加载的坑

    前不久写了一篇关于react脚手架(create-react-app)配置antdcss按需加载的踩坑记录,文章内容有误,原文如下react脚手架(create-react-app)配置antdcss...满脑子疑问,这里其实错的不是我们,也不是antd,而是这个脚手架,它默认是不使用.babelrc的,它使用的是package.json的babel配置内部配置。...10、还没有完,此时如果运行项目,浏览器还会报错(天了噜,真tm想弃用....)为什么会报错呢?...因为上面一步开启了使用.babelrc文件,但是.babelrc的配置不正确,我们需要修改(为什么不正确呢?...因为creat-react-app有一些默认的babel配置放到了package.json) ?

    3.6K21

    React多页面应用4(webpack自动化生成多入口页面)

    1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28 2.React多页面应用2(处理CSS及图片,引入postCSS及图片处理等)----2017.12.29...3.React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)----2017.12.30 4.React多页面应用4(webpack自动化生成多入口页面)----2017.12.31...5.React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)----2018.01.01 6.React多页面应用6(gulp自动化发布到多个环境,生成版本号,打包成zip等.../* * 复制目录的所有文件包括子目录 * @src param{ String } 需要复制的目录 例 images 或者 ....我们删除 根目录下的 build 文件夹,然后执行 npm run devBuildHtml 看下是否自动生成了 build 文件夹 index.html shop.html 文件 ?

    1.8K50
    领券