React without a build step

TL;DR

Writing React components using React.createElement instead of JSX reduces the need for a transpiler & build system*. Components written this way:

*If you want to target older browsers or use syntax proposals, you still need Babel, and a bundler like Webpack is great for shipping apps.

A few years ago you might have used Knockout or Backbone with jQuery to write an interactive widgets, but now React’s declarative components make these things much easier.

Suppose you’re a contractor. One of your clients, a running shoe company, asks you to build a unit converter for their webpage. Their customers need to convert miles to kilometers.

The shoe company don’t want to set up Babel or Webpack to edit the files. They run on an e-commerce platform and they want to make sure they can use the templating language and content management system it provides to maintain their pages. Luckily you can write React without any extra tooling.

createElement and render need to be in the global namespace. These are provided by React and ReactDOM. You can also use Preact, a lighter-weight alternative with a compatible API. (The examples use Preact.)

React

Preact

Standard HTML tag with props

Custom element

Passing children

The completed widget is about 80 lines and only depends on the 3kb Preact library

The Javascript examples above use ES2015 syntax, which is supported in all current browsers. However, React works with prototype syntax, too. If you’re targeting older browsers or just don’t like classes, you can use prototypical inheritance like this:

The create-react-class library can also generate React components from plain objects in a format resembling what you'd do with the class keyword:

Overall it’s not a bad experience. JSX makes HTML feel more at home, but tends to obscure the underlying Javascript. Composition and higher-order components are more obvious in plain JS. If I was writing a library using those patterns heavily I might be tempted to go JSX-free even if bundling with Webpack + Babel.

Related posts:

As a learner at the beginning of your Russian language journey, some of the first things to know are how to say hello and goodbye in Russian. Even before learning the basics you probably knew the…

John McCarthy coined the term Artificial Intelligence in 1956. He defined it as the science and engineering of making intelligent machines. Now we must consider how to make it ethical.

The Yankees defeated the Red Sox 3–1 on Saturday’s game of the week. Now, they look to take the series on Sunday night baseball in front of a packed crowd in the Bronx. There was no scoring for the…