React之从0开始(3)

embedded/2025/1/7 22:20:34/

搞了半天,也总算是运行出了一个Hello, World!了。中间遇到了一个小bug,就是没有在index.html中引入写好的main.jsx(新手上路,多多理解)。

这篇文章呢,就是简单记录一下,我目前能成功运行的那么一个Hello, World!

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>废物网站</title></head><body><div id="root"></div><script type="module" src="./src/main.jsx"></script><!--我就是这行忘写了,找了好长时间的bug--></body>
</html>
javascript">import React from 'react'
import ReactDOM from 'react-dom/client'
import App from "./App.jsx";// 渲染组件到HTML页面
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
javascript">import React from 'react';
import 'react-toastify/dist/ReactToastify.css';const App = () => {return (<div>Hello, World!</div>);
};export default App;

最后,简单说一下上面的一些要点吧。

// 渲染组件到HTML页面
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

这段代码呢是先创建一个虚拟的DOM,然后用createRoot方法创建一个根节点。这个根节点再调用render方法与App绑定渲染,这里的App是导入的。

那要导入App,自然是需要导出的。

所以不要忘记export default App;


http://www.ppmy.cn/embedded/151812.html

相关文章

实时数仓:基于数据湖的实时数仓与数据治理架构

设计一个基于数据湖的实时数仓与数据治理架构&#xff0c;需要围绕以下几个核心方面展开&#xff1a;实时数据处理、数据存储与管理、数据质量治理、数据权限管理以及数据消费。以下是一个参考架构方案&#xff1a; 一、架构整体概览 核心组成部分 数据源层 数据来源&#xff…

2501d,d的优势之一与C互操作

原文 如前,我已将个人理财包从C移植到D语言,开始时,把里面的一些移植到Rust中,直到我再也受不了了. D和Rust版本中都有读取从美国运通下载的.csv文件的工具之一,并把交易加载到包含财务数据的轻查数据库中,试通过使用基于李文距离的算法的模糊比较问题的描述与现有问题,来为每…

探索Composable Architecture:小众但高效的现代框架技术

近年来&#xff0c;随着应用规模和复杂性的不断提升&#xff0c;对开发效率和可维护性的要求也水涨船高。特别是在领域驱动设计 (DDD) 和反应式编程 (Reactive Programming) 的趋势影响下&#xff0c;一些小众但极具潜力的框架应运而生。本篇博客将深入探讨一种日益受到关注但尚…

Ruby自动化:用Watir库获取YouTube视频链接

引言 Watir&#xff08;Web Application Testing in Ruby&#xff09;是一个强大的工具&#xff0c;它允许开发者使用Ruby语言来自动化控制浏览器。Watir最初被设计用于自动化Web应用测试&#xff0c;但其功能远不止于此。通过Watir&#xff0c;我们可以模拟用户行为&#xff…

家政预约小程序07参与活动

目录 1 浏览时写入数据2 点击参与按钮更新记录总结 我们上一篇搭建了活动展示的页面&#xff0c;当用户浏览活动的时候&#xff0c;需要记录参与的信息&#xff0c;本篇我们介绍一下如何实现活动参与的功能。 1 浏览时写入数据 为了方便跟踪用户的信息&#xff0c;比如用户浏览…

解决iNodeClient客户端出现查询SSL VPN网关参数失败的问题

一、问题&#xff1a; 使用iNodeClient连接VPN报错&#xff0c;校验网关、用户名、密码都没问题&#xff0c;仍然抱错查询SSL VPN网关参数失败&#xff0c;请检查网络配置或联系管理员。 二、解决方案&#xff1a; 2.1 方案一 重启iNodeAuthService服务 sudo /Library/Star…

Linux 基础七 内存

在操作系统中&#xff0c;进程的内存布局通常分为几个区域&#xff0c;包括代码段、已初始化的数据段、未初始化的数据段&#xff08;BSS段&#xff09;、堆和栈。其中&#xff0c;堆用于动态内存分配&#xff0c;其大小可以在运行时根据需要增长或收缩。 文章目录 7.1 在堆上…

戴尔/Dell 电脑按什么快捷键可以进入 Bios 设置界面?

BIOS&#xff08;基本输入输出系统&#xff09;是计算机硬件与操作系统之间的桥梁&#xff0c;它负责初始化和测试系统硬件组件&#xff0c;并加载启动操作系统。在某些情况下&#xff0c;如调整启动顺序、更改系统时间或日期、修改硬件配置等&#xff0c;您可能需要进入BIOS进…