How to integarte @clairejs into Create-React-App
-
Generate a project using npx create-react-app --template typescript <app-name>
-
Run npm run eject
to eject the app. This is due to the fact that @clairejs depends heavily on decorator metadata (reflect-metadata) but create-react-app babel is currently not supporting it.
-
Replace "babel" config in package.json file by this
"babel": {
"plugins": [
"babel-plugin-transform-typescript-metadata",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
],
[
"@babel/plugin-proposal-private-methods",
{
"loose": true
}
],
[
"@babel/plugin-proposal-private-property-in-object",
{
"loose": true
}
]
],
"presets": [
"@babel/preset-typescript",
"@babel/preset-env",
"@babel/preset-react"
]
}
-
Install dev packages: npm i -D babel-plugin-transform-typescript-metadata @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties
-
Edit run script to reflect the current environment: "start": "REACT_APP_ENV=<env> node scripts/start.js",
-
Apply @clairejs architecture, run npm install & npm start
Change Log
3.0.20
- update claire core
- unique reduce in crud getByIds store action
3.0.18
- fix use Store
- fix export, fix test
- fix api, change ApiFunction to StoreAction
3.0.11
3.0.9
- add type support to useStore & useDispatch
3.0.7
- add default store selector
- add error handling
3.0.3
- exclude react dom & react in build
- emit typescript .d.ts
3.0.0
- using claire core & claire client 3.x
- implement store, api, translation utils
1.0.0