9

I have this code on CodePen: https://codepen.io/anon/pen/OdOyJX that works perfectly, and I am confused about why this works.

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

In the JavaScript settings, there is no preprocessor selected, so I expect the JSX syntax to fail as "<" is an invalid token. What makes this work on CodePen?

Boann
  • 48,794
  • 16
  • 117
  • 146
Hamdi Douss
  • 1,033
  • 1
  • 8
  • 17
  • This does not explain why this code may work. `
    Hello, world!
    ` is not a correct JS syntax, and without a transpiler (or a codepen preprocessor) that should not even be parsed correctly.     – Hamdi Douss Feb 06 '19 at 17:17
  • 1
    There is some JSX pre-processing going on as the result = > `ReactDOM.render( React.createElement('div', null, 'Hello, world!'), document.getElementById('root')); //# sourceURL=pen.js` – Keith Feb 06 '19 at 17:26
  • 1
    Looks like codepen, if no JS pre-processor is selected, is using Babel as default. eg. using `async / await` get all the `_asyncToGenerator` stuff. – Keith Feb 06 '19 at 17:32
  • Thanks @Keith. Is this documented anywhere? What is the purpose of selecting Babel then in the preprocessor? – Hamdi Douss Feb 06 '19 at 17:39

2 Answers2

2

If you look at your Pen now, it looks like it does indeed fail on the < in your JavaScript, but if you turn Babel on, it works well.

Babel must have been accidentally turned on my default back when you asked this question!

Cassidy
  • 3,328
  • 5
  • 39
  • 76
0

CodePen added Babel support automatically as stated here.

idan
  • 474
  • 3
  • 11
  • 1
    The article you mentioned states that you should select Babel as a JS preprocessor. There is no mention that Babel is selected automatically if you do not select any preprocessor (like in the CodePen of the question). – Hamdi Douss Mar 06 '19 at 08:25