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;

相关推荐
你的人类朋友8 分钟前
设计模式有哪几类?
前端·后端·设计模式
Yeats_Liao24 分钟前
Go Web 编程快速入门 10 - 数据库集成与ORM:连接池、查询优化与事务管理
前端·数据库·后端·golang
啃火龙果的兔子1 小时前
前端八股文react篇
前端·react.js·前端框架
打小就很皮...1 小时前
React 实现 i18next 中英文切换集成
前端·react.js·i18next
拉不动的猪1 小时前
函数组件和异步组件
前端·javascript·面试
淮北4941 小时前
html + css +js
开发语言·前端·javascript·css·html
你的人类朋友1 小时前
适配器模式:适配就完事了bro!
前端·后端·设计模式
Setsuna_F_Seiei1 小时前
CocosCreator 游戏开发 - 利用 AssetsBundle 技术对小游戏包体积进行优化
前端·cocos creator·游戏开发
黄毛火烧雪下2 小时前
高效的项目构建和优化之前端构建工具
前端
90后的晨仔2 小时前
在 macOS 上轻松获取 GIF 图片总时长:多种实用方法详解
前端