In normal daily life, I work on create-react-app project without thinking..

Recently, I reviewed JS fundamentals. Then I realized how great create-react-app is and there're lots of assumptions wrong in my head

Assumption #1

Syntax and ES features I'm using are supported in browsers for sure..

In fact, it's not true. CRA is filling the gap by having compilers transforming your code to the target, es5, es6, or others. And also, The gap for ES features are filled by polyfills someone added to the project. It's possibly done by yourself!

My point is you don't need to touch or think about these and you tend to forget. That's why I'm writing it down to remind myself.

// ES6
const { count } = { count: 1 } // syntactic feature
let a = new Promise(() => {}) // functional feature

// ⬇️⬇️compiled to ES5
"use strict";
var _count = {
    count: 1
  },
  count = _count.count; // syntactic feature
var a = new Promise(function () {}); // functional feature

Above shown how it's compiled in Babel say you write ES6 code or the latest fancy code then the target is set to ES5.

Note that the syntactic feature is handled or changed in the output which is compatible with ES5. BUT, the functional feature is not handled, which is why polyfills should kick in. Great explanation here

Assumption #2

You can import anything: css, image, module, even import dynamically.

The mighty webpack is behind CRA, that's why all these magic is available.

Others

Also tonnes of recommendations like:

• how to test with jest, react-testing-lib
• how to handle HTML Head with ReactHelmet
• how to deploy
• how to work with backend
• how to opt-in PWA
• how to fetch data
• how to config Env Variables
• how to analyze your app

It would be a nightmare if you have to do all these. And thanks to CRA, we just need to kick in whenever it's needed.