реагирует на проект plunkr — настройка

#reactjs #plunker

#reactjs #plunker

Вопрос:

Я пытаюсь настроить проект react в Plunkr, чтобы поиграть и изучить react.

Я наткнулся на этот проект, когда искал примеры проектов react в Google. Я вижу, что он использует файл script.jsx явно, а не scripe.js . Где я могу найти простой стартовый проект на plunker с настройкой react libs, чтобы я мог использовать его в качестве своей песочницы для дальнейшего обучения.

Если я изменю script.jsx на script.js это не работает. В большинстве примеров, которые я видел, я не видел файла jsx, а использовался только файл js.

Plunkr, где используется файл jsx https://plnkr.co/edit/tpl:a3vkhunC1Na5BG6GY2Gf?preview

Затем я наткнулся на этот другой проект, который, похоже, работает с файлами .js https://plnkr.co/edit/Hya7ARlzCvv5N94w?open=Hello.jsamp;deferRun=1

Но я не вижу используемого метода render() из react. Он использует <> для хранения кода, который будет входить в 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>

  </>
  

Все это сбивает меня с толку. Пожалуйста, кто-нибудь может сказать мне, как понять вышесказанное?

Ответ №1:

Теперь у Plunker есть несколько официальных стартеров, на основе которых вы можете создавать проекты с использованием различных интерфейсных фреймворков. Они могут быть достигнуты в https://plnkr.co/edit и основаны на начальном репо.

Это даст вам проект, основной точкой входа которого является App.js :

 import React from 'react';

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