Member-only story
(this is a beginner friendly article)
When you write code in a front end framework like React, Vue, or Angular, you are essentially writing in a different programming language. Yes, you may still be using the JS, HTML and CSS syntax that you are familiar with (not in every case) but the files that you are writing are not actually executable by the browser. The common error you will see when you try to exeute react code without compiling is this:
This is because the ‘<’ symbol is not a part of the Javascript language, and so it is not executable as JS. To allow your code to execute in the browser you will need to use a compiler to turn it into a bundle of ‘vanilla’ js (javascript in a backward compatible syntax that is interpretable by any browser).
Compilers include webpack, rollup, and gulp.
Modern browsers have come a long way. Chrome, Edge, Firefox, Safari, and opera all have very respectable support for the features of JS, CSS, and HTML that we want to use as developers. It is unlikely though, that they will ever support the syntax of individual JS frameworks like angular or react (owned by Google and Facebook respectively) for obvious reasons.
Therefore, it’s important for every web dev to get familiar with at least one of these compilation tools.
