# Babel Babel is a JavaScript compiler and toolchain that converts modern ECMAScript code into backwards-compatible JavaScript. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Babel in Khan Academy's i18n Toolchain DevFeed: [Babel in Khan Academy's i18n Toolchain]() Original publisher: [Read original article]() Author: Khan Academy Published: 2015-06-22T22:00:00Z Content type: tutorial Language: en Sources: [Khan Academy]() Topics: [Babel](), [Internationalization (i18n)](), [toolchain](), [es6](), [JavaScript](), [Parser](), [Universal Syntax Tree.](), [Open Source]() Tags: [api](), [architecture](), [babel](), [build](), [build-system](), [code](), [engineering](), [es6](), [eslint](), [frontend](), [javascript](), [news](), [plugin](), [source](), [structure](), [syntax](), [tests](), [toolchain](), [types](), [web-frontend](), [workflow]() ### AI overview Khan Academy describes switching its ES6 and JSX frontend compilation from jstransform to Babel. The article explains a custom Babel plugin for preserving the project's internationalization behavior and discusses matching generated output, line numbers, whitespace, and the existing build chain. ### Source excerpt By Kevin Barabash We've been using ES6 (along with JSX) for sometime at Khan Academy. Right now, we're ... Read more ## i18nize-templates: Internationalization After the Fact DevFeed: [i18nize-templates: Internationalization After the Fact]() Original publisher: [Read original article]() Author: Khan Academy Published: 2015-09-28T22:00:00Z Content type: release Language: en Sources: [Khan Academy]() Topics: [Internationalization (i18n)](), [Localization (l10n)](), [Open Source](), [Python](), [Handlebars](), [HTML](), [Library](), [Code](), [JavaScript](), [Babel]() Tags: [babel](), [code](), [engineering](), [html](), [infrastructure](), [javascript](), [language](), [languages](), [library](), [news](), [open-source](), [programming](), [python]() ### AI overview Khan Academy describes retrofitting its English-only codebase for internationalization and localization across several HTML-rendering technologies. It introduces i18nize-templates, an open-source Python module that finds natural-language text in HTML and templates and marks it as i18n-aware. The tool supports raw HTML, jinja2, and Handlebars templates and reportedly reduces template annotation time by over 90%. ### Source excerpt By Craig Silverstein Khan Academy started as a collection of videos, but now has over 100,000 pieces of ... Read more ## Nativewind: Speeding up Styling in React Native DevFeed: [Nativewind: Speeding up Styling in React Native]() Original publisher: [Read original article]() Author: Jack Rosa Published: 2025-11-13T14:00:00Z Content type: tutorial Language: en Sources: [Hashrocket]() Topics: [React Native](), [Tailwind CSS](), [Mobile](), [Expo](), [Babel](), [Prettier]() Tags: [babel](), [css](), [init](), [install](), [mobile](), [react](), [react-native](), [tailwind](), [tailwind-css](), [tailwindcss]() ### AI overview A tutorial on using NativeWind to style React Native applications with Tailwind CSS classes. It explains NativeWind's runtime or Babel-plugin compile-time translation into React Native styles, and covers setup with Expo, Tailwind configuration, a global CSS file, and Babel. ### Source excerpt How Nativewind can speed up your React Native Development If you're anything like me, after working on a few web projects with Tailwind, it can feel like a drag to return to stacks that use other styling libraries. Tailwind has become, for myself, and many other developers, a standard styling paradigm. When starting my most recent React Native project, I was relieved to find out that NativeWind exists. NativeWind is exactly what is sounds like: Tailwind Classes in React Native. I can attest to the breeziness of writing an entire native app without a single call to StyleSheet.create. It's Familiar Nativewind takes the familiar classes of Tailwind CSS directly to your React Native components. Virtually every* class from Tailwind CSS can be used the exact same way on your mobile app (and the web), and the development results end up being faster iteration, less translating, and components that feel more readable and maintainable. Let's look at how to set it up NativeWind translates Tailwind class names into React Native styles at runtime or compile-time, if you use the Babel plugin. You end up with the the same composable mindset of Tailwind, but the output is just React Native styles. The setup is simple enough, for my latest project we used expo: npx expo install nativewind react-native-reanimated@~3.17.4 react-native-safe-area-context@5.4.0 npx expo install --dev tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11 Now to generate a tailwind config, run: npx tailwindcss init Be sure to include the path to your components in the generated tailwind.config.js file /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./App.tsx", "./components/**/*.{js,jsx,ts,tsx}"], presets: [require("nativewind/preset")], theme: { extend: {}, }, plugins: [], } Next create your global.css file with tailwind's directives @tailwind base; @tailwind components; @tailwind utilities; Then, enable the Babel plugin in babel.config.js: module.exports = function (api) { api ## Next.js 15 RC DevFeed: [Next.js 15 RC]() Original publisher: [Read original article]() Author: Zack Tanner Published: 2024-05-23T17:00:00Z Content type: release Language: en Sources: [Next.js Blog]() Topics: [Next.js](), [React](), [Caching](), [Compiler](), [Babel](), [build times]() Tags: [babel](), [build-times](), [caching](), [compiler](), [errors](), [experimental](), [next-js](), [react](), [release]() ### AI overview The Next.js 15 Release Candidate is available for testing ahead of the stable release. It adds React 19 RC support, experimental React Compiler support, improved hydration error displays, changes caching defaults, experimental Partial Prerendering, post-response code execution, Turbopack configuration updates, and stable external package bundling options. ### Source excerpt The Next.js 15 Release Candidate (RC) is now available. This early version allows you to test the latest features before the upcoming stable release. ## Vue 2.7 is Now in Beta DevFeed: [Vue 2.7 is Now in Beta]() Original publisher: [Read original article]() Published: 2022-06-20T00:00:00Z Content type: release Language: en Sources: [The Vue Point]() Topics: [Vue.js](), [Babel](), [JavaScript](), [TypeScript]() Tags: [announce](), [browser](), [compatibility](), [features](), [upgrade](), [vue]() ### AI overview This release announcement presents Vue 2.7 as a beta that backports important Vue 3 features, including the Composition API, SFC support, and SFC CSS v-bind. It also describes supported APIs, ESNext syntax in template expressions, and behavior differences and limitations caused by Vue 2's getter/setter-based reactivity system. ### Source excerpt We are happy to announce that Vue 2.7 is now in beta. ## Next.js 11.1 DevFeed: [Next.js 11.1]() Original publisher: [Read original article]() Author: Tobias Koppers Published: 2021-08-11T16:00:00Z Content type: release Language: en Sources: [Next.js Blog]() Topics: [Next.js](), [Security](), [build performance](), [Rust](), [Babel](), [Code](), [JavaScript](), [TypeScript](), [ESLint](), [HTTP]() Tags: [babel](), [build-performance](), [eslint](), [http](), [javascript](), [next-js](), [performance](), [phishing](), [rust](), [security](), [typescript](), [vulnerabilities]() ### AI overview Next.js 11.1 improves build performance and introduces an important security patch for an open redirect. The release adds experimental ES Modules support, Rust-based SWC tooling, faster data fetching during pre-rendering, faster source maps, and ESLint integration. ### Source excerpt Next.js 11.1 introduces an important security patch, ES Modules support, performance improvements, Rust-based tooling, 2x faster data fetching when pre-rendering, and more! ## Introducing the New JSX Transform DevFeed: [Introducing the New JSX Transform]() Original publisher: [Read original article]() Published: 2020-09-22T00:00:00Z Content type: article Language: en Sources: [React]() Topics: [React](), [Babel](), [JavaScript](), [TypeScript]() Tags: [babel](), [compiler](), [javascript](), [react](), [typescript](), [upgrade]() ### AI overview This React 17 article introduces a rewritten JSX transform supported by Babel and TypeScript. The optional upgrade allows JSX without importing React, may slightly reduce compiled bundle size depending on the setup, and preserves the existing JSX syntax and older transform. ### Source excerpt This blog site has been archived. Go to react.dev/blog to see the recent posts. Although React 17 doesn't contain new features, it will provide support for a new version of the JSX transform. In this post, we will describe what it is and how to try it. What's a JSX Transform? Browsers don't understand JSX out of the box, so most React users rely on a compiler like Babel or TypeScript to transform JSX code into regular JavaScript. Many preconfigured toolkits like Create React App or Next.js also include a JSX transform under the hood. Together with the React 17 release, we've wanted to make a few improvements to the JSX transform, but we didn't want to break existing setups. This is why we worked with Babel to offer a new, rewritten version of the JSX transform for people who would like to upgrade. Upgrading to the new transform is completely optional, but it has a few benefits: With the new transform, you can use JSX without importing React. Depending on your setup, its compiled output may slightly improve the bundle size. It will enable future improvements that reduce the number of concepts you need to learn React. This upgrade will not change the JSX syntax and is not required. The old JSX transform will keep working as usual, and there are no plans to remove the support for it. React 17 RC already includes support for the new transform, so go give it a try! To make it easier to adopt, we've also backported its support to React 16.14.0, React 15.7.0, and React 0.14.10. You can find the upgrade instructions for different tools below. Now let's take a closer look at the differences between the old and the new transform. What's Different in the New Transform? When you use JSX, the compiler transforms it into React function calls that the browser can understand. The old JSX transform turned JSX into React.createElement(...) calls. For example, let's say your source code looks like this: import React from 'react'; function App() { return

Hello World

; } Under t ## React v16.13.0 DevFeed: [React v16.13.0]() Original publisher: [Read original article]() Published: 2020-02-26T00:00:00Z Content type: release Language: en Sources: [React]() Topics: [React](), [CSS](), [Babel]() Tags: [bugfixes](), [bugs](), [deprecated](), [react](), [release](), [updates]() ### AI overview React 16.13.0 is released with bug fixes and new development warnings. The release warns about state updates during another component's render, conflicting CSS shorthand and longhand rules, deprecated string refs, and the legacy React.createFactory helper. ### Source excerpt This blog site has been archived. Go to react.dev/blog to see the recent posts. Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release. New Warnings Warnings for some updates during render A React component should not cause side effects in other components during rendering. It is supported to call setState during render, but only for the same component. If you call setState during a render on a different component, you will now see a warning: Warning: Cannot update a component from inside the function body of a different component. This warning will help you find application bugs caused by unintentional state changes. In the rare case that you intentionally want to change the state of another component as a result of rendering, you can wrap the setState call into useEffect. Warnings for conflicting style rules When dynamically applying a style that contains longhand and shorthand versions of CSS properties, particular combinations of updates can cause inconsistent styling. For example:
...
You might expect this
to always have a red background, no matter the value of toggle. However, on alternating the value of toggle between true and false, the background color start as red, then alternates between transparent and blue, as you can see in this demo. React now detects conflicting style rules and logs a warning. To fix the issue, don't mix shorthand and longhand versions of the same CSS property in the style prop. Warnings for some deprecated string refs String Refs is an old legacy API which is discouraged and is going to be deprecated in the future: