rescript-smooth
rescript-smooth is a rescript configuration for smooth React Apps, allowing you to:
- Use JSX in JavaScript without adding
react
imports. - Use
class
andfor
attributes in JSX elements. - Support path mapping specified in
jsconfig.json
. - Use your own babel, eslint, and postcss configurations as needed.
- Enable CSS sourcemaps in development.
Installation
Add rescript-smooth to your Create React App project:
npm install rescript-smooth
Usage
Add rescript-smooth to your rescript configuration:
// package.json "rescripts": "smooth"
Define path mapping in tsconfig.json
or jsconfig.json
:
// jsconfig.json "compilerOptions": "baseUrl": "src" "paths": "@app/*": "components/*" "@css/*": "components/*/index.module.css"
Enjoy writing a smooth React App:
// App.js (before);; const App = <Button class=styleButton>propschildren</Button>;
// App.js (after);;; const App = ;
FAQ
How do I use this with the default Babel configuration?
Add a babel configuration with the following fields:
// .babelrc.json, or "babel" in package.json "presets": "react-app"
What if I want the smooth Babel configuration?
// .babelrc.json, or "babel" in package.json "presets": "smooth-react-app"
How do I use this with the default Eslint configuration?
Add an eslint configuration with the following fields:
// .eslintrc.json, or "eslintConfig" in package.json "extends": "react-app"
What if I want the smooth Eslint configuration?
// .eslintrc.json, or "eslintConfig" in package.json "extends": "smooth-react-app"
How do I use this with the default PostCSS configuration?
Add a PostCSS configuration with the following fields:
// .postcssrc.json "plugins": "postcss-flexbug-fixes" "postcss-preset-env" autoprefixer: flexbox: "no-2009" stage: 3 "postcss-normalize"
What if I want the smooth PostCSS configuration?
The default and smooth PostCSS configurations are the same.