时间戳

首页 > 解决方案 > 反应项目 plunkr - 设置

reactjs - 反应项目 plunkr - 设置

问题描述

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

当我搜索示例反应项目时，我遇到了这个项目。我看到它明确使用 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>

  </>

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

标签： reactjsplunker

解决方案

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>
  </>
);

推荐阅读