-1

Very new to JSX but reading around it seems like both server-side and client-side (in browser) transpilation are possible options.

Is JSX intended to be sent to the client and typically transpiled in browser. Does this mean modern versions of Chrome, Firefox, Opera etc all understand JSX syntax?

Or is server-side transpilation more commonplace? Would you only desire client-side transpilation during dev, for example to avoid installing npm for some reason?

  • You've tagged this [tag:jsx] which is [the HTML-like syntax for generating DOM](https://reactjs.org/docs/introducing-jsx.html) used in React but you are linking to [this research project which seems to have been dead for almost half a decade](https://github.com/jsx/JSX/). Which are you actually asking about? – Quentin Jan 21 '20 at 11:14
  • 1
    While compilation of jsx is not particularly slow it is not fast. My project takes around 45 seconds to compile. The browser compiler is meant for debugging your applications and these days are not really used in most React projects considering the server-side workflow has better integration with Visual Studio Code etc. – slebetman Jan 21 '20 at 11:22
  • I'm not interested in the research project, read my post. I'm pointing out that it's a high search engine result for JSX, reflecting the confusion as to whether JSX is typically transpiled server-/client-side. –  Jan 21 '20 at 11:22
  • @JSStuball — If you aren't asking about that research project, why put it in the question. It is a complete red herring. – Quentin Jan 21 '20 at 12:00
  • I've removed it now. –  Jan 21 '20 at 12:06

2 Answers2

2

Is JSX intended to be sent to the client and typically transpiled in browser.

No.

Does this mean modern versions of Chrome, Firefox, Opera etc all understand JSX syntax?

No.

See the introduction to React:

The quickest way to try JSX in your project is to add this tag to your page:

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Now you can use JSX in any <script> tag by adding type="text/babel" attribute to it. Here is an example HTML file with JSX that you can download and play with.

This requires that you provide a transpiler (written in JS).

Or is server-side transpilation more commonplace? Would you only desire client-side transpilation during dev, for example to avoid installing npm for some reason?

Again, see the above link:

This approach is fine for learning and creating simple demos. However, it makes your website slow and isn’t suitable for production. When you’re ready to move forward, remove this new <script> tag and the type="text/babel" attributes you’ve added. Instead, in the next section you will set up a JSX preprocessor to convert all your <script> tags automatically.

Browser-side transpiling is suitable only for "learning and creating simple demos".

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
-1

From your link: "JSX performs optimization while compiling the source code to JavaScript. The generated code runs faster than an equivalent code written directly in JavaScript." Their other statement of "designed to run on modern web browsers" is arguably misleading - they don't mean that browsers can run it directly without transpilation - JSX code still needs to be transpiled into pure Javascript before a browser can use it.

Yorkshireman
  • 2,194
  • 1
  • 21
  • 36