Let’s take a look under ReactJS’s skirt
How does it look like? How does all this component code look when the browser gets to see it? Is it like seeing that cute girl out on the street, but in relationship it’s a different person, it’s time to find out.
The first impression
We have components, that are transformed by babel because browser doesn’t understand this syntax.
And result?
Demystifying ReactJS, ES5
On react documentation page, it was mentioned that react is usable with ES5.
More about what CDN is: https://stackoverflow.com/questions/47284414/can-i-do-everything-with-react-js-just-using-cdn-libraries-without-any-installa
This is how this html file looks when opened in browser.
This is interesting for me because, babel output used React.createElement. Documentation also refered to this when mentioning es5 syntax.
So, what If I link babel output with src tag from my index html?
In the browser.
Conclusion
What we are used to work with, helps us use fancy syntax and folder structures and beautiful components. The setup abstracts away — (removes the need for us to know what is done with the code we write) all of this from us to make work easier. Anyway, not all of us need to know about this, just curious ones.
You may find complete code here: https://github.com/srele96/under-reactjs-skirt
