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

我制作了第一个react应用程序,当我将它上传到github上时,我在github页面上只看到空白页面

当你将React应用程序上传到GitHub上后,只看到空白页面的原因可能有以下几种可能性:

  1. 代码未正确部署:确保你的React应用程序已经正确部署到GitHub上。你可以通过检查代码是否已经成功上传到GitHub仓库中来确认。另外,你还需要确保你的应用程序已经正确配置和构建,以便在GitHub页面上正确显示。
  2. 仓库设置问题:检查你的GitHub仓库的设置,确保你已经正确设置了仓库的主分支和默认页面。你可以将主分支设置为包含React应用程序构建后的文件的分支,并将默认页面设置为应用程序的入口文件。
  3. 缺少依赖项:如果你的React应用程序依赖于其他库或模块,确保这些依赖项已经正确安装并包含在你上传到GitHub的代码中。你可以检查你的项目的依赖项配置文件(如package.json)来确认。
  4. 构建问题:在将React应用程序上传到GitHub之前,你需要确保它已经成功构建。这通常涉及到使用构建工具(如Webpack或Parcel)将React代码转换为浏览器可执行的JavaScript、CSS和HTML文件。确保你已经正确配置和运行了构建过程,并将构建后的文件上传到GitHub。
  5. 路由问题:如果你的React应用程序使用了路由功能(如React Router),请确保你已经正确配置了路由,并在GitHub页面上设置了正确的路由规则。这样才能确保在访问不同路由时正确显示相应的页面。

总结起来,确保你的React应用程序已经正确构建、上传到GitHub仓库,并且仓库设置和依赖项都正确配置。如果问题仍然存在,你可以检查浏览器的开发者工具(如Chrome DevTools)来查看是否有任何错误信息,以帮助你进一步排查问题。

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

相关·内容

JavaScript框架--迈向2023年

他们说:"解决单应用程序的权衡问题"。这并不是什么新鲜事,但是人们常常不理解的是,这并不是万灵药。 服务器端渲染允许我们更快地通过更早地获取数据来呈现页面(通常更靠近我们的数据源),但也有折衷。...并不确信每个人都在同一页面上,但是该领域的许多领先思想实际对某件事情有共识。这不是一件可以轻视的事情。 我们所处的位置 单应用程序并不是最适合一切的架构。...无论你是考虑 Marko、Astro 或 Fresh 及其交互性岛屿,还是 Next 和 SolidStart 的服务器组件,你都会看到服务器路由职责承担起了重任。...我们仍然看到这些技术向外传播,但收益是如此之大,当这些技术存在,人们将不会接受以前的开发方式。 转向 2023 年 复杂性中的争论 这将在新的一年继续成为一个主题。...当自定义语言服务器插件是保持服务器组件的唯一方法,或者你需要成为代码中发生序列化边界的专家,你就需要开始质疑了。 这些技术是未来的趋势。但我们需要记住,我们并不是第一个尝试这样做的人。

1.4K10

【译】开始学习React - 概览和演示教程

当我刚开始学习JavaScript的时候,就听说了React,但我承认看了它一眼,它吓到我了。看到了看起来一堆HTML和CSS的混合思想,这不是我们一直努力避免的事情吗?...React中创建列表,应始终使用key(键),因为它们有助于识别每个列表项。我们还将在需要操纵列表项的时刻看到这是必要的。...该应用程序已经完成了。我们可以表中创建,添加和删除用户。由于Table和TableBody已经从状态中拉出,因此将正确显示。 ? 如果你有疑问,你可以github查看源码。...当我们提取API数据,我们要使用componentDidMount,因为我们要确保导入数据之前已经将组件渲染到DOM。...以下代码段中,你将看到我们如何从Wikipedia API引入数据,并将其显示页面上

11.2K20
  • 2019年,React 开发者应该掌握的 22 种神奇工具

    以下是示例中我们使用组件之一的例子: ? React-Proto GitHub 获得了 2,000 个星标。 3....例如,利用 Storybook README 包,我们可以同一页面上创建 README 文档,同时开发供生产使用的 React 组件。这足以作为常规文档页面: ? 11....这是他们页面上的样子,如大家左侧的菜单看到的那样,有很多信息:) ? 15....它们会用橙色/红色标出严重的重渲染问题,帮助我们开发页面更容易的发现一些性能问题。 除非我们的目标是构建平庸的应用程序,否则为什么不试试这个我们身边的好东西。 18....可能会忘记其他网站从从这个链接学习 React 。因为可以在此找到大量有用的资源,这些资源肯定会帮助我们构建出色的 React 应用程序! 21.

    2.4K21

    React】653- 22 个让 React 开发更高效更有趣的工具

    /src/components,如下所示: 以下是示例中我们使用组件之一的例子: React-Proto GitHub 获得了 2,000 个星标。...例如,利用 Storybook README 包,我们可以同一页面上创建 README 文档,同时开发供生产使用的 React 组件。这足以作为常规文档页面了: 11....这是他们页面上的样子,如大家左侧的菜单看到的那样,有很多信息:) 15. Folderize Folderize 是一个 VSCode 扩展。它可以让我们将组件文件转换为组件文件夹结构。...它们会用橙色/红色标出严重的重渲染问题,帮助我们开发页面更容易的发现一些性能问题。 除非我们的目标是构建平庸的应用程序,否则为什么不试试这个我们身边的好东西。 18....这让可能会忘记其他网站从这个链接学习 React 。因为可以在此找到大量有用的资源,这些资源肯定会帮助我们构建出色的 React 应用程序! 21.

    2.1K20

    22 个让 React 开发更高效更有趣的工具

    /src/components,如下所示: 以下是示例中我们使用组件之一的例子: React-Proto GitHub 获得了 2,000 个星标。...例如,利用 Storybook README 包,我们可以同一页面上创建 README 文档,同时开发供生产使用的 React 组件。这足以作为常规文档页面了: 11. ...这是他们页面上的样子,如大家左侧的菜单看到的那样,有很多信息:) 15. Folderize Folderize 是一个 VSCode 扩展。它可以让我们将组件文件转换为组件文件夹结构。...它们会用橙色/红色标出严重的重渲染问题,帮助我们开发页面更容易的发现一些性能问题。 除非我们的目标是构建平庸的应用程序,否则为什么不试试这个我们身边的好东西。 18. ...这让可能会忘记其他网站从这个链接学习 React 。因为可以在此找到大量有用的资源,这些资源肯定会帮助我们构建出色的 React 应用程序! 21.

    10.3K31

    22 个让 React 开发更高效更有趣的工具

    /src/components,如下所示: 以下是示例中我们使用组件之一的例子: React-Proto GitHub 获得了 2,000 个星标。...例如,利用 Storybook README 包,我们可以同一页面上创建 README 文档,同时开发供生产使用的 React 组件。这足以作为常规文档页面了: 11. ...这是他们页面上的样子,如大家左侧的菜单看到的那样,有很多信息:) 15. Folderize Folderize 是一个 VSCode 扩展。它可以让我们将组件文件转换为组件文件夹结构。...它们会用橙色/红色标出严重的重渲染问题,帮助我们开发页面更容易的发现一些性能问题。 除非我们的目标是构建平庸的应用程序,否则为什么不试试这个我们身边的好东西。 18. ...这让可能会忘记其他网站从这个链接学习 React 。因为可以在此找到大量有用的资源,这些资源肯定会帮助我们构建出色的 React 应用程序! 21.

    2.1K31

    为什么 RSC 才是正确答案?

    客户端渲染 (CSR)如果你已经开发游戏中工作了一段时间,你会知道 React 是创建单应用程序 (SPA) 的首选库。...典型的 SPA 中,当客户端发出请求,服务器会向浏览器(客户端)发送单个 HTML 页面。此 HTML 页面通常包含一个简单的 div 标记,即对 JavaScript 文件的引用。...页面加载,用户可能会看到空白屏幕或加载旋转图标。随着时间的推移,这个问题往往会变得更糟,因为添加到应用程序的每个新功能都会增加 JavaScript 包的大小,从而延长用户查看 UI 的等待时间。...SSG 构建发生,即应用程序部署服务器。这会导致页面已经呈现并准备好提供服务。它非常适合不经常更改的内容,例如博客文章。另一方面,SSR 按需渲染页面以响应用户请求。...它们通常在客户端 (CSR) 呈现,但也可以服务器 (SSR) 呈现为 HTML,从而允许用户立即看到页面的 HTML 内容,而不是空白屏幕。

    36710

    React 应用架构实战 0x3:构建和配置页面

    然后,我们将学习如何配置每个页面的布局,使应用程序看起来和感觉像一个单应用程序。 # Next.js 路由 Next.js 有一个基于文件系统的路由机制,其中每个页面文件代表一个页面。...使用 Next.js 的好处在于它允许我们每个页面上使用不同的渲染策略,因此我们可以组合它们以最佳方式适应应用程序的需求。...我们将使用一种更好的方式来处理每个页面的布局,即将它们附加到所有页面组件(即 page component)。...得益于 React 的优化,当在具有相同布局的页面之间导航,所有布局组件状态都将继续保持。 我们已经构建了布局组件,现在只需要将它们添加到我们的页面中即可。...一些 SSR 的缺点,主要包括: 需要更多的计算资源,这可能会影响服务器成本 较长的 getServerSideProps 执行时间可能会阻塞整个应用程序 因此,我们希望合适的情况下使用 SSR,比如需要对

    81920

    微前端那些事儿

    服务器端组合中,路由是通过服务器端完成的,因为整个应用程序逻辑都在服务器。...边缘组合中,CDN 是突出的参与者,因为它通过基于请求的页面 URL 边缘级别通过嵌入将它们组装在一起来为微前端提供服务。 客户端组合中,微前端是根据需求和应用程序的当前状态加载的。...例如,如果用户即将认证,则会加载认证微前端或加载登陆页面。 除了上述路由技术,我们还可以根据需要使用智能路由来配置应用程序。例如,如果我们使用将微前端加载为单应用程序应用程序外壳。...当我相同或不同页面上使用多个微前端,我们总是希望可以和其他微前端用户交互。 不同微前端之间的沟通可能不是那么微不足道,尤其是当有不同的团队构建它们。...其中可以单独为vue构建自己的single-spa,为react构建自己的single-spa,最后两者通过webpack共同引入使用,并且两者也可以独立访问。具体的代码github上有很多实例。

    42230

    Sentry Web 前端监控 - 最佳实践(官方教程)

    ” 表单中,选择 “Issue Alert” 类型并输入以下值 每次在所有环境(All Environments)中通过邮件(Mail)看到事件,新的警报规则都会通知选定的团队成员 单击 Save...通过将产品添加到您的购物车并单击 Checkout 再次生成错误 检查您的电子邮件以获取有关新错误的警报,然后单击 Sentry 查看以打开 issue 页面 请注意 该事件现在标记有 Release...Step 3: 可疑提交和建议受理人 现在可疑提交(suspect commits)和建议受理人(suggested assignees)应该开始出现在问题(issue)页面上。...请注意,电子邮件中添加了一个新的可疑提交(Suspect Commits)部分 单击 Sentry 的查看(View)以打开问题(issue)页面 主面板中,注意 SUSPECT COMMITS...您可以单击提交(commit)按钮 GitHub 查看实际提交详细信息 右侧面板中的 Suggested Assignees --- 您将看到可疑提交的作者被列为此问题的建议受理人(suggested

    4.2K20

    React缓存页面」从需求到开源(是怎么样让产品小姐姐刮目相看的)

    如上图所示,当我们编辑内容的时候,一些数据可能从其他页面获得,所以要求,无论切换路由,切换页面,当前页面的编辑信息均不能被置空,只有点击确定 ,重置,表单才内容置空。...react 中没有对应的 keepalive内置 api,后来上GitHub搜索相关项目,感觉有很多不符合业务需求的情况。还有一些潜在的风险。瞬间慌了~~~。内心有一种万神兽奔腾的感觉。 ?...,props信息等,我们核心思想就是,切换页面的时候,组件销毁,但是作为渲染调度的react fiber保存keepalive状态。...工作流程分析 受到react-router-cache-route开源项目的启发,设计整个流程的时候,采取了交换dom树的方式。...npm , 的项目除了 README.md ,package.json 和 lib 下打包的文件之外,大部分文件是开发时候或者编译阶段用到的,不需要上传到npm,所以需要在 .npmignore 这么写

    1.8K20

    经验 | 今年的你应该花5个月时间去学习JS,并且...

    涉及到Javascript的部分。 8.学会用Bootstrap建立网站。先从这个开始,然后转到Bootstrap 4文档,并添加你样板网站上看到的组件。了解它提供的好处vs自己编写CSS。...4.使用create-react-app构建示例React应用程序。创建React应用程序会为你开启一个新的世界。 5.Heroku上部署你的应用程序。...6.GitHub页面上部署你的应用程序。 7.开始关注Medium上面的Top10文章,阅读任何有关编程的文章。...3、开始将你的小项目上传到GitHub。雇主会看你的GitHub配置文件,以及你在那里的活跃程度。尝试在你的个人项目每周提交5次(它们不必很大)。...我们大多数人花了很多时间像StackOverflow这样的页面上,或者搜索谷歌,因为那里有太多的资源。一旦你打好了基础,你就可以去任何地方。你只需要知道如何寻找答案并提出问题。 结论 注重效率。

    41110

    手写React的Fiber架构,深入理解其原理

    熟悉React的朋友都知道,React支持jsx语法,我们可以直接将HTML代码写到JS中间,然后渲染到页面上,我们写的HTML如果有更新的话,React还有虚拟DOM的对比,更新变化的部分,而不重新渲染整个页面...这样就用React.createElement的嵌套关系实现了HTML节点的树形结构。 让我们来完整看下这个简单的React页面代码: ? 渲染在页面上是这样: ?...React的官方演讲中有个例子,可以很明显的看到这种同步计算造成的卡顿: ?...可以看到这个序列中,当我们return父节点,这些父节点会被第二次遍历,所以我们写代码,return的父节点不会作为下一个任务返回,只有sibling和child才会作为下一个任务返回。 ?...统一commit DOM操作 上面我们的performUnitOfWork一边构建Fiber结构一边操作DOMappendChild,这样如果某次更新好几个节点,操作了第一个节点之后就中断了,那我们可能看到第一个节点渲染到了页面

    1.7K41

    的职业是前端工程师【六】:前端程序员如何有效地提高自己

    遗憾的是,大部分的官方 hello,world 都不是很详细,这时候我们可以 GitHub 搜索 xxx starter kit 来做同样的事,如 React Starter Kit,就可以轻松地...GitHub 找到相就的项目,如react-slingshot ?...对于前端来说,我们会练习到基本的内容: GET 和 POST 数据 列表到详情的跳转和返回 对于用户登录凭据的获取和保存 基本涉及到了一个框架的大部分内容,路由、模板、API 请求、数据存储、用户授权等等...如当我们打开一个 Web 应用的时候,应该要有一个路由处理的工具,来将用户导向相应的页面。而这个页面会有对应的控制器和模板,路由就是来分发用户的请求。...当页面数据数据或者用户操作页面上的数据状态就会发生变化,这时就需要状态管理工具来管理。 ?

    1.1K60

    负责任的编写JavaScript(一)

    从统计数据看,JavaScript是性能的关键[1]。以现在的趋势,中等大小的页面很快就会至少发送 400 KB 的 JavaScript,而这仅仅是传输的大小,并且还是压缩后的。...当我们决定构建「应用程序,这些限制不会突然消失,用户的手机也不会获得神奇的新功能。 我们有责任评估谁在使用我们的产品,并认识到他们访问互联网的条件可能与我们预想的条件不同。...左侧的应用完全取决于 JavaScript 来呈现页面。右侧的应用程序服务器呈现响应,但随后使用客户端映射将组件附加到现有的服务器提供的标记上。...如果客户端路由无法让人们知道页面上的内容已更改,则可访问性也会受到损害。这会使那些依靠辅助技术浏览页面的人无法确定页面上发生了什么改变,解决这个问题是一项艰巨的任务。 然后是我们的老对手:系统开销。...图3 图3.初始页面上预加载了 writing/ 的 HTML。当用户请求 writing/ ,会立即从浏览器缓存中加载其HTML。 链接预加载的主要缺点是你需要意识到它可能会造成浪费。

    75850

    21个让React 开发更高效更有趣的工具

    应用程序允许你声明props及其types,树中查看组件,导入背景图像,将它们定义为有状态或无状态,定义其父组件将是什么,放大/缩小,以及将原型导出到新的或现有项目。...Guppy Guppy 是React的一个友好且免费的应用程序管理器和任务运行器,它在桌面上运行且跨平台的,你可以放心用。...CodeSandbox 最初早期阶段支持React,但它们现在已经扩展到Vue和Angular等库的其他入门模板。...它可以帮助你开发页面是更容易发现一些性能问题,因为它们会使用橙色或红色对严重的重新渲染问题进行着色。 18....https://github.com/qq44924588... 是小智,公众号「大迁世界」作者,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,进阶的路上,共勉!

    98620

    「译」React 服务器组件 (RSCs) 的深入分析

    你可能(正确地)假设客户端组件客户端渲染,但 Next.js 服务器渲染客户端组件以生成初始 HTML。因此,浏览器可以立即开始渲染它们,然后稍后执行水合操作。...这为浏览器接收文档的多个块并在接收渲染它们做好了准备。我们实际可以在打开开发者工具的网络标签看到该头部。刷新并点击文档请求。...对于每个块,服务器发送块的内容前会响应该块的大小。从输出中我们可以看到,服务器通过 16 个不同的块传输了整个页面。最后,服务器发送回一个大小为零的块,表示流的结束。第一个块以 <!...这就是让我们浏览器中看到组件内容使用的“替换器”函数。整个页面最终会一块一块地完成加载。...这是它的样子:当我们放大看最开始的时候,我们可以看到第一个“解析 HTML”跨度。那是服务器向浏览器流式传输文档的第一块数据。

    16510

    从零开始使用 Astro 的实用指南

    它还允许我们需要加入动态的客户端JavaScript,这意味着我们可以在网站上拥有可交互的组件,但必要进行。换句话说,Astro允许你从简单的开始,需要增加复杂性。...加载本地文件 在你的blog目录中添加更多的博客文章,这样我们就可以我们的主页创建一个列表。 Astro.glob()允许你将本地文件加载到你的静态页面上。...而且你不必使用一个框架,你可以使用多个。 我们的项目中,想在主页的底部添加一个FAQ部分。没有太多的时间,只想使用别人的作品,以便能够尽快创建页面。...由于动作不生效,当你点击按钮,你无法展开子项。 将在下一节向你展示我们需要的东西。 指令 正如你在上一个例子中看到的,这个组件被添加到了页面上,但它没有生效。...这意味着所有的页面最后都是静态HTML。因此,如果你拥有一台服务器,你部署网站的第一个选择是仅将你的最终HTML文件上传到你的服务器。 在你部署你的网站之前,你需要构建它。

    88740

    Vue.js最佳静态站点生成器对比

    https://nuxtjs.org/ 名单第一个是 Nuxt.js,这是一个基于 Vue.js 构建的开源高级框架。... VuePress 中,每个页面都被视为一个 markdown 文件,它们被渲染为 HTML 页面,并在加载页面充当一个单应用程序。...与 React 中的 Gatsby 相似,Gridsome 是一个数据驱动的框架。Gridsome 使用一个 GraphQL 层从各种源中获取内容,然后从中动态生成页面。...尽管 Saber 目前仅支持 Vue.js,但它的团队也计划扩展对 React 的支持。 由于 Saber 仍然是这一领域的新手,因此它的 GitHub 存储库拿到了 2000 星。...在对比以上四个框架,根据 GitHub 和 npmtrends.com 的统计数据,可以看到 Nuxt.js 和 VuePress 处于领先地位。 ? npmtrends 对比数据 ?

    5K10

    超详细的React组件设计过程-仿抖音订单组件

    删除订单: 删除指定订单,由于数据是fastmock中请求得到,因此删除相对于前端。 实现Empty(空状态)组件 当当前状态下订单数量为 0 ,显示该组件,否则显示列表组件。...2.1 实现tab切换效果 首先来完成第一个需求:当点击某个tab,如'待支付',这个tab要有红色下划线效果。...实现原理其实很简单,就是当我们触发该tab的点击事件,就将我们事先写好的active样式加到该tab。... ) } 2.4 设置loading状态 在数据请求过程之,页面空白,为了提升视觉的效果,在这个时间段我们就设置一个loading样式...希望本篇文章对你也有帮助,你的就是对的最大支持^_^ 源码地址:cool-g/react-reportPage: 仿抖音的订单组件 (github.com) gitpage地址(直接查看页面效果):

    11110
    领券