小鸡啄米之React 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>);

使用yarn start启动工程就可以看到！！

元素渲染

从上面的例子来看，react将h1标签渲染到了example节点位置处，这称为元素渲染

注意：react无法对渲染的元素进行修改，在实际过程中的修改其实为覆盖操作，即更新元素直接在某个节点中渲染其他的元素