So they told us that the browser does not understand Jsx. That babel compiles the jsx to a javascript object. But when I go to codepen ( with my browser) . I can write react code , with jsx and it works. So who is doing the compilation? Or is my code sent to a backend where it is compiled and then sent back to the browser. But i don’t think that is the case because it’s happening so fast. As I am typing the coding , I am seeing the output immediately. How are they doing it?

React na JavaScript Library chikina...

chukwuebuka65:
So they told us that the browser does not understand Jsx. That babel compiles the jsx to a javascript object. But when I go to codepen ( with my browser) . I can write react code , with jsx and it works. So who is doing the compilation? Or is my code sent to a backend where it is compiled and then sent back to the browser. But i don’t think that is the case because it’s happening so fast. As I am typing the coding , I am seeing the output immediately. How are they doing it?

Both JS and Node, you can use JS to parse XML and convert the markup into DOM API e.g document.createElement, React is parsing JSX and transforming them into JS, it can be done on the browser and backend.

Look at the npm module Acorn, it's what Svelte uses it takes a JSX-like code *.svelte and compiles it into JS and it's written in JS.

AST and Token Parsing

it works the same as every other online compiler or anything at all where you can input code and get an output.
if you look at the network tab during typing, you would notice that a request is being sent to a server where the magic happens and the result is sent back to the client (you)
a simple hello world html is affixed below

https://i.imgur.com/3Xj2daX.png

chukwuebuka65:
So they told us that the browser does not understand Jsx. That babel compiles the jsx to a javascript object. But when I go to codepen ( with my browser) . I can write react code , with jsx and it works. So who is doing the compilation? Or is my code sent to a backend where it is compiled and then sent back to the browser. But i don’t think that is the case because it’s happening so fast. As I am typing the coding , I am seeing the output immediately. How are they doing it?

you can include the babel standalone script to transcribe your code in the browser

QuoteJustOnce:
it works the same as every other online compiler or anything at all where you can input code and get an output.
if you look at the network tab during typing, you would notice that a request is being sent to a server where the magic happens and the result is sent back to the client (you)
a simple hello world html is affixed below

https://i.imgur.com/3Xj2daX.png

Are you saying that for each keystroke , a request is sent to the backend for compilation? I have also seen some pens with React and ReactDom imported at the top of the editor. Why is that?

etoluw:


you can include the babel standalone script to transcribe your code in the browser

I never hear this one before ooo. Even in the react docs where they talked about using react via cdn, they didn’t use JSX but React.createElement(). How do i verify this?

qtguru:


Both JS and Node, you can use JS to parse XML and convert the markup into DOM API e.g document.createElement, React is parsing JSX and transforming them into JS, it can be done on the browser and backend.

Look at the npm module Acorn, it's what Svelte uses it takes a JSX-like code *.svelte and compiles it into JS and it's written in JS.

AST and Token Parsing

If JSX can compiled in the browser using javascript/React, why do we need to do it during our build process then. And why can’t we use JSX while using react via cdn

chukwuebuka65:


If JSX can compiled in the browser using javascript/React, why do we need to do it during our build process then. And why can’t we use JSX while using react via cdn

performance

transpiling JSX in runtime is slower than having a generated pure function giving the DOM.

it's like JIT vs AOT

qtguru:


performance

transpiling JSX in runtime is slower than having a generated pure function giving the DOM.

it's like JIT vs AOT

Ok makes sense.

You can also you code action on git hub to create react app and code there.

Deicide:
You can also you code action on git hub to create react app and code there.

Wetin you smoke?