反应项目 plunkr - 设置答案

【问题标题】：react project plunkr - setup反应项目 plunkr - 设置
【发布时间】：2020-11-03 21:56:14
【问题描述】：

我正在尝试在 Plunkr 中设置一个 React 项目来玩耍和学习 React。

当我在谷歌上搜索示例反应项目时，我遇到了这个项目。我看到它明确使用 script.jsx 文件而不是 scripe.js 。我在哪里可以在 plunker 上找到一个简单的入门项目，它设置了 react 库，以便我可以将它用作我的沙箱以进行进一步的学习。

如果我将 script.jsx 更改为 script.js，它将不起作用。在我见过的大多数示例中，我没有看到 jsx 文件，而只使用了一个 js 文件。

使用 jsx 文件的 Plunkr https://plnkr.co/edit/tpl:a3vkhunC1Na5BG6GY2Gf?preview

然后我遇到了另一个似乎可以使用 .js 文件的项目 https://plnkr.co/edit/Hya7ARlzCvv5N94w?open=Hello.js&deferRun=1

但我没有看到 react 使用的 render() 方法。它使用来包含将进入 react() 的代码。

export default ({ name }) => (
  <>
    <h1>Hello {name}!</h1>
    <p>Start editing and see your changes reflected here immediately!</p>

      <ul>
        {users.map(function (user) {
          return <li>{user.name}</li>;
        })}
      </ul>

  </>

这一切都让我感到困惑。请问有人能告诉我如何理解上述内容吗？

【问题讨论】：

标签： reactjs plunker

【解决方案1】：

Plunker 现在有一些官方启动器，您可以使用不同的前端框架构建项目。这些可以通过https://plnkr.co/edit 联系到，并且基于starters repo。

这将为您提供一个主要入口点为App.js的项目：

import React from 'react';

export default ({ name }) => (
  <>
    <h1>Hello {name}!</h1>
    <p>Start editing and see your changes reflected here immediately!</p>
  </>
);

【讨论】：