React 更改程序入口点（index.js文件位置变更）

已于 2024-02-18 11:41:05 修改
阅读量585 收藏 3
点赞数 6
分类专栏： 前端开发 文章标签： javascript react.js 前端
于 2024-02-18 11:40:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51560545/article/details/136148475
版权

        食用前提示：本文基于已经快速配置好的React环境而作，配置React环境详见拙作：React环境配置-CSDN博客~

 一、了解默认入口点

        使用create-react-app快速搭建react环境后，npm start启动程序的默认入口点为/src/index(即src目录下的index.js文件）

 二、找到配置信息位置

        此时我们想更改index.js所在目录，除了需要更改相应的引用（更改时vscode会自动提示是否更新相关引用）之外，还需要重新设置入口点。

        路径：node_modules ->react-scripts->config->paths.js

三、更改path.js文件中的地址信息

        切记，该文件中不止一处appIndexJs需要更改，一定要更改所有的地址并保存

        完成以上步骤后保存文件信息更改 重新npm start验证即可~如有问题，欢迎评论or私信交流讨论，共勉ovo~

橙南花已开
关注
  • 6
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
react之index.js
xia00bai的博客
03-12 2850
先创建一个react工程 create-react-app first-react cd first-react npm start 我们打开目录下的index.js文件，从入口文件开始认识react // index.js import React from 'react'; // ReactDom用于页面渲染 import ReactDOM from 'react-dom'; // ind...
React学习笔记之二：认识index.js
qq_24724109的博客
07-03 6823
2.index.js 先创建一个react工程 create-react-app first-react cd first-react npm start 我们打开目录下的index.js文件，从入口文件开始认识react // index.js import React from 'react'; // ReactDom用于页面渲染 import ReactDOM from 'react-do...
修改react项目的入口文件名（默认为index.js）
一个黑曼巴的博客
01-24 2979
1.找到需要修改入口的文件：path.js node_modules/react_scripts/config/path.js 找到文件后，找到如下代码：并修改appIndexJs：resolveModule(resolveApp, ‘src/index1’),* module.exports = { dotenv: resolveApp('.env'), appPath: resolveApp('.'), appBuild: resolveApp(buildPath), appPublic
React服务端渲染框架——next.js
落枫秋歌
10-17 907
目录 next.js介绍 Hello World —— next.js 自定义共享组件 创建动态页面 next.js介绍 next.js是一个React框架，可以用于构建服务端渲染APP，渐进式web APP（PWA），导出静态页面，SEO友好等特点； 服务端渲染 静态导出 css-in-js：支持CSS-in-JS，同时支持使用style jsx语法； 构建方便：next...
新老React入口写法
李建雨的博客
04-10 956
// import ReactDOM from 'react-dom' import { createRoot } from 'react-dom/client' import { Component } from 'react' import './index.css' // 类组件(了解):重点掌握函数组件 // - 使用 ES6 的 class 创建的组件，叫做类（class）组件 // - 约定1：类名称也必须以大写字母开头 // - 约定2：类组件应该继承 React.Component 父..
react脚手架配置代理总结
weixin_44596487的博客
02-06 525
方法一 在package.json中追加如下配置 "proxy":"http://localhost:5000" 说明： 优点：配置简单，前端请求资源时可以不加任何前缀。 缺点：不能配置多个代理。 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源） 方法二 第一步：创建代理配置文件 在src下创建配置文件：src/setupProxy.js 编写setupProxy.js配置具体代理规则： const proxy = requir
React入口详解
weixin_30480651的博客
10-26 812
在使用React进行构建应用时，我们总会有一个步骤将组建或者虚拟DOM元素渲染到真实的DOM上，将任务交给浏览器，进而进行layout和paint等步骤，这个函数就是React.render()。首先看下该函数的接口定义： ReactComponent render( ReactElement element, DOMElement container, [function callback...
vue中$refs、$emit、$on、props、$parent的使用场景及方法
weixin_42101753的博客
09-09 890
1、$emit的使用场景 子组件调用父组件的方法并传递数据 子组件： <template> <button @click="emitEvent">点击我</button> </template> <script> export default { data() { return { msg: "我是子组件中的数据" } }, methods: { emitEvent
REACT:我React.js项目
03-25
在React项目中，"REACT-main"可能是一个主文件或者目录，通常包含项目的入口点如`index.js`或`App.js`。`index.js`通常是应用的起点，它会导入`ReactDOM.render`函数并调用它，将React组件渲染到HTML文档的某个元素...
react实现任务小清单
03-22
通常，我们会有一个`App.js`或者`index.js`作为入口文件，导入并渲染React组件。任务清单应用的核心逻辑和组件会在这个目录下实现，例如可以创建一个`TaskList.js`组件来展示任务，一个`TaskForm.js`组件来添加新...
react-一个支持多入口多页面开发的reactwebpack前端项目demo
08-14
一个支持多入口，多页面开发的react-webpack前端项目demo
React学习培训讲义 .docx
08-11
入口文件`index.js`是应用的起点，`App.js`是主要的组件定义。 在React中，组件间的通信主要通过`props`和`state`。`props`是从父组件向子组件传递数据的方式，而`state`则是组件自身管理的状态，用于驱动组件的...
AppContactsList:Esto de Caso 1-React本地程序的清单
03-06
在IT行业中，React.js是一款广泛使用的JavaScript库，专为构建用户界面而设计，尤其是单页应用程序(SPA)。本篇文章将深入探讨名为"AppContactsList"的React本地程序，这是一个典型的案例，展示了如何使用React来创建...
react-flux-demo:react+flux 的演示应用程序
06-19
- `index.js`: 应用的入口文件，负责挂载 React 组件并初始化 Store。 学习这个示例项目，你可以深入理解如何在实际项目中运用 React 和 Flux，以及它们如何协同工作来构建可扩展的前端应用。通过阅读和分析代码，...
LiftHeavy:React Native 应用程序来跟踪您的 5x5 锻炼
07-17
1. `index.js` - 应用的入口点，通常在这里初始化React Native的根组件。 2. `App.js` - 应用的主要组件，定义应用的UI和逻辑。 3. `components/` - 存放自定义组件，如锻炼记录表单、数据显示等。 4. `screens/` - ...
了解 react 的入口文件
zmlxxl0316的博客
07-11 1012
index.js。
React中文件夹中Index.js的作用
fel835的专栏
09-01 8517
index.js可以在import的时候直接将路径写到文件夹的位置就可以了，系统会自动到文件夹中找index.js来进行索引导入
react登录页面样例？
weixin_59763367的博客
12-01 1373
react登录
React多页面应用4(webpack自动化生成多入口页面)
oKeYue的博客
12-31 4416
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28 2.React多页面应用2(处理CSS及图片,引入postCSS及图片处理等)----2017.12.29 3.React多页面应用
react.development.js文件
最新发布
08-26
引用提供了react.development.js文件的引入方式。react.development.js是React的核心库，它是构建React应用程序所必需的。你可以通过在HTML文件中引入react.development.js文件来使用React库。根据引用提供的示例代码，你可以使用以下代码在HTML文件中引入react.development.js文件: ```html <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script> ``` 这样，你就可以在你的React应用程序中使用React库提供的各种功能和组件了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [【React】归纳篇（一）基本使用 React开发环境搭建](https://blog.csdn.net/ImagineCode/article/details/82227719)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [react.development.js、React-dom.development.js、babel.min.js 下载](https://blog.csdn.net/Ppphill_C/article/details/127635632)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

橙南花已开

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

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

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值