Many developers new to React are not aware of what is really going on with their code base at a lower level. The code you write will often be very different from the code that reaches the browser at runtime. There will certainly be no TypeScript. See my post here on that specifically.
I want to use an example in React to show code transformation in action. Let’s take a helper function from React, during development I can use:
|
1 |
import { isValidElement } from 'react' |
And in my code I could invoke it like so:
|
1 |
console.log(isValidElement(Component)) |
and if we take a look at the React lib, the implementation looks like this:
|
1 |
function isValidElement<P>(object: {} | null | undefined): object is ReactElement<P>; |
Spoiler alert – when we look at this code at runtime, it is not going to look anything like what you have seen above, let’s take a look:
|
1 2 3 |
function isValidElement(object) { return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE; } |
Notice how the runtime code is completely different, and if you have a keen eye you will notice that this final snippet only contains native Javascript, and it must, because the browser simply doesn’t support much of the syntactical sugar that we have seen prior. This also happens with JSX.
Check out tools like babeljs that can be used to transform our lovely development code to ugly browser code at compile time!