create-react-app不包含src和public文件夹

create-react-app是一个用于快速搭建React应用的脚手架工具。它可以帮助开发者快速创建一个基于React的项目结构，并提供了一些默认配置和依赖项。

在create-react-app生成的项目中，src文件夹是用于存放项目的源代码的地方。开发者可以在该文件夹下编写React组件、样式文件、图片等资源。public文件夹则是用于存放静态资源的地方，例如HTML文件、图标、favicon等。

由于create-react-app的设计初衷是提供一个简单易用的React开发环境，因此它默认不包含src和public文件夹。开发者在使用create-react-app创建项目后，可以根据自己的需求自行创建这两个文件夹，并在其中编写和管理项目的源代码和静态资源。

对于create-react-app生成的项目，可以使用腾讯云的云开发平台进行部署和托管。腾讯云云开发提供了Serverless架构的支持，可以帮助开发者快速部署和运行React应用，同时提供了丰富的云服务和工具，如云函数、云数据库、云存储等，以满足不同应用场景的需求。

腾讯云云开发产品介绍链接：https://cloud.tencent.com/product/tcb

Node.js 和 npm： node -v npm -v 如果没有安装，请先安装 Node.js（包含 npm）。...(y) 输入y即可 react项目文件讲解在一个使用 create-react-app 工具创建的 React 项目中，默认的项目结构包含了一些标准的文件和目录。...在最新版本的 create-react-app 中，这个文件可能被移除或不推荐使用。...这些文件都可以移除或不推荐使用 .gitignore 用于指定在使用 Git 版本控制时，哪些文件和目录应该被忽略。例如，node_modules/ 和 build/ 文件夹。...package.json 项目的配置文件，包含项目的依赖、脚本、项目元数据等。你可以在这里定义项目的各种设置和依赖。 package-lock.json 锁定依赖版本的文件。

501 0

如何用 esbuild 替换 Create React App 中的 Webpack

npx create-react-app my-app cd my-app npm start 在大约一分钟的依赖包安装和几秒钟的npm启动后，你就可以开始了。...添加SVG Loader 默认的应用程序使用import语法来包含一个svg图像。...更新index.html Create React App创建了一个public文件夹，里面预置了几个文件。...包含在其中的index.html更像是一个模板，在运行react-scripts build时，会被处理并输出到build文件夹。在我们新的esbuild构建中，index.html不需要成为模板。...删除对%PUBLIC_URL%的引用，并添加一个script标签，指向我们新构建的app.js和app.css包。 // public/index.html <!

2.7K2 0

基于 react 脚手架的react 应用

使用 create-react-app 创建 react 应用 react 脚手架 xxx 脚手架: 用来帮助程序员快速创建一个基于 xxx 库的模板项目 a. 包含了所有需要的配置 b....+ eslint 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化创建项目并启动 npm install -g create-react-app create-react-app hello-react...cd hello-react npm start react 脚手架项目结构 ReactNews |--node_modules---第三方依赖模块文件夹 |--public...- build.js-------------------build 打包引用配置 |-- start.js-------------------start运行引用配置 |--src...请求的代码前端应用需要通过 ajax 请求与后台进行交互(json 数据) react 应用中需要集成第三方 ajax 库(或自己封装) 常用的 ajax 请求库 jQuery: 比较重, 如果需要另外引入不建议使用

2132 0

基于create-react-app构建多页面应用框架

create-react-app 单页面应用框架 npx create-react-app multiple-page cd multiple-page npm start 运行这些命令会在当前目录中创建一个名为...目录结构如下所示(tree -I "node_modules")： multiple-page ├── README.md ├── package.json ├── node_modules ├── public...目录结构删除 src 目录下的所有文件。...删除 public/index.html 文件。...新建 views 文件夹，在 views 文件夹里新建 demo 和 index 文件夹，分别在文件夹中生成同名的 js 文件和 html 文件，目录结构如下： ├── src │ ├── components

5.3K13 5

十七、详解 ES6 Modules

> create-react-app es6app create-react-app会自动帮助我们在develop目录下创建一个叫做es6app的文件夹，这就是我们新创建的项目。...项目创建完毕之后，进入该文件夹。 > cd es6app // 查看文件夹里的内容> ls 我们会发现里面有一个叫做package.json的文件，这个文件里包含了项目所需要的所有依赖。...当我们运行npm install安装package.json中的依赖包时，该文件夹会自动创建，所有的依赖包会安装到该文件夹里。•public 主要的作用是html入口文件的存放。...在create-react-app创建的项目中，每一个单独的文件都可以被看成一个单独的模块，单独的image，单独的css，单独js等，而所有的组件都存放于src目录中，其中index.js则是js的入口文件...// 安装jquery> npm install jquery 然后在其他模块中就可以直接引入 import $ from 'jquery' 这样，我们可以和往常一样使用jquery。

6682 0

React脚手架

react脚手架react脚手架: 用来帮助程序员快速创建一个基于react库的模板项目，包含了所有需要的配置（语法检查、jsx编译、devServer…），下载好了所有相关的依赖， react提供了一个用于创建...创建项目并启动第一步，全局安装：npm i -g create-react-app第二步，切换到想创项目的目录，使用命令：create-react-app project_name第三步，进入项目文件夹...：cd project_name第四步，启动项目：npm startreact脚手架项目结构public ---- 静态资源文件夹favicon.icon ------ 网站页签图标index.html...checked的区别，类似的还有：defaultValue 和 value状态在哪里，操作状态的方法就在哪里react脚手架配置代理方法一在package.json中追加如下配置"proxy":"http...下的index.html （优先匹配前端资源）方法二1.第一步：创建代理配置文件：在src下创建配置文件src/setupProxy.js2.编写setupProxy.js配置具体代理规则：const

4222 0

指尖前端重构（React）技术分析报告

但该库已不再维护，文档不佳，且与新版本的react-router配合使用有不兼容情况。...Build时控制台报错仅针对src文件夹下的代码，而在public文件夹下还有个index.html这个文件会最终被打包放到www目录下，因此可以在这个文件中deviceready时添加全局的插件变量（...五、React项目的目录结构首先IDE选取webstorm，功能强大，之前项目组在用可以沿用下来，但需要注意的一点是当目录中包含了安装的依赖node_modules时，由于该文件夹下文件数量非常多，webstorm...[1516331435896074726.png] 上图是create-react-app 项目的目录，主要代码放在src目录下。Components中包含所有组件。...值得一提的，以前html的层级关系必须严格为两层（涉及到跳转路径的逻辑），导致最后出现没有把一个功能模块放到一个文件夹里的情况，比如上面的工作日志之前所包含的各个文件直接和其它的一些功能模块一起放到了setting

5.4K3 0

定制 create-react-app：如何制作自己的模版

TL;DR：有多种可用的工具能帮助开发者构建不同种类的网站和应用。...可即便是应用了 CRA 这么棒的工具，开发者仍需要稍作调整，增加 CRA 中不含的特别的脚本和模块等。今天，我将教你如何为自己的团队创建自定义的 create-react-app 脚本。...在 packages 目录内，有一个叫做 react-scripts 的文件夹。该文件夹包含了用于构建、测试和启动你的应用的脚本。事实上，这就是我们能作出改进的地方，可以配置并增加新的脚本和模版。...打开 react-scripts/template/src/App.js 并将其内容替换为： import React, { Component } from 'react'; import logo...position } ); } } export default App; 然后，到 react-scripts/template/public

1.4K1 0

基础 | 详解 ES6 Modules

create-react-app会自动帮助我们在develop目录下创建一个叫做es6app的文件夹，这就是我们新创建的项目。当项目创建完成之后，在命令行工具中，我们会看到如图所示的提示。...项目创建完毕之后，进入该文件夹。我们会发现里面有一个叫做package.json的文件，这个文件里包含了项目所需要的所有依赖。当我们第一次运行项目之前，还需要安装该文件里的依赖包。...当我们运行npm install安装package.json中的依赖包时，该文件夹会自动创建，所有的依赖包会安装到该文件夹里。 2、public 主要的作用是html入口文件的存放。...在create-react-app创建的项目中，每一个单独的文件都可以被看成一个单独的模块，单独的image，单独的css，单独js等，而所有的组件都存放于src目录中，其中index.js则是js的入口文件...然后在其他模块中就可以直接引入这样，我们可以和往常一样使用jquery。通过这样方式，我们还可以扩展更多的库，这就使得我们这个开发环境不仅仅能够用于react的开发，怎么用，完全取决与你自己。

5612 0

前端模块化开发--React框架（二）：脚手架&&网络请求框架

GitHub地址一、React脚手架 1、react脚手架说明 1)xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目Code - a.包含了所有需要的配置 - b.指定好了所有的依赖...脚手架项目结构 Code ReactNews |--node_modules---第三方依赖模块文件夹 |--public |-- index.html-----------------主页面...scripts |-- build.js-------------------build打包引用配置 |-- start.js-------------------start运行引用配置 |--src...------------源码文件夹 |--components-----------------react组件 |--index.js-------------------应用入口js |--...2)axios: 轻量级, 建议使用 Code - a.封装XmlHttpRequest对象的ajax - b. promise风格 - c.可以用在浏览器端和node服务器端 3)fetch: 原生函数

2.9K2 0

「React TS3 专题」从创建第一个 React TypeScript3 项目开始

一、使用 create-react-app 构建 1、全局安装 create-react-app 使用以下命令进行全局安装： npm install -g create-react-app 2、运行项目创建命令...console，并且允许imports的导入和对象key的声明可以不按照字母的顺序进行排序。...1、创建文件夹 首先我们手动创建一个文件夹manually，然后在manually下创建src源文件文件夹和发布环境用的dist文件夹 mkdir manually cd manually mkdir...这部分内容和原书内容不一致，原书内容为React.SFC，函数组件SFC英文全称为“Stateless Function Components”，由于作者编写本书时hook还没成为正式标准，hook的出现允许包含...今天的内容就到这里，我们学习了如何使用 create-react-app 和手工的两种方式创建 React TypeScript3项目。

2.2K1 0

初始化React脚手架

一，创建项目并启动全局安装：npm i -g create-react-app 切换到想要创建项目的目录，使用命令：create-react-app 项目名进入项目打开控制台启动项目：npm start...二，react脚手架项目结构 PlainBashC++C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL public //静态资源文件夹...logo192.png //logo图 logo512.png //logo图 manifest.json //应用加壳的配置文件 robots.txt //爬虫协议文件 src...//源码文件夹 App.css //app组件的样式 App.js //app组件 App.test.js //用于给app做测试 index.css //样式

3531 0

Create React App 源码揭秘

mkdir lerna-example && cd $_ $ lerna init 生成项目结构 |-- lerna.json |-- package.json `-- packages # 暂时为空文件夹...$ cd packages/create-react-app && npm publish --access=public 修改代码后下一次发布再使用lerna publish，可得到如下日志 $ lerna...需要先将本地和远程tag删除，再发布。...通过create-react-app生成的项目内部引用不了除src外的目录，不然会报错which falls outside of the project src/ directory....解析的文件路径如果包含node_modules则放行。解析的文件路径如果包含使用此插件的传参appSrc则放行。解析的文件路径和src做path.relative，结果如果是以..

3.6K2 0

create-react-app创建的项目使用css-module问题整理

create-react-app 项目使用css-module及问题整理使用 create-react-app 创建的 React TypeScript 项目，如何以 Module 的形式引入 css.../index.scss') 添加全局声明 create-react-app 创建的 React 项目在 /src 目录有一个 react-app-env.d.ts 文件，添加如下代码： declare .../index.module.scss'; 注意这里需要带 .module ，不然会不生效。为了提高代码的可读性，可以把处理 css 的部分单独拆出来。..."include": [ "src", "type-scss.d.ts" // 配置的 css.d.ts文件 ] } 使用 TypeScript 无非就是因为它的代码约束和提示能力，... [created] 它还支持一些参数： -o 或者 --outDir 指定文件夹 tcm -o dist src (your project root) - src/ | myStyle.css

2.5K2 0

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...% 原因是 webpack 配置好了，它代表的意思就是 public 文件夹 第6行用于做移动端网页适配

4822 0

React 入门学习（五）-- 认识脚手架

5332 0

React 使用 Proxy 代理（create-react-app）

在create-react-app 中配置proxy代理 proxy，默认为NULL，类型为URL，一个为了发送http请求的代理在平时开发时，尤其前后端分离时，需要假数据来进行模拟请求，这个时候就需要.../", "changeOrigin": true } } create-react-app > 2.0 package.json 中配置（不推荐） "proxy": "https:/.../easymock.spiritling.pub/", 配置文件 /src/setupProxy.js （推荐）将 create-react-app 解包后，可以在 config 文件夹下找到配置在...config/path.js 中存在 proxySetup: resolveApp('src/setupProxy.js'), 而 proxySetup 是只在 webpackDevServer.config.js...文件中使用，也就是说只在开发时使用所以，可以在 /src/setupProxy.js 中配置首先安装 http-proxy-middleware npm install http-proxy-middleware

12.3K4 2

Create React App v3 + Webpack v4 多页应用配置

然后想到是不是和 create-react-app 有关，于是使用了关键词 createreactapp multiple entry webpack4 doesn't work 进行搜索后，根据 Create...安装、运行 create-react-app # 卸载旧版 create-react-app npm uninstall -g create-react-app # 使用 npx 安装最新版 npx...参考Webpack Manifest Plugin[7] 不足：配置很麻烦显然每一次添加新页面都手动维护一堆配置信息不优雅，如果网页多了就需要重复 1、2、3、4 步骤，很不方便，期望优化成无需修改配置的模式...优化参考了前文提到的「Webpack」配置React多个页面同时打包和调试，主要思路就是利用 nodejs 操作文件的能力，fs.readdirSync 来扫描入口文件夹，自动生成相应的配置文件。...改造入口文件目录结构在 src 目录下分别建立 src/index 和 src/test 文件夹，确保文件夹下都有入口文件 index.tsx，后续会扫这个文件。 ? 2.

1.4K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

create-react-app不包含src和public文件夹

相关·内容

LinuxMac 递归移除某文件夹下所有文件（不包含文件夹）的执行权限命令

正则表达式：匹配不包含某些字符和不包含某些字符串的写法「建议收藏」

react开发环境搭建

如何用 esbuild 替换 Create React App 中的 Webpack

基于 react 脚手架的react 应用

基于create-react-app构建多页面应用框架

十七、详解 ES6 Modules

React脚手架

指尖前端重构（React）技术分析报告

定制 create-react-app：如何制作自己的模版

基础 | 详解 ES6 Modules

前端模块化开发--React框架（二）：脚手架&&网络请求框架

「React TS3 专题」从创建第一个 React TypeScript3 项目开始

初始化React脚手架

Create React App 源码揭秘

create-react-app创建的项目使用css-module问题整理

React 入门学习（五）-- 认识脚手架

React 入门学习（五）-- 认识脚手架

React 使用 Proxy 代理（create-react-app）

Create React App v3 + Webpack v4 多页应用配置

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐