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;

相关推荐
lecepin4 小时前
AI Coding 资讯 2025-09-17
前端·javascript·面试
IT_陈寒4 小时前
React 18实战:7个被低估的Hooks技巧让你的开发效率提升50%
前端·人工智能·后端
树上有只程序猿4 小时前
终于有人把数据库讲明白了
前端
猩兵哥哥5 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
司宸5 小时前
Prompt设计实战指南:三大模板与进阶技巧
前端
RoyLin5 小时前
TypeScript设计模式:抽象工厂模式
前端·后端·typescript
华仔啊5 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
江城开朗的豌豆5 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
前端人类学5 小时前
React框架详解:从入门到精通(详细版)
react.js·redux