Lesson 8 / 31
Other Essential Presets
Use preset-react for JSX and preset-typescript for type stripping, and understand preset ordering.
@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.