babel-preset-smooth-react-app
babel-preset-smooth-react-app is a Babel preset for smooth Create React Apps.
It is a light wrapper around babel-preset-react-app that allows you to:
- Write JSX in JavaScript without adding
react
imports. - Write
class
andfor
attributes in JSX elements. - Import modules from
paths
specified injsconfig.json
.
Installation
Add babel-preset-smooth-react-app to your project:
npm install babel-preset-smooth-react-app --save-dev
Usage
Add babel-preset-smooth-react-app to your babel configuration:
// babel.config.js "presets": "smooth-react-app"
Define path mapping in tsconfig.json
or jsconfig.json
:
// tsconfig.json or jsconfig.json "compilerOptions": "baseUrl": "src" "paths": "@com/*": "components/*" "@css/*": "components/*.module.css"
Enjoy writing a smooth React App:
// App.js (before);; const App = <Button class=styleButton>propschildren</Button>;
// App.js (after);;; const App = ;
Options
All options are passed through into babel-preset-react-app, with additional options provided to other plugins.
pragma
The pragma
option defines how the element creation function is added.
// transforms <foo /> into createElement('foo') and potentially imports React (default) pragma: '{ createElement } from react'
// transforms <foo /> into h('foo') and potentially imports Preact pragma: '{ h } from preact'
pragmaFrag
The pragmaFrag
option defines how the fragment creation function is added.
// transforms <></> into Fragment and potentially imports React (default) pragmaFrag: '{ Fragment } from react'
// transforms <></> into Fragment and potentially imports Preact pragmaFrag: '{ Fragment } from preact'
throwIfNamespace
The throwIfNamespace
option toggles whether or not to throw an error if a XML
namespaced tag name is used. For example:
// will not throw (default)<f:image />
development
The development
option toggles plugins that aid in development, such as
[@babel/plugin-transform-react-jsx-self] and
[@babel/plugin-transform-react-jsx-source].
useBuiltIns
The useBuiltIns
option determines whether the preset should use native
built-ins instead of trying to polyfill behavior for any plugins requiring it.