Lesson 8 / 30

Other Essential Presets

Learn about preset-react, preset-typescript, and more specialized presets.

@babel/preset-react for JSX

@babel/preset-react handles JSX syntax, converting <Component /> into React.createElement(...) calls. Essential for React projects.

@babel/preset-typescript

Strip TypeScript type annotations without type-checking. Babel removes : string, <T>, etc., leaving valid JavaScript.

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

Presets are ordered

Babel applies presets in reverse order. Put @babel/preset-typescript last so type stripping happens first, then other transformations.