1. React本地开发环境搭建

需要线安装Node.js:
Node.js下载地址：https://nodejs.org/en/download/
下载安装包：
image.png
双击运行后无脑安装。

打开命令行，输入node --version，如果出来版本号，说明安装成功：
image.png

2.Hello React

打开命令行，使用npx create-react-app my-app 命令创建React APP工程，命令执行完后，会生成一个my-app目录。
image.png

使用cd my-app命令进入工程文件夹，然后执行npm start命令：
image.png
这个APP不会处理后端逻辑或者数据库，只是一个前端工程，可以配合任何后端服务。

当完成工程开发后，可以使用npm run build命令构建react工程，会在工程的build文件夹中生成应用的优化版本。

使用VSCode编写代码：
image.png
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello React</title>
</head>
    <!--容器 -->
    <div id="test"></div>

    <!--引入React组件-->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>

    <!--编写代码操作容器-->
    <script type="text/babel">
        // 1.创建虚拟DOM
        const VDOM = <h1>Hello, React</h1>
        // 2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM, document.getElementById('test'))
    </script>
</html>

在VSCode中安装两个插件：React Native Tools和Live Server:
image.png
重启VSCode后，在文件编辑区右键，会出来Open with Live Server：
image.png
点击Open with Live Server，等待浏览器启动，即可看到页面效果：
image.png

Q.E.D.