Playing with JSX

In The several ways to import React, Kent C. Dodds also covers a bit about JSX and “the JSX pragma”. Here’s a video of CSS Tricks’ Chris Coyier goofing around with it.

JSX is not fancy. It essentially transforms angle brackets in JavaScript into function calls. That works great for React, but because we can customize it, we can make it work for other libraries or write our own.

💁‍♂️ You can see Chris importing React using the wonderful SkyPack there.

🔗 Related:

ES-Everything: an ECMA Explainer

Matthew Gerstman explaining a lot of terms that evolve around JavaScript: ECMA, TC39, Babel, Polyfills, …

So you Google how to make your app work in IE 10, or 11, or whatever. You’re quickly flooded with acronyms and terms you’ve never heard before ES5, ES6, ESNext, ES2020, TC39, ECMA. What’s a transpiler? People are debating about polyfills and ponyfills; is there a difference?

If you’re overwhelmed, that’s okay, it’s a lot. This article will attempt to cover the entire ecosystem around shipping new-ish JavaScript to older browsers and how the community decides what features get added to JavaScript in the first place; let’s dive in.

ES-Everything: an ECMA Explainer →

“last 2 versions” considered harmful

When using babel-preset-env with the list of supported browsers set to "last 2 versions" – which I am doing used to do – you’re basically supporting browsers that are dead or have no users.

Take Internet Explorer for example. It’s been replaced by Edge and will never have any new versions after Internet Explorer 11. Microsoft gave us that gift.

But if you say that you support the “last 2 versions” of every browser, that means you support the last 2 versions of Edge AND the last 2 versions of Internet Explorer.

And since there’s never going to be another version of Internet Explorer, you will be supporting Internet Explorer 10 & 11… forever.

The personal recommendation of the author is this setting:

"browsers": [
  ">0.25%",
  "not ie 11",
  "not op_mini all"
]

“last 2 versions” considered harmful →

Setting up React for ES6 ES2015 with Webpack and Babel

es6-webpack-react-babel

This resource came in quite handy when setting up React in combination with ES6 ES2015, Webpack and Babel.

Installing all the required dependencies:

# Install Webpack
npm install --save-dev webpack

# Install the Babel Loader, for use with Webpack
npm install --save-dev babel-loader

# Install the es2015 and react presets, for use with Babel
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react

The contents of webpack.config.js:

var path = require('path');

module.exports = {
  entry: path.join(__dirname, '../src/scripts/index.js'),
  output: {
    path: path.join(__dirname, '../build/scripts/'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        },
        progress: true
      }
    ]
  },
};

Integrate it as a grunt task using grunt-webpack, or run it directly using webpack-dev-server (install either one using npm i):

$ webpack-dev-server --progress --colors
Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)