react project plunkr - setup

I am trying to setup a react project in Plunkr to play around and learn react.

I came across this project when I googled for sample react projects. I see that it uses a script.jsx file explicitly rather than scripe.js . Where can I find a simple starter project on plunker that has react libs setup so that I can use it as my sandbox for further learning.

If I change the script.jsx to script.js it does not work. In most of the samples I have seen I have not seen a jsx file rather only a js file has been used.

Plunkr where jsx file is used https://plnkr.co/edit/tpl:a3vkhunC1Na5BG6GY2Gf?preview

I then came across this other project that seems to work with .js files https://plnkr.co/edit/Hya7ARlzCvv5N94w?open=Hello.js&deferRun=1

But I dont see the render() method from react used. It is using a <> to contain the code that would go inside 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>

  </>

All this is confusing to me. Please can someone tell me how to understand the above?

Solution

Plunker now has a few official starters off of which you can build projects using different front-end frameworks. These can be reached at https://plnkr.co/edit and are based off the starters repo.

This will give you a project whose main entrypoint is App.js:

import React from 'react';

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