Quokka.js 示例 - 使用 create-react-app 创建 React 应用

Quokka.js 是一款可以在编辑器中实时运行 JavaScript 代码的工具。在这个示例中，我们将使用 Quokka.js 来创建一个 React 应用，所使用的工具为 create-react-app 。

安装 Quokka.js

首先，我们需要在我们的编辑器中（比如 Visual Studio Code）安装 Quokka.js 插件。使用以下命令来安装：

npm install -g quokka

创建 React 应用

接下来，我们将使用 create-react-app 工具来创建一个新的 React 应用。使用以下命令来安装 create-react-app：

npm install -g create-react-app

现在，使用以下命令来创建新的 React 应用，并进入该应用的目录：

create-react-app my-app
cd my-app

启动 Quokka.js

现在，我们需要启动 Quokka.js 来实时运行我们的代码。打开 VS Code ，找到你要编写代码的文件，右键点击选择 "Quokka.js Start On Current File"。Quokka.js 将在 sidebar 里打开一个新的面板，同时你也可以在代码上方看到你的代码开始运行了。

编写代码

我们现在可以开始编写 React 应用了！

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return (
    <div>
      <h1>Hello World!</h1>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

现在，你会发现 Quokka.js 在 sidebar 里面给出了你代码输出的结果。像这样：

┌───────────────────────────────────────────────────────────┐
│                    Quokka.js evaluation                    │
├───────────┬───────────────┬───────────────────────────────┤
│ Variables │    Values     │               Type              │
├───────────┼───────────────┼───────────────────────────────┤
│ App       │ [Function: App]│  function                       │
│ React     │ [Module]      │  object                         │
│ ReactDOM  │ [Module]      │  object                         │
└───────────┴───────────────┴───────────────────────────────┘
┌────────────────────────────────────────────────────────────┐
│                             Output                           │
├────────────────────────────────────────────────────────────┤
│ <div><h1>Hello World!</h1></div>                             │
└────────────────────────────────────────────────────────────┘

继续通过编辑代码并保存更新到 Quokka.js 中来查看变化。

结论

通过 Quokka.js，我们可以实时运行并查看我们的代码，节省了调试的时间，提高了生产力。而 Quokka.js 和 create-react-app 创造了一个极佳的前端开发环境。

参考资料

• Quokka.js 官网
• create-react-app 官网