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

已于 2024-02-18 11:41:05 修改
阅读量578 收藏 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 2847
先创建一个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 6821
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 2975
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入口写法
李建雨的博客
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 810
在使用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 888
1、$emit的使用场景 子组件调用父组件的方法并传递数据 子组件： <template> <button @click="emitEvent">点击我</button> </template> <script> export default { data() { return { msg: "我是子组件中的数据" } }, methods: { emitEvent
了解 react 的入口文件
zmlxxl0316的博客
07-11 1000
index.js。
React中文件夹中Index.js的作用
fel835的专栏
09-01 8516
index.js可以在import的时候直接将路径写到文件夹的位置就可以了，系统会自动到文件夹中找index.js来进行索引导入
react登录页面样例？
weixin_59763367的博客
12-01 1372
react登录
react-一个支持多入口多页面开发的reactwebpack前端项目demo
08-14
一个支持多入口，多页面开发的react-webpack前端项目demo
React多页面应用4(webpack自动化生成多入口页面)
oKeYue的博客
12-31 4415
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28 2.React多页面应用2(处理CSS及图片,引入postCSS及图片处理等)----2017.12.29 3.React多页面应用
react笔记：修改react入口界面组件
weixin_45844109的博客
07-18 509
如题目
学习react阶段如何在一个React项目中写多个index.js入口
qq_36722315的博客
06-20 407
学习React基础，不想每次都删掉代码或者重新创建React项目 有没有什么好的办法没有好办法目前在用的：修改node_modules->react-scripts->config->path.js里面的index.js入口 这个路径也无需手动填写，在index.js外层目录右键，复制相对路径，粘贴即可...
十一）React项目实战记录：登录页面编写
最新发布
jimson_zhu的博客
01-16 450
【代码】十一）React项目实战记录：登录页面编写。
【React】使用react登陆,跳转首页
IU
04-17 3073
在当今数字化的时代，人们越来越依赖网络和应用程序。对于这些应用程序，用户的登录是其中一个最基本和关键的功能。React是一种非常流行的JavaScript库，它可以帮助我们构建复杂的用户界面，并提供了丰富的工具和组件来管理应用程序的状态和行为。使用React模拟登录是一个不错的学习项目，特别适合那些想要深入了解React技术的开发人员和初学者。
react 创建新页面_create-react-app 如何创建多个入口页面网站
weixin_39877581的博客
12-19 451
这个问题，我也遇到过，在一个工程里面做客户和后台管理两个SPA，刚刚解决了：1. 主要是修改wepack的entry结点，增加多个webpack的入口：entry:{index:[require.resolve('react-dev-utils/webpackHotDevClient'),require.resolve('./polyfills'),require.resolve('react...
React官方脚手架 create-react-app的多入口配置
weixin_47232046的博客
10-14 1632
在生成react项目时候，使用Facebook官方脚手架create-react-app是一个不错的选择，但是默认只能生成一个SPA，入口是index.html。虽然页面的切换可以用前端路由来实现，但某些情况下，仍要将页面切分为多个页面，或者在同一个工程开发多个SPA，这个时候就需要将项目改为多入口 react官方对这个问题的回答是： Sorry, but Create React App doesn’t support this use case. You can eject and then confi
react基础
大脸猫~
03-25 457
React Fiber： react16之后的版本 react环境搭建 1.安装node，（安装了node，自动安装npm） 2.打开react官网https://reactjs.org 使用脚手架快速生成一个react项目 执行红框内的代码，可以快速生成一个react项目 项目工程代码精简 react项目的入口src目录下面的index.js文件，它引入了app.js文件，app.js文件显示出了首页内容 什么是组件 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、付费专栏及课程。

余额充值