React之从0开始（3）

️○-2025-01-01 12:57

搞了半天，也总算是运行出了一个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;