2.2　Hello React开启你的React之旅

本节将开启React之旅，搭建基本的开发环境，掌握React的核心概念，实现第一个React程序。接下来，我们将通过一个简单的示例程序Hello React，帮助你了解React的基本用法和特点。

Hello React是我们的第一个React程序，它非常简单，却能帮助你快速上手React的开发方式。我们的目标是在页面上显示文本“Hello World”，当你单击按钮后，文本将变成“Hello React”。接下来，让我们一步步来实现这个示例。

注意，第一个React项目并不是通过脚手架创建，我们循序渐进先在HTML页面中引入React，掌握React基本语法。

打开VS Code，新建demo文件夹，新建index.html页面，在index.html页面实现"Hello React"效果。

使用React首先要做的是在页面中添加相关依赖，React需要依赖3个包，可以直接通过CDN引入，也可以下载到本地目录，我们采用CDN引入，示例代码如下。

<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script
Crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

上述三个依赖第一个包react包含了react所必需的核心代码，react-dom是React渲染在不同平台所需要的核心代码，最后的babel是将JSX代码转换成浏览器可执行的JavaScript代码。开发React项目这三个包是不可缺少的！

接下来在页面中渲染Hello World，示例代码如下。

<div ></div>
<script type="text/babel">
   const root = ReactDOM.createRoot(document.querySelector('#root'))
   root.render(<h1>Hello World</h1>)
</script>

【代码解析】

React18要使用ReactDOM.createRoot()方法创建根，这和React18之前的版本存在区别，在React18之前直接使用ReactDOM.render()渲染内容即可。

上述代码通过root.render()方法向div根元素渲染内容，并且直接将h1标签渲染到根元素，这种JavaScript代码和HTML代码混合模式又称作JSX语法。

最后需要注意，由于要使用babel解析JSX代码，所以在script标签上必须设置type属性。

掌握了React基本使用之后，接下来开始查看本节的案例，示例代码如下。

【代码解析】

上述代码中，单击按钮可以将Hello World修改成Hello React，整个案例有以下三个注意事项。

（1）修改的文本要使用变量msg接收，在JSX代码中使用{msg}渲染。

（2）在JSX语法中绑定事件要使用onClick。

（3）在事件处理函数中修改变量msg的值，修改之后必须重新调用root.render()渲染最新页面。

Hello React作为React的第一个程序，帮助读者从零开始了解React的基本用法和特点。通过这个简单的示例，已经体验到了React所提供的高效、简洁的开发方式。接下来，我们继续深入学习React的更多内容，开发出更加强大的Web应用。期待你在React的世界中取得更加辉煌的成就！ jLklMwjy6Fz3Qq6ZS5FaCbvPH6Zv7zfTpIDdPhPWo5XhB4s5Cb8NTjgr7/c//2Eb