React developers often hear that JSX isn’t real JavaScript — and it’s true. JSX is a developer-friendly syntax that gets transformed behind the scenes into pure JavaScript before the browser even sees it. But how does that work?
If you're a C# developer diving into React, this analogy might help: JSX + Babel is to React what C# + .NET is to Windows.
.NET (C#) Workflow Breakdown
Step | Description |
---|---|
1. Write C# code | Developer writes human-readable C# code |
2. Compile to IL | C# is compiled into Intermediate Language (IL) |
3. JIT Compilation | Just-In-Time compiler turns IL into native machine code |
4. OS Execution | Machine code is executed by the OS |
React (JSX + Babel) Workflow Breakdown
Step | Description |
---|---|
1. Write JSX in .jsx file | Developer writes JSX code in React components |
2. Babel Transpiles | Babel transforms JSX into React.createElement() calls (pure JavaScript) |
3. Webpack/Vite Bundles | Tools bundle and optimize the code for the browser |
4. Browser Executes | Transformed JS is run by the browser (e.g., Chrome’s V8 engine) |
Example Transformation
JSX:
function Welcome() {
return <h1>Hello, davinceleecode!</h1>;
}
After Babel:
function Welcome() {
return React.createElement("h1", null, "Hello, davinceleecode!");
}
Simple Analogy:
JSX is like writing your chill personal notes 📝
But the browser needs a clean printout it can understand 📄
So Babel is like your secretary who rewrites it into clean, readable JS before handing it off to the browser.
Same way that C# goes through IL and gets interpreted into machine code by the .NET runtime and OS.
Summary Table
Scope | JSX + Babel | C# + .NET |
---|---|---|
Language | JSX | C# |
Transformation Tool | Babel | C# Compiler |
Intermediate Form | JavaScript (via createElement ) |
Intermediate Language (IL) |
Final Execution | In the browser (e.g., Chrome, Firefox) | By OS via .NET CLR |
So if you're coming from the C# world, just remember: JSX is like C#, and Babel is your IL compiler. It all ends up as something your machine — or in React's case, your browser — can understand.
If you found this helpful, consider supporting my work at ☕ Buy Me a Coffee.