反应项目 plunkr - 设置

Question

我正在尝试在 Plunkr 中设置一个 React 项目来玩和学习 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>

  </>

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

Answer 1

Plunker 现在有一些官方启动器，您可以使用不同的 front-end 框架构建项目。这些可以在 https://plnkr.co/edit and are based off the 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>
  </>
);

反应项目 plunkr - 设置

react project plunkr - setup

plunker

reactjs