小鸡啄米之React Hello World-优快云博客

本文详细介绍了如何使用React创建并渲染一个简单的'Hello, world!'应用。通过实例演示了如何搭建React项目，以及如何将h1元素渲染到指定DOM节点上。适合React初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React Hello World

Hello World直接上手
元素渲染

Hello World直接上手

依据前面的内容，搭建好react工程目录，这里使用npx
npx create-react-app mydemo
会在当前目录新建mydemo工程，注意：工程名必须为全小写

这里假设index.html中内容如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
</body>
</html>

在src目录的index.js中：

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
// react 18.2写法
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);