How to integarte @clairejs into Create-React-App

1. Generate a project using npx create-react-app --template typescript <app-name>

2. 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.

3. 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"
    ]
}

4. Install dev packages: npm i -D babel-plugin-transform-typescript-metadata @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties

5. Edit run script to reflect the current environment: "start": "REACT_APP_ENV=<env> node scripts/start.js",

6. 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

• upgrade to react 18

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

• add store hooks