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;

相关推荐
blackorbird1 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者2 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强2 小时前
Chrome和IE获取本机ip地址
前端
天***88962 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*2 小时前
zabbix安装
linux·运维·前端·网络·zabbix
大怪v3 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
清羽_ls3 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友3 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵3 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
Panda__Panda3 小时前
docker项目打包演示项目(数字排序服务)
运维·javascript·python·docker·容器·c#