React之从0开始(3)

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

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

html 复制代码
<!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;

相关推荐
emojiwoo16 小时前
前端视觉交互设计全解析:从悬停高亮到多维交互体系(含代码 + 图表)
前端·交互
xxy.c16 小时前
嵌入式解谜日志—多路I/O复用
linux·运维·c语言·开发语言·前端
yuehua_zhang16 小时前
uni app 的app端 写入运行日志到指定文件夹。
前端·javascript·uni-app
IT_陈寒17 小时前
SpringBoot 3.x实战:5种高并发场景下的性能优化秘籍,让你的应用快如闪电!
前端·人工智能·后端
麦文豪(victor)17 小时前
自动化流水线
前端
JarvanMo18 小时前
Flutter. FractionallySizedBox
前端
EndingCoder19 小时前
调试技巧:Chrome DevTools 与 Node.js Inspector
javascript·网络·electron·node.js·vim·chrome devtools
知识分享小能手19 小时前
React学习教程,从入门到精通, React 入门指南:React JSX 语法知识点详解及案例代码(8)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue
卓码软件测评19 小时前
第三方web测评机构:【WEB安全测试中HTTP方法(GET/POST/PUT)的安全风险检测】
前端·网络协议·安全·web安全·http·xss
学习3人组19 小时前
React 组件基础与事件处理
前端·javascript·react.js