React: New JSX Transforms & a possible future with ES Modules?

React 17 receives new JSX transforms that were developed in cooperation with Babel. The innovation is now also available in old versions of the library and could become more important in the future if React implements a planned major change.

React 17 gets new JSX transforms. Luna Ruan from the React team announced this a few weeks ago. The innovations are optional and do not change the previous JSX syntax. However, they simplify the work with JSX, which is not natively understood by the browsers and must first be translated via Babel or other tools. With the new features that have now been introduced and which do not represent a breaking change, JSX can be used without importing React; instead there are new entry points in React that are used for the transforms. The new transforms can lead to smaller bundles, but this depends on the setup. The React team also plans to continue working on simplifying the library based on this innovation and making a major change to a future version.

React soon without standard export?

The implementation of such updates to major versions is part of the usual procedure when developing frameworks and libraries. It is also typical that the latest releases are updated before the major version in order to keep the upgrade hurdle low. The React team has now gone one step further: Versions 16.14.0, 15.7.0 and 0.14.10 have received support for the new transforms. This covers all the most important versions that are still in use, as the React team reports on Twitter.

Basic camp for beginners

Get a structured and comprehensible introduction to Angular. All concepts and backgrounds easily explained online!

New: Deep-Dive for advanced users

Penetrate all of Angular’s concepts. Learn about pitfalls, misunderstandings, and deliberate limitations. As online training or on-site in Düsseldorf!

For developers who use the new transforms, there is also a code mod available that removes the unnecessary imports. The new transforms have one downer, however: If you use hooks, you still have to import React to transform the JSX. Since both versions of the JSX Transforms can be used in parallel, this should not cause problems. However, it might be worthwhile to use the new Transforms now, wherever possible: The React team announced that it will introduce native support for ES Modules in one of the upcoming major versions. With this change, which is definitely not planned for v17, the standard exports should be omitted. At this point in time, the newly introduced JSX Transforms innovation could become more important.

Examples of the new JSX Transforms as well as information on the code mod can be found in the official blog post about the innovations.

Leave a Reply