Quick start

To get started with React3L, you should:

  • Be familiar with Typescript and ESLint
  • Be familiar with React Hook APIs
  • Well-understanding about React component's lifecycle
  • Well-understanding about both Functional Programming and Object-Oriented Programming

Install dependencies

yarn add react3l-common \
         react3l-advanced-filters \
         react3l-decorators \
         react3l-axios-observable \
         react3l-localization \
         react-i18next i18next \
         moment \
         rxjs \
         reflect-metadata

Dev dependencies

yarn add -D react3l-cli react3l-i18next-extractor npm-run-all

tsconfig.json

{
  "compilerOptions": {
    "allowJs": false,
    "allowSyntheticDefaultImports": true,
    "alwaysStrict": true,
    "baseUrl": ".",
    "checkJs": false,
    "declaration": true,
    "emitDecoratorMetadata": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react", // react | react-native
    "lib": [
      "ESNext",
      // For web projects, add DOM libraries
      "DOM",
      "DOM.Iterable"
    ],
    "listEmittedFiles": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "noEmit": true,
    "outDir": "dist",
    "paths": {
      "src/*": [
        "./src/*"
      ],
      // These paths below is for React Native projects
      "assets/*": [
        "./assets/*"
      ],
      "app.json": [
        "./app.json"
      ],
      "package.json": [
        "./package.json"
      ]
    },
    "removeComments": false,
    "resolveJsonModule": true,
    "skipDefaultLibCheck": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "strictBindCallApply": true,
    "strictFunctionTypes": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": false,
    "target": "ESNext",
    "typeRoots": [
      "node_modules/@types/"
    ]
  },
  "include": [
    "__tests__/",
    "src/"
  ]
}

package.scripts

Add these scripts to your package.json file:

{
  "scripts": {
    // Extract i18next translation files
    "extract": "i18next-extractor -i src/ -o src/i18n/ -p src/i18n/ extract",
    // Merge i18next translation files
    "merge": "i18next-extractor -i src/ -o src/i18n/ -p src/i18n/ merge",
    // Run merge command before start
    "prestart": "run-s merge",
    // Run merge command before build
    "prebuild": "run-s merge" // to use in web projects
  }
}