Как этот код React работает на CodePen, даже если препроцессор не выбран?

У меня есть этот код на CodePen: https://codepen.io/anon/pen/OdOyJX это работает отлично, и я не понимаю, почему это работает.

ReactDOM.render(
  <div>Hello, world!</div>,
  document.getElementById('root')
);

В настройках JavaScript не выбран препроцессор, поэтому я ожидаю, что синтаксис JSX завершится ошибкой, поскольку «‹» является недопустимым токеном. Что заставляет это работать на CodePen?


person Hamdi Douss    schedule 06.02.2019    source источник
comment
Это не объясняет, почему этот код может работать. <div>Hello, world!</div> не является правильным синтаксисом JS, и без транспилятора (или препроцессора codepen), который даже не должен правильно анализироваться.   -  person Hamdi Douss    schedule 06.02.2019
comment
В результате происходит некоторая предварительная обработка JSX = › ReactDOM.render( React.createElement('div', null, 'Hello, world!'), document.getElementById('root')); //# sourceURL=pen.js   -  person Keith    schedule 06.02.2019
comment
Похоже, что codepen, если препроцессор JS не выбран, использует Babel по умолчанию. например. используя async / await, получите все _asyncToGenerator.   -  person Keith    schedule 06.02.2019
comment
Спасибо @Кит. Это где-нибудь задокументировано? Какова цель выбора Babel в препроцессоре?   -  person Hamdi Douss    schedule 06.02.2019


Ответы (2)


Если вы сейчас посмотрите на свою ручку, то увидите, что она действительно не работает с < в вашем JavaScript, но если вы включите Babel, она будет работать хорошо.

Babel, должно быть, был случайно включен обратно по умолчанию, когда вы задали этот вопрос!

person Cassidy Williams    schedule 09.07.2019

CodePen автоматически добавила поддержку Babel, как указано здесь.

person idan    schedule 05.03.2019
comment
В упомянутой вами статье говорится, что вы должны выбрать Babel в качестве препроцессора JS. Нет упоминания о том, что Babel выбирается автоматически, если вы не выбираете какой-либо препроцессор (как в CodePen вопроса). - person Hamdi Douss; 06.03.2019