why should I not use CDN for react & babel?

Question

When I was learning jQuery & Bootstrap, we (my fellow noobs learning web frameworks) were told CDN had a whole bunch of benefits and such.

Now that I am dabbling in React/Babel, we are told that we should download the files and have it all ready and good from our host server. But we are still capable of using CDN but for prototyping & development only and not suggested for production usage.

I thought the point of using CDN is to save money, bandwidth, etc.

I am referencing these statements:

Babel: Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side

React: "The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available." (the bottom of the page)

class Button1 extends React.Component {
    constructor(props) {
        super(props);
        this.but = null;
    }
    render() {
        let c = 'mdc-button mdc-button--raised mdc-button--primary mdc-ripple-upgraded';
        let l = e('label', {}, this.props.label);
        let i = iconToggle(this.props.icon);
        this.but = e('button', {className: c, onClick: () => {toggleLights()}}, l, i);
        return e('div', {className: 'myCenter'}, this.but);
    }
}

Answer 1

Edit:

You are using React without JSX.

React Without JSX

JSX is not a requirement for using React. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment.

As you don't need to compile your program in your computer, you can include react.min.js without any problem.

Babel is used to convert(compiles) JSX to JavaScript which is not advised to do it in browser as I stated below.

Most of the tutorials in the web are about using JSX because it is one of the advantage of using React. JSX is a syntactic sugar. You can write less code with JSX.

Try this online Babel compiler to see how JSX is converted to JavaScript and how much more code is generated.

So, if you are using React without JSX, then using CDN to fetch React library is faster than hosting it in your server. It works same like jQuery and Bootstrap. You don't need to include Babel as you are not using JSX.

---

Why you should not use CDN is present in the same Facebook page you have given.

If you prefer to use your own text editor, you can also download this HTML file, edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so don't use it in production.

To say it clearly,

Using CDN:

As Facebook said, it does a slow runtime code transformation in the browser.

That is your code doesn't execute right-away.

First your code should be converted to JavaScript so that browsers can execute it, as JSX is not supported.

After the conversion to JavaScript, then the browsers execute it.

On client's browser:

JSX -> JavaScript -> Execute

Using compiled (production version):

When you compile the JSX to JavaScript, you are saving lots of time by avoiding runtime code transformation in the client's browser.

Usually compiling does code optimisations and produces final resulting code.

Then you can minify it to replace long variables with short variable names, removing comments, removing extra empty lines etc to reduce the size. Then the file is gzipped and transferred to the client's browser. This stage(minify and gzip) reduces the size and saves bandwidth and increases webpage render times.

On your computer:

JSX -> JavaScript -> minified JavaScript

On client's browser:

JavaScript -> Execute

In programming, the most resource intense work is compiling the code. (Executing depends on code/logic)

So, you are doing the most resource intense task in your computer and sending the simple JavaScript to execute which reduces the work to be done by browser which results in faster loads of webpage and less CPU work on client's browser(some users can be using slow computers and your webpage may hang their computers due to using too much resources).