本文搭建的简易 React 开发环境，适合开发简单 demo。

创建目录和文件

源代码放在 src 目录，输出目录是 public。

$ mkdir -p public
$ touch public/index.html
$ mkdir -p public/scripts
$ touch public/scripts/index.js
$ mkdir -p src
$ touch src/index.js

在页面中添加 React 库文件

修改 public/index.html 的内容，如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>React App</title>
    </head>
    <body>
        <div id="app"></div>
        <script
            src="https://unpkg.com/react@18/umd/react.development.js"
            crossorigin
        ></script>
        <script
            src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
            crossorigin
        ></script>
        <script src="scripts/index.js"></script>
    </body>
</html>

创建 package.json 文件

$ npm init -y

安装本地服务器

安装 live-server 本地服务器。

$ npm install --save-dev live-server

修改 package.json，设置 npm scripts，用于启动本地服务器。以 public 目录为服务器根目录。

{
  "scripts": {
    "serve": "live-server public"
  }
}

安装 Babel 依赖

Babel 把 React 的 JSX 语法转换为普通的 JavaScript，可以在浏览器中运行。

$ npm install --save-dev @babel/cli @babel/core @babel/preset-env @babel/preset-react

修改 package.json，增加 Babel 的监听脚本：

{
  "scripts": {
    "serve": "live-server public",
    "watch": "babel src/index.js --out-file=public/scripts/index.js --presets=@babel/env,@babel/react -w",
    "start": "npm run serve & npm run watch"
  }
}

开发时执行 npm run start，就可以同时启动本地服务器和 Babel。

编写 React 组件

修改 src/index.js，编写常规的 React 代码。

function App() {
    const [count, setCount] = React.useState(0);
    function handleClick() {
        setCount(count + 1);
    }

    return (
        <div>
            <h1>React App</h1>
            <p>count: {count}</p>
            <button onClick={handleClick}>Click me!</button>
        </div>
    );
}

const rootNode = document.getElementById('app');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(App));

修改代码后，Babel 会自动转译，服务器会自动刷新。

搭建简易本地 React 开发环境