小鸡啄米之React Hello World

原创已于 2022-07-24 00:55:00 修改 · 236 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2020-05-25 21:36:57 首次发布

React 专栏收录该内容

22 篇文章

订阅专栏

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

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>);