DEV Community

Jack Chen
Jack Chen

Posted on

3 1

After reviewing JS fundamentals, I found that Create-React-App is doing a lot..

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
Enter fullscreen mode Exit fullscreen mode

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay